Issue while applying custom css to template

[SiddharthDixit]

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 filelayout.css file
page policy

template

[BrianKasingli]

@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.

[SiddharthDixit]

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 · Accepted solution]

@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

[SiddharthDixit]

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.

[Suraj_Kamdi]

@SiddarthDixit First check your page source to check whether your css files are loaded correctly on the page. if you have any git repo url you can share with me. I am happy to assist.

[Suraj_Kamdi]

<link rel="stylesheet" href="/etc.clientlibs/project-dir/clientlibs/main.css" type="text/css"> check this path. If its not loaded successfully it means your clientlib categories is not applied successfully.

[SiddharthDixit]

Hi @Suraj_Kamdi,

Thanks for the reply, I tried to check the path mentioned in your solution: "http://localhost:4502/etc.clientlibs/dmi-sample/clientlibs/layout.css" but the page couldn't load. So can you please tell me the reason and steps to solve the problem.

Looking forward to your response and thanks in advance.

[Suraj_Kamdi]

1. Go to following path /apps/project-name/components/structure/page/customheaderlibs.html (If not then create one page component using sling:resourceSuperType="core/wcm/components/page/v2/page")

2. Open customeheaderlibs.html file and update /add following code.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.css @ categories='yourclientlibCategoriesName'}"/>

Replace @Categories with your clientLib categories name 

regards,

Suraj