Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal

Recognition

  • Give kudos
  • Received
  • Given

Leaderboard

  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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 do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

323 views 23 8
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