Skip to main content
supersoftr30476
Level 2
Mar 21, 2017 7:59 AM UTC
Solved

Using common template for differnt project having different css

Hi Team,

I've multiple sites on my AEM instance with same page structure but different CSS, I want those pages to be created from single template but not sure how to include different css as per site.

E.g. I've three sites A, B, C with css as a.css, b.css & c.css

Template is generic with code as :

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

Above code works fine for A site, but for B & C I want the css to be changed dynamically.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Nupur_Jain
Nupur_JainAccepted solution
Adobe Employee
Mar 25, 2017 4:30 AM UTC

Hi,

Since you want to include different clientlib as per different sites, you can keep a page property where you can select whether you are creating the page for site A or B or C, Then using this property you can make conditional include in html for clientlib using data-sly-test

Or 

have base template where you keep a file clientlib.html which basically includes clientlib A , now create other two templates both having sling:resourceSuperType to first template .Now In these two template do nothing just keep a file clientlib.html having inclusion of B and C clientlib respectively.

If you want, I can explain these approaches in detail.

Hope this helps!

Thank you!

Nupur

View in thread

4 replies

MC_Stuff
MC_Stuff
Level 10
Mar 24, 2017 7:59 PM UTC

Hi,

In your template have a conditional statement to check the route site and include the library accordingly. 

Thanks,

Translate
Nupur_Jain
Adobe Employee
Nupur_JainAdobe EmployeeAccepted solution
Adobe Employee
Mar 25, 2017 4:30 AM UTC

Hi,

Since you want to include different clientlib as per different sites, you can keep a page property where you can select whether you are creating the page for site A or B or C, Then using this property you can make conditional include in html for clientlib using data-sly-test

Or 

have base template where you keep a file clientlib.html which basically includes clientlib A , now create other two templates both having sling:resourceSuperType to first template .Now In these two template do nothing just keep a file clientlib.html having inclusion of B and C clientlib respectively.

If you want, I can explain these approaches in detail.

Hope this helps!

Thank you!

Nupur

Translate
Feike_Visser1
Adobe Employee
Feike_Visser1Adobe Employee
Adobe Employee
Mar 27, 2017 9:22 AM UTC

Also you can use the design-path for this.

${currentDesign.path}/css/home.css (for example).

If you have a different design configured the path will change.

Translate
supersoftr30476Author
Level 2
Apr 30, 2017 7:27 PM UTC

Thanks Nupur for your reply, this was one of the way to resolve this issue but my issue was bit more complex as my site was already live and hence on a live page your template property changes wont reflect until unless you modify that page.

Hence, I've created a simple class which reads all css/js etc from a flat file, that flat file has enteries like this A_clientlibs = "1,2,3,4" , B_clientlibs= "2,3,5,6"

So, it was quite easy for my class to pick project wise clientlibs and then putting it in my sightly code.

Translate
Terms & ConditionsAccessibility statement

Loading footer...