Implementing theming in AEM 6.4 | Community
Skip to main content
P
priyag89962601
New Participant
July 6, 2018
Solved

Implementing theming in AEM 6.4

  • July 6, 2018
  • 8 replies
  • 4001 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by smacdonald2008

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

8 replies

Ratna_Kumar
Ratna_Kumar
New Participant
July 9, 2018

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.

smacdonald2008
smacdonald2008Accepted solution
New Participant
July 9, 2018

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

P
priyag89962601Author
New Participant
July 9, 2018

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

smacdonald2008
smacdonald2008
New Participant
July 9, 2018

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

P
priyag89962601Author
New Participant
July 9, 2018

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

Hemant_arora
Hemant_arora
New Participant
July 9, 2018

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

P
priyag89962601Author
New Participant
July 9, 2018

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

arunpatidar
arunpatidar
New Participant
July 6, 2018

Hi Priya,

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

Thanks

Arun

Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...