nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Accepted answers

Dave Norton

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

All comments

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)

Dave Norton

Hi Rosario!

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

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

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

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!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-administration