Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Issue while applying custom css to template

Avatar

Level 1

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

 

 

View solution in original post

8 Replies

Avatar

Community Advisor

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

Avatar

Level 1

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.

Avatar

Correct answer by
Community Advisor

@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

 

 

Avatar

Level 1

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.

 

Avatar

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

Avatar

Community Advisor
<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.

Avatar

Level 1

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.

Avatar

Community Advisor

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