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!
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Good answer Davin, as usual. @Colin Van Alstine, you may find this read useful: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.