styling cells | Community
Skip to main content
C
chrisu168
Level 4
October 16, 2015
Solved

styling cells

  • October 16, 2015
  • 7 replies
  • 1482 views

Hi,

I am trying to add styles to the table cells but do not seem to see drop down boxes for the cells. The following is my code. This code does seem to work when I change from cellStyles to tableStyles. I have tried to add both cellStyle and tableStyle but only the tableStyle has a drop down in the table properties. Any help is appreciated

 

below does not work

<table jcr:primaryType="nt:unstructured" features="*"> <cellStyles jcr:primaryType="cq:WidgetCollection"> <threeColPadded jcr:primaryType="nt:unstructured" cssName="tbl-three-col-padded" text="3 column padded"/> </cellStyles> </table>

below works

<table jcr:primaryType="nt:unstructured" features="*"> <tableStyles jcr:primaryType="cq:WidgetCollection"> <threeColPadded jcr:primaryType="nt:unstructured" cssName="tbl-three-col-padded" text="3 column padded"/> </tableStyles> </table>

below also does not work for cell but works for table

<customtable jcr:primaryType="nt:unstructured" features="*"> <tableStyles jcr:primaryType="cq:WidgetCollection"> <threeColPadded jcr:primaryType="nt:unstructured" cssName="tbl-twoe-col-padded" text="2 column padded"/> </tableStyles> <cellStyles jcr:primaryType="cq:WidgetCollection"> <threeColPadded jcr:primaryType="nt:unstructured" cssName="tbl-three-col-padded" text="3 column padded"/> </cellStyles> </customtable>
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

Yes -- CQ has to find tbl-three-col-padded as defined in the CSS.

Typically a CQ:ClientLibraryFolder node is used to work with CQ and CSS files.

To see the relationship between an AEM component and how to hook CSS into it -- see this CQ article:

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

7 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

Are you configuring CQ to use a ClientLib to locate the CSS file? 

JS_Bournival
JS_Bournival
Level 3
October 16, 2015

I don't get it.  

chrisu168 wrote...

hi,

I found out my problem, I wasnt looking in the right position to find the styling

 

what is the right position? I am unable to make any of the 2 dropdowns appear!  I have no idea why, and the weird thing is that it works on our QA, but not on our UAT, same node structure. Puzzled, I am.

C
chrisu168Author
Level 4
October 16, 2015

What do you mean and do we need to know the css file upfront ?

C
chrisu168Author
Level 4
October 16, 2015

Hi,

I have a property externalStyleSheets which is pointing to a css file hosted outside of my AEM instance. Does the cell styling name I have need to exist inside this css file?

C
chrisu168Author
Level 4
October 16, 2015

This is what I am seeing when I have the following configuration

<table jcr:primaryType="nt:unstructured" features="*"> <tableStyles jcr:primaryType="cq:WidgetCollection"> <threeColPadded jcr:primaryType="nt:unstructured" cssName="tbl-three-col-padded" text="3 column padded"/> </tableStyles> <cellStyles jcr:primaryType="cq:WidgetCollection"> <leftAlign jcr:primaryType="nt:unstructured" cssName="left-align" text="left align"/> </cellStyles> </table>

 

[img]table_properties.jpg[/img]

C
chrisu168Author
Level 4
October 16, 2015

hi,

I found out my problem, I wasnt looking in the right position to find the styling

smacdonald2008
smacdonald2008Accepted solution
Level 10
October 16, 2015

Yes -- CQ has to find tbl-three-col-padded as defined in the CSS.

Typically a CQ:ClientLibraryFolder node is used to work with CQ and CSS files.

To see the relationship between an AEM component and how to hook CSS into it -- see this CQ article:

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

Terms & ConditionsAccessibility statement

Loading footer...