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; } } }

Style "also being edited by" Confluence message with CSS

Colin Van Alstine

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!

Accepted answers

Davin Studer

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;
}

All comments

Davin Studer

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;
}

Colin Van Alstine

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

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 F Behnke

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

Welcome!

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

Quick Links

Find more posts tagged with

confluence

css