Highlight colour for Group Tab Icons

[ppl]

We have been able to change the group icons, colours and text with your help. Thank you.

The last task on this list is to make them turn darker when selected. So I guess there must be 2 colours.

Thank you again.

Rob

[Radu]

Hi,

Just use this css

COPY CODE

#buddypress div#item-nav li.current.selected {
    background: red;
}

#buddypress div#item-nav li.current.selected a,#buddypress div#item-nav li.current.selected a:before {
    color:#fff !important;
}

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ppl]

Thank you that Radu,

Most of our icons are different colours but you code gave me the clues I needed. All worked great. Thank you!

The one item that seems to be missing is the icons are not changing when they get the focus (tool tipped). The colour only changes when they are selected. You help on this would be appreciated.

[Radu]

Hi,
Great,
I think you are referring to the focus state.

COPY CODE

.bp-overlay-menu.is-user-profile #buddypress div#item-nav ul li a:focus {background:red;}

Let me know
Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ppl]

Radu,

No luck with the focus state for the tab’s icon but I was able to change the colour of the text via the hover state. See below. Any additional thoughts for the changing the colour of the icon itself?

#buddypress div#item-nav ul #nav-forum-groups-li a:before { color: #dcf8ff; }
#buddypress div#item-nav ul #nav-forum-groups-li a:hover { color: #30ebff; }
#buddypress div#item-nav #nav-forum-groups-li.selected a,#buddypress div#item-nav #nav-forum-groups-li.selected a:before { color: #30ebff; }

[Radu]

Hi,

PLay with the next

COPY CODE

#buddypress div#item-nav ul li a::before { 
color:red;}

#buddypress div#item-nav ul li:hover a::before { 
color:green;}

#buddypress div#item-nav li.current.selected a::before {
color:yellow !important;
}

The first css rule changes the icon color.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ppl]

Radu,

Thank you but we have different colours for each icon so the hover colour needs to be icon specific.

was able to change the colour of the text via the hover state with the following. Any additional thoughts for the changing the colour of the icon itself in the hover state?

#buddypress div#item-nav ul #nav-forum-groups-li a:hover { color: #30ebff; }

Thanks

Rob

[Radu]

This it’s the rule

#buddypress div#item-nav ul li:hover a::before { color:green;}

Or try with important

#buddypress div#item-nav ul li:hover a::before { color:green !important;}

For coloring the only hover icon use the above.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts