css in custom component not published

[Former Community Member]

Hi ,

I create a custom component "My button" with some clientlib css .

in author instance(http://localhost:4502/cf#/content/training-page-3.html) ,

it looks good:

[img]tt.png[/img]

[img]t.png[/img]

but when I publish the page (http://localhost:4503/content/training-page-3.html),

this component comes out without css :

[img]ttt.png[/img]

I'm quite new to cq5 ,can anyone help me ?

[smacdonald2008]

This means that  the CSS file is not in a proper clientlibs folder. Read this topic:

http://docs.adobe.com/docs/en/cq/current/developing/clientlibs.html

make sure that you place the CSS file in a proper clientlibs folder that is on pub. 

[Sham_HC · Accepted solution]

You need to activate the client lib component also.  It is recommended to do using package & more details at http://docs.adobe.com/docs/en/cq/current/administering/package_manager.html or use tree activation.  

You can also refer http://www.wemblog.com/2013/01/how-to-publish-code-component-in-cq.html

Thanks,

Sham

Twitter: adobe_sham

[Former Community Member]

Thank you for reply. What do you mean by "activate the client lib component" I've already activated the whole project in the Activate Tree (http://localhost:4502/etc/replication/treeactivation.html)  and still not css

[Lokesh_Shivalingaiah]

Hi Richard,

You might have to check couple of things here.

1. clientlibs which contains the css files for the button component is also published. You can verify by accessing the css file in publish instance directly or by using browser plugins.

2. In publish mode, some other css might be overriding this and you might have to check the same.

Best way to find it is to debug using browser developer tools and inspect the element to check the css applied on that component,

[Former Community Member]

thank you for reply. here's some screenshot:

[img]button.png[/img]

------------------

[img]fire.png[/img]

-------------------

[img]fire2.png[/img]

perhaps it's not the clientlib issue but i'm not sure.

[Feike_Visser1]

The issue you are facing is that on publish the "/apps" folder is closed and can't be reached by a non logged-in user.

It is better to move the clientlibs to /etc/clientlibs 

[Lokesh_Shivalingaiah]

So it clearly shows that the css is not available on publish instance !

As Mr. Fieke mentioned, you can move the css for button under etc/designs/<project name>/clientlibs and publish the same.

[Former Community Member]

It works !! Thank you two very much !