Apply CSS only in edit mode

[Rosario De Domenico]

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...

[Dave Norton · Accepted solution]

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!

Cheers,
Dave 

[Rosario De Domenico]

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!

[Milo Test]

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.

[Rosario De Domenico]

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... 

[Milo Test]

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?

[Rosario De Domenico]

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)