Sidebar HOVER color for a Space

[Darin Hafer]

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 :-) 

[Gareth Cantrell · Accepted solution]

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

[Darin Hafer]

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.

[Gareth Cantrell]

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.

[Darin Hafer]

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.