-
Author
-
November 23, 2018 at 14:52 #213997
ppl
ParticipantWe 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 #214023Radu
ModeratorHi,
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 #214042ppl
ParticipantThank 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 #214171Radu
ModeratorHi,
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 #214507ppl
ParticipantRadu,
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 #214546Radu
ModeratorHi,
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 #214592ppl
ParticipantRadu,
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 #214636Radu
ModeratorThis 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.