This topic has 7 replies, 2 voices, and was last updated 5 years by Radu.

  • Author
  • #213997
     ppl
    Participant

    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

    #214023
     Radu
    Moderator

    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
    #214042
     ppl
    Participant

    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.

    #214171
     Radu
    Moderator

    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
    #214507
     ppl
    Participant

    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; }

    #214546
     Radu
    Moderator

    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
    #214592
     ppl
    Participant

    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

    #214636
     Radu
    Moderator

    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
Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?