Adobe Experience Manager Sites & More

Report · 10/15/15

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.

Bruce_Lefebvre · 10/15/15

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/

View solution in original post

Bruce_Lefebvre · 10/15/15

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/

Adobe Experience Manager Sites & More

Page Specific Styles

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe