styling cells

[chrisu168]

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>

[smacdonald2008]

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

[JS_Bournival]

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.

[chrisu168]

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

[chrisu168]

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?

[chrisu168]

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]

[chrisu168]

hi,

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

[smacdonald2008 · Accepted solution]

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