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

This widget could not be displayed.
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 Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

251 views 2 4
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