Style "also being edited by" Confluence message with CSS

I'm a space admin (but not implementation admin) for a Confluence 5.6.3 wiki with the Documentation theme and we've had some issues with users losing edits because multiple people were working on a page at the same time.  I want to style the warning message to be more obtrusive (and more magenta).  I've come up with the following CSS and I want to be confident that it will only effect the message I'm concerned with, and not other elements on the wiki.
.aui-message.closeable

{ font-size:18pt; background-color: #C71585; color: #F5FFFA; }

I've read https://docs.atlassian.com/aui/5.4.0/docs/messages.html and I'm concerned that there might be other closeable message elements on the wiki that will be negatively impacted by this styling.  I've seen some Stack Exchange articles about applying CSS to messages that contain specific strings (in this case, the "also being edited by"), but those solutions were using jquery, which is beyond me right now.  Is there a better way to go about styling this wiki element?  Is there a way to find out if .aui-message.closeable is called elsewhere in the wiki UI?

Thank you!

1 answer

1 accepted

2 votes
Accepted answer
Davin Studer Community Champion Jan 30, 2015

Try this instead. This will only target ".aui-message.closeable" blocks that are in the "#heartbeat-div" block ... which is where that message shows up.

#heartbeat-div .aui-message.closeable {
	font-size: 18pt;
	background-color: #C71585;
	color: #F5FFFA;
}

Davin, thank you! If I continue to nest the blocks to include "#editor-messages #heartbeat-div .aui-message.closeable", will that continue to make it more specific? I can see the heartbeat-div block in firebug, now that you mention it, but I'm not familiar enough with HTML or CSS to know if that block is found elsewhere on the wiki (do wikis have souls as well as heartbeats?). When I include the editor-messages block, I can guess that this block will only be found on pages where the text editor is being displayed. Would you feel confident applying this to your own wiki space? I'm just looking to avoid scaring some poor user with the magenta panel of doom, except when use of the panel is warranted.

Davin Studer Community Champion Jan 30, 2015

Yes, by adding "#editor-messages" it will be more specific. I think the one I gave if probably sufficient, but if you want to be really sure then by-all-means add in "#editor-messages" to the chain to make it more specific.

Steven Behnke Community Champion Jan 30, 2015

Good answer Davin, as usual. @Colin Van Alstine, you may find this read useful: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,110 views 17 14
Join discussion

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