Issue while applying custom css to template

SiddharthDixit

13-03-2020

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.Css.txt fileCss.txt filelayout.css filelayout.css file
page policypage policy

 

templatetemplate

Accepted Solutions (1)

Accepted Solutions (1)

surajkamdi96205

16-03-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

 

 

Answers (1)

Answers (1)

Briankasingli

MVP

13-03-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...

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.