Custom CSS - Editable Templates | Community
Skip to main content
sai_santhosht50
sai_santhosht50
Level 2
Feb 8, 2021 12:19 PM UTC
Solved

Custom CSS - Editable Templates

Hi All,

 

I have created an editable template in my project. If i open the template structure there is no such css file is loading. And in our project all the components css will be merged in a single file which we will be placed in etc/designs/clientlibs/projectname/sample.css.

 

I want this sample.css file to be loaded when i hit the template structure so that the structure looks good.

 

Is it possible to call the existing css. If yes, can you please help me with the steps.

 

Thanks in advance.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Kiran_Vedantam
Kiran_VedantamAccepted solution
New Participant
Feb 8, 2021 2:16 PM UTC

Hi @sai_santhosht50,

 

Go to  Tools -> Templates; Select your required template --> Click on edit --> Go to page policy --> Properties --> Clientlibs, add your client library category so that you can see the css/js loading.

 

 

Hope this helps.

 

Thanks,

Kiran Vedantam.

View reply

8 replies

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
Feb 10, 2021 5:53 PM UTC

Hi @sai_santhosht50,

Clientlibs included at Page policy level is included in /apps/core/wcm/components/page/v2/page/head.html. So cross check if your editable template's page component(as mentioned via sling:resourceType in say, /conf/we-retail/settings/wcm/templates/content-page/structure/jcr:content) is inheriting from core page component.

If it is and still not coming, try the below

  • Include the clientlib in customheaderlibs.html that is overwritten in your page component. 
  • Or try using direct link tag with path to your CSS file (as a last option just to narrow down the issue)

No clue still, share the details of how your page component(using which editable template would have been created) is designed.

Translate
    BrianKasingli
    BrianKasingli
    New Participant
    Feb 8, 2021 10:03 PM UTC

    @sai_santhosht50,

    You will need to make sure that your client library is properly created. Can you find the client library from here? http://localhost:4502/libs/granite/ui/content/dumplibs.html

    Once when your client library with the category exists, you can insert the client category in the editable template's page policy page. 

    As an example, I have included 2 valid client libraries of: cq.handlebars && cq.jquery (http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/content-page/structure.html)

    Results in the page source, I can see client libraries loading as expected. The CSS files will be loaded in the <head> while the JS files will be loaded before the closing of the </body>
    view-source:http://localhost:4502/conf/we-retail/settings/wcm/templates/content-page/structure.html?wcmmode=disabled

     

     

     

     

     

     

    Translate
      sai_santhosht50
      sai_santhosht50Author
      Level 2
      Feb 9, 2021 4:49 AM UTC
      HI @briyanKasingli - I can find my client libs here -> http://localhost:4502/libs/granite/ui/content/dumplibs.html , and as you said i have written the category at page policy of template strucutre. After that when i load the template strucutre i dont see my css is loading in the template. Can you let me know if we can do it in an another way.
      Translate
      Kiran_Vedantam
      Kiran_VedantamAccepted solution
      New Participant
      Feb 8, 2021 2:16 PM UTC

      Hi @sai_santhosht50,

       

      Go to  Tools -> Templates; Select your required template --> Click on edit --> Go to page policy --> Properties --> Clientlibs, add your client library category so that you can see the css/js loading.

       

       

      Hope this helps.

       

      Thanks,

      Kiran Vedantam.

      Translate
        sai_santhosht50
        sai_santhosht50Author
        Level 2
        Feb 8, 2021 2:35 PM UTC
        Hi @kiran_vedantam, Thanks for your reply. For my custom client libs i could see there are 2 properties called dependencies & categories , i have tries both of these in page policy bit css/js didnt loaded in template structure.
        Translate
        Terms & ConditionsAccessibility statement

        Loading footer...