Community
Answers Developer Questions
Questions
Edit & Edit Preview custom CSS - Confluence 5.3

Edit & Edit Preview custom CSS - Confluence 5.3

Hi Answers!

When going into Edit / Edit Preview mode on Confluence 5.3 I would like additional CSS to apply to my custom header.

The problem I'm having is that the page doesn't referesh when a user enters Edit mode. So if I use targeting like this:

#if ($mode == "edit" || $mode == "edit-preview")
&lt;style&gt;
#header {
display: none !important;
}
&lt;/style&gt;
#end

It doesn't work unless the user refreshes the page.

I've also tried adding some simple javascript to autorefresh on load, but again the page isn't doing a load so the script doesn't run.

&lt;script&gt;
	window.onload = function() {
	if(!window.location.hash) {
		window.location = window.location + '#loaded';
		window.location.reload();
	}
	}
	&lt;/script&gt;

So, my question is:

How can I run custom javascript or CSS apply only when the user is in Edit mode?

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes

Answer accepted

How about this?

body.edit #header {
display: none !important;
}

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Davin, thank you so much! Works great.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi,

I have a similar issue therefore I would like to understand your suggestion better.

I am adding some CSS to my ul element in my space style-sheet, but this makes editing inconvenient, so I want to revert (or apply a different CSS) when in edit mode.

I have changed the HTML source of a page when in view and when in edit mode and I do not see any "edit" class for the body element; how does your suggestion work?

Thanks and regards,

Rosario

P.S. I user confluence 5.8.18 and the default theme

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

I'm using both a 5.5.6 and a 5.8.6 system and when I enter edit mode they add an edit class to the body element.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Well, this is my body tag when I edit a page:

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hmm. Well, since I don't have a system >= 5.8.18 then I can't quite say. Seems odd that they would remove that from 5.8.6 to 5.8.18. Maybe they put a clue somewhere else. What's on the html element in edit mode?

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

it is identical.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

0 votes

I'm trying to do something similar. Where in the Custom HTML section should it go and what should the entire code look like.

This is my "At end of the HEAD"

<div id="header">
<a href="/">Home</a>
<a href="http://someurl">People</a>
<a href="https://someurl">Internal Websites</a>
</div>
<script type="text/javascript">
AJS.bind('init.rte', function() {
AJS.$('#notifyWatchers').attr('checked', false);
});
</script>

I want to hide that header in edit mode.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Was this helpful?

Thanks!

Answers Developer Questions

Products

Community resources

Support

Top groups

Community resources

Support

Learn

Community resources

Support

Events

Community resources

Support

Get product advice from experts

Join a community group

Advance your career with learning paths

Earn badges and rewards

Connect and share ideas at events

Edit & Edit Preview custom CSS - Confluence 5.3