Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Applying CSS/Clientlib to content in editor

Avatar

Avatar
Validate 1
Level 1
SiriusRex
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
SiriusRex
Level 1

Likes

0 likes

Total Posts

13 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Affirm 1
View profile
SiriusRex
Level 1

24-06-2020

TL;DR - I'm trying to apply a clientlib to the page content in editor.html without it being included in the published content.

 

AEM has a clientlib for FontAwesome here: /etc/clientlibs/acs-commons/vendor/fontawesome/css/font-awesome.css.

This is included in editor.html, but because the content of the page is actually in an iframe, the font-awesome styles don't apply to any of the components. I'm trying to figure out how I can either 1) use the existing CSS call to apply to the contents in the iframe or 2) find a way to include the font awesome CSS in the page content just in the authoring mode and not have it get included when the page gets published. It's a long complicated story, but our content is being placed inside a wrapper that already calls font awesome (but this wrapper isn't in AEM). I could just include it into the page template, but then we would have two calls loading the CSS (in the header, and in the page content).

 

Looking for any suggestions of how I might make this work. Thanks.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile

Avatar
Establish
MVP
Nupur_Jain
MVP

Likes

165 likes

Total Posts

186 posts

Correct Reply

76 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 25
View profile
Nupur_Jain
MVP

25-06-2020

Hi @SiriusRex 

 

The clinetlib of the css file is "acs-commons.fontawesome". You can check first if the wcmmode is edit and then include the cientlib in your site header like this:

 

 

<sly data-sly-test="${wcmmode.edit} "data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.css @ categories='acs-commons.fontawesome'}"/>

 

 

Since the page in editor.html loads in iframe, you will have to include this statement in site header html.

 

Hope it helps!

Thanks

Nupur

Answers (1)

Answers (1)

Avatar

Avatar
Validate 1
MVP
Nirmal_Jose
MVP

Likes

118 likes

Total Posts

207 posts

Correct Reply

58 solutions
Top badges earned
Validate 1
Establish
Coach
Contributor
Shape 1
View profile

Avatar
Validate 1
MVP
Nirmal_Jose
MVP

Likes

118 likes

Total Posts

207 posts

Correct Reply

58 solutions
Top badges earned
Validate 1
Establish
Coach
Contributor
Shape 1
View profile
Nirmal_Jose
MVP

25-06-2020

use the category cq.authoring.editor on the clientlibs you want to load only on editor mode. 

Adobe loads all authoring component clientlibs using this category. Reference at [1]

 

[1] - /libs/cq/gui/components/authoring/searchfield/clientlibs/searchfield