I've learned how to style the sidebar for a Space and found some good tidbits here.
I can't figure out how to change the "hover" color and background color.
For example, when I hover over Space Shortcuts or the links above it, I see the elements on the page look like '.acs-nav-item' which is an <li> and '.acs-nav-item-link' which is the <a>.
How can I specify the css for these items to change both color and background-color?
I've tried to determine this one and can't figure it out :-)
Hi Darin,
In the space stylesheet, you can override the :hover pseudo-selector for the class:
.acs-nav-item-link:hover {
....
}
You also want to ensure that your style is as specific as possible, otherwise use the !important declaration (eg. background-color: red !important;)
In my space, the navigation looks like:
<li class="acs-nav-item pinned_page">
<a class="acs-nav-item-link tipsy-enabled" href="/display/TEST/My+Page?src=spaceshortcut" data-collapsed-tooltip="null">
<span class="icon"></span>
<span class="acs-nav-item-label">My Page</span>
</a>
</li>
so I added the following in my space stylesheet:
/* target both style classes to be as specific as possible */
a.acs-nav-item-link.tipsy-enabled:hover {
background-color: coral;
}
/* label color is controlled by the label class of the span attribute */
a.acs-nav-item-link.tipsy-enabled:hover > span.acs-nav-item-label {
color: white;
}
Thank you @Gareth Cantrell , I tried:
.acs-nav-item-link:hover {color:green;background-color:red;}
just to test it out, but it did not seem to work.
I should have mentioned, this is for Confluence Server v6.8.2. Seems like what I want, but I still get the same hover color as the screenshot.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I have updated the original answer with a more complete example.
Your style needs to be as specific as possible (search CSS Specificity), otherwise you can append the !important declaration to your style attributes.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Thank you so much @Gareth Cantrell !!
That certainly solved it for me ;-)
I'm not a CSS expert, but I learn as I go, and as I inspect the page and see the classes and id's of elements, I try to decipher how to properly specify what I'm out to achieve.
This was certainly helpful and thank you for the link about 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.