-
Author
-
November 23, 2018 at 14:52 #213997pplParticipant
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
November 23, 2018 at 17:30 #214023RaduModeratorHi,
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
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionNovember 24, 2018 at 14:02 #214042pplParticipantThank 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.
November 26, 2018 at 17:47 #214171RaduModeratorHi,
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
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionNovember 30, 2018 at 16:07 #214507pplParticipantRadu,
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; }November 30, 2018 at 21:06 #214546RaduModeratorHi,
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
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionDecember 2, 2018 at 02:13 #214592pplParticipantRadu,
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
December 3, 2018 at 12:27 #214636RaduModeratorThis 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
RHi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution -
AuthorPosts
The forum ‘General questions’ is closed to new topics and replies.