css in custom component not published | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

css in custom component not published

  • October 16, 2015
  • 8 replies
  • 2910 views

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 ?

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 Sham_HC

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

8 replies

smacdonald2008
smacdonald2008
Level 10
October 16, 2015

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
Sham_HCAccepted solution
Level 10
October 16, 2015

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

A
Anonymous
October 16, 2015

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
Lokesh_Shivalingaiah
Level 10
October 16, 2015

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,

A
Anonymous
October 16, 2015

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
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
October 16, 2015

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
Lokesh_Shivalingaiah
Level 10
October 16, 2015

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.

A
Anonymous
October 16, 2015

It works !! Thank you two very much ! yes

Terms & ConditionsAccessibility statement

Loading footer...