Implementing theming in AEM 6.4

[priyag89962601]

Hi,

In AEM earlier versions, we had etc/designs where we used to put all our clientlibs. So to implement theming, we used to select the theme from page properties and apply the design based on css from clientlibs.

Since AEM 6.4 does not have etc/designs and clientlibs ahve been moved to /apps folder. Can anyone please let me know how to implement theming in AEM 6.4?

Thanks,

Priya

[arunpatidar]

Hi Priya,

Did you mean Design option in page properties - Advanced tab?

Thanks

Arun

[priyag89962601]

Hi Arun,

Here in AM 6.4, design can be picked from "/apps/settings/wcm/designs" but as i can see in we-retail implementation, they have not used clientlibs here to applythe style. How can we implement theming here without clientlibs?

Thanks,

Priya

[Hemant_arora]

keep clientlibs in /apps/project/clientlibs and set property allowProxy true. Use the new style system

(https://helpx.adobe.com/experience-manager/kt/sites/using/style-system-feature-video-use.html) functionality in AEM.

Create different css classes and change theme

[priyag89962601]

Style guide option is specific to component and not to site .

We are looking for option where author can set the theme at root page level and it get applied throughout .

We plan to build component lib which would be used across sites and there styling can be changed using one configuration like it used to happen with etc/designs.

We can come up with custom solution but wanted to check if there is a feature already available in AEM which can be used to do this.

Thanks,

Priya

[smacdonald2008]

In 6.4 - as you already stated- clientlibs go under /apps.

[priyag89962601]

Yes. But how would we apply the design across all templates? As author needs to control the theme.

[smacdonald2008 · Accepted solution]

In AEM 6.4 - themes (for example - https://themes.getbootstrap.com/ ) are still added via clientlibs which go under /apps.

Then you use Editable templates to build out you site.

You can use Header, footer, and other components that uses the themes defined in the clientlibs.

Then as you build our your site, all pages that use the editable template(s) will have that common theme.

See this Guided Journey on Editable templates. Notice how we added Style-  which is simply adding a clientlib to the site. Then all headers, footers, etc can use that theme.

Scott's Digital Community: Guided Journey for Experience Manager on Editable Templates

[Ratna_Kumar]

Yes, Scott is right!! You can simply add CSS/Styles into clientlibs to the website, so that whole site can use that theme

Scott's Digital Community: Guided Journey for Experience Manager on Editable Templates

Thanks,

Ratna Kumar.