Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

styling cells

Avatar

Level 4

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>
1 Accepted Solution

Avatar

Correct answer by
Level 10

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

View solution in original post

7 Replies

Avatar

Level 10

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

Avatar

Level 4

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.

Avatar

Level 4

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

Avatar

Level 4

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?

Avatar

Level 4

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]

Avatar

Level 4

hi,

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

Avatar

Correct answer by
Level 10

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