Issue while applying custom css to template | Community
Skip to main content
S
SiddharthDixit
March 13, 2020
Solved

Issue while applying custom css to template

  • March 13, 2020
  • 2 replies
  • 4356 views

Hi,
I am currently facing some issues while applying custom CSS to the template. When I am trying to apply styles from the page policy no style is visible and it seems that no CSS is applied. I am also attaching the screenshots of the files and issue.

 

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 Suraj_Kamdi

@siddharthdixit 

In your css.txt file, you have written

#base=css

css/layout.css

which is totally wrong. this should be written as

#base=css

layout.css

or 

just css/layout.css

 

because #base property denotes the root folder.

 

Note. you also have to update your clientlib category name inside your page templates component

e.g. /components/structure/page/headlibs.html

 

 

2 replies

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
March 13, 2020

@siddharthdixit,

Thank you for being very clear with your problem by providing screenshots of your configuration. Your setup is 100% correct. The editable template is configured correctly, corresponding to the "dmi-sample.base", client library.

This leaves us to the questions of:

  1. Is your css.txt and js.txt setup correctly?
  2. Is your client library set up properly? Can the client library export CSS and JS? 
    CSS work? http://localhost:4502/etc.clientlibs/demi-sample/clientlibs/clientlib-base.css
    JS work? http://localhost:4502/etc.clientlibs/demi-sample/clientlibs/clientlib-base.js

    If the above works, then it must be the setup of your editable template. 
  3. If #1 and #2 are not resolved, then we need to go into a deeper dive. What does the console log say in your browser? Any Errors?
  4. Try accessing the page with ?debugClientLibs=true, so something like http://localhost:4502/content/my-site/homepage.html?debugClientLibs=true; instructions: http://aempodcast.com/2014/front-end-engineering/debug-client-libs-adobe-experience-manager-formerly-adobe-cq/#.Xmt88ZP7Q5c

In conclusion, the problem you are facing has a complexity level of 2/10, which means that this is very easy to solve. Something was misconfigured, that's all. Either the client library is not configured properly, the editable-template, wcm-core-components-page-v2, was overlayed and the clientlibrary property is not being respected, or simply there was a css or javascript error when the client library tries to export JS or CSS.

S
SiddharthDixitAuthor
March 16, 2020

Hi @briankasingli,

Thanks for the reply, when I tried to open these files they are working fine. So according to you, there may be some problem with the setup of the editable template. Can you please guide me on the way to resolve this issue? As I am very new to this technology I am trying but not able to fix it. 

Looking forward to your response. Thanks in Advance.

Suraj_Kamdi
Community Advisor
Suraj_KamdiCommunity AdvisorAccepted solution
Community Advisor
March 16, 2020

@siddharthdixit 

In your css.txt file, you have written

#base=css

css/layout.css

which is totally wrong. this should be written as

#base=css

layout.css

or 

just css/layout.css

 

because #base property denotes the root folder.

 

Note. you also have to update your clientlib category name inside your page templates component

e.g. /components/structure/page/headlibs.html

 

 

Suraj Kamdi
    S
    SiddharthDixitAuthor
    March 16, 2020

    Hi @suraj_kamdi,

    Thanks for the response, by following your steps it is showing the background colour as required, font colour as required but other properties like text-decoration, display and may other properties are still not applied. Can you please tell me a bit more about it as to why is this happening?

     

    Looking forward to your response and thanks in advance.

     

    Terms & ConditionsAccessibility statement

    Loading footer...