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

How can I add arbitrary css to editor.html?

Avatar

Avatar
Validate 10
Level 3
jkpanera
Level 3

Likes

17 likes

Total Posts

97 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 10
View profile

Avatar
Validate 10
Level 3
jkpanera
Level 3

Likes

17 likes

Total Posts

97 posts

Correct Reply

2 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 10
View profile
jkpanera
Level 3

21-05-2020

Hi guys,

 

We have run into a small problem where some of the css on editor.html is problematic, causing some of content not to display properly.

 

In order to fix that, we'd like to add our own css to that page. When I look at the page source, I see:

 

Screen Shot 2020-05-21 at 13.56.16.png

How does AEM choose which stylesheets to use here? How do we add our?

 

Thanks so much!!!

View Entire Topic

Avatar

Avatar
Validate 10
Level 3
andyshreve
Level 3

Likes

15 likes

Total Posts

39 posts

Correct Reply

10 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 3
andyshreve
Level 3

Likes

15 likes

Total Posts

39 posts

Correct Reply

10 solutions
Top badges earned
Validate 10
Validate 1
Ignite 1
Give Back 5
Give Back 3
View profile
andyshreve
Level 3

22-05-2020

One approach is to create a new CSS clientlib and assign it to the "cq.authoring.editor.hook" clientlib like so:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="cq.authoring.editor.hook"/>

 

Then put your editor.html specific CSS in your new clientlib and it should load when /editor.html is loaded. You can also use this approach if you want to load custom javascript on /editor.html. One advantage to this approach is that this CSS is separate from the rest of your CSS and page code so it isn't present on your published pages. Adobe describes this approach in more detail at: 

https://docs.adobe.com/content/help/en/experience-manager-65/developing/extending-aem/customizing-pa...