It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Sidebar HOVER color for a Space

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>.

Screen Shot 2020-03-25 at 11.09.41 AM.jpg

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

 

1 answer

1 accepted

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.

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.

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.

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Posted in Confluence

What project did you transition or start on Confluence with the shift to remote work?

It’s been great to hear from fellow users over the last few weeks about the best tips and fun moments you’ve had working on Confluence since the transition to working remote. I’d love to keep the c...

353 views 11 11
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you