Page Specific Styles

Avatar

Avatar

VCatalano

Avatar

VCatalano

VCatalano

15-10-2015

What is the best way to handle page-specific styles? I have a number of pages that use the same template but require slightly different CSS for styling certain elements on the page. In other systems I've worked with, this is usually done by having a CSS class specific to that page, however, I was curios if there is an AEM way of handling this sort of thing.

View Entire Topic

Avatar

Avatar

Bruce_Lefebvre

Employee

Avatar

Bruce_Lefebvre

Employee

Bruce_Lefebvre
Employee

15-10-2015

The method you've used in other systems will work fine in AEM, too. Simply expose a property via your template's page properties cq:dialog (`./pageClass` for example), and output the value of that property into the class attribute of your template's HTML element. In JSP:

<html class="<%= xssAPI.encodeForHTMLAttr(properties.get("pageClass", "")) %>">

or Sightly:

<html class="${properties.pageClass}">

You can now define your page specific styles as follows (for example, to style paragraphs when pageClass is set to 'homePage'):

.homePage p { margin: 0 1em; }

A general discussion on the topic can be found here [0].

[0] https://css-tricks.com/why-use-classes-or-ids-on-the-html-element/