Apply CSS only in edit mode

Hi, I have already checked the question reported under this question, but it is not working in 5.8.18 where I think the body does not use a different class if in edit mode.

What I have is some CSS (for my ul elements) in the style-sheet of a single Space which works fine when pages are viewed but makes editing of same pages cumbersome therefore I would like to define in the Spave CSS a different CSS if a page is in "Edit mode".

Is there a way to identify if the page is in edit mode via CSS?

Modifying the layout is too complex for me. The other alternative I see is to remove my CSS from the Space CSS and add it in a CSS macro in each single page of the space, but you can easily understand this is not my preferred solution...

2 answers

1 accepted

0 votes
Answer accepted
Dave Norton Atlassian Team Mar 09, 2016

Hi Rosario!

There's a couple of ways to tackle this. You could prefix your CSS with the ID of the main content block. On my default-themed instance of Confluence 5.9.4, the content for the page is inside the #main-content DIV.

#main-content LI { background-color: red; }

That rule then only applies to viewing the page, and allowing the normal stylesheet to apply when editing. Using a less restrictive selector (such as LI) will cause the style to apply in the editor as well.

Conversely, you can write stylesheet rules that only target the editor:

BODY#tinymce LI { background-color: purple; }

In my instance, combining both of those rules gives me a red set of bullets in the body, and purple bullets in the editor. That should give you a way to make changes however suits you best. Let me know if I've misunderstood; and how that works for you!


This solution works and I marked is as answer, but I did not use it because it arrived just after I started adding the style sheet I needed in those pages where I needed it (it is 80% of them, but not all) using a "CSS Stilesheet" macro.

Thanks anyway!

CSS is only for customizing the look of the finished page or exported PDF.

And while CSS might be cumbersome, that is the price we pay for its power.

I do not agree. Maybe I did not explain my-self properly.

The CSS changes that I do in the Space stylesheet will affect all pages and will affect not only the finished page, but also the page while I am editing it.

What is cumbersome is not CSS as such, but the consequences of the changes that I have done when the page is in "edit mode".

More precisely I have set ul{overflow:hidden;} to ensure lists sitting side by side with floating elements are rendering as desired, but this makes the whole bullet list difficult to manage when I have to edit the page.

If I could use CSS to change back the overflow property in case ul are in edit mode I would be done.

In the answers mentioned they suggest something like body.edit ul{overflow:visible;} i.e. if ul are following the body tag with class edit then...

But body tag seems not to have different classes anymore when in edit more in 5.8... 

I've never seen CSS affect Edit mode. Are you making your lists with the standard bullet/number buttons or with markup, markdown, the HTML macro or some other macro?

I use the standard bullet provided in the editor.

Just give it a try the code I use is in my previous comment: one line. It affects not only regular ul but also checkboxes (but that is easy to fix because has an additional class)

Suggest an answer

Log in or Sign up to answer
Community showcase
Published Mar 12, 2019 in Confluence

Confluence Admin Certification now $150 for Community Members

More and more people are building their careers with Atlassian, and we want you to be at the front of this wave! Important Dates Start the Certification Prep Course by 2 April 2019 Take your e...

1,479 views 4 13
Read article

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you