Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #25487

    Hi,

    I posted a topic previously which was resolved, but I need additional help on the same matter. The original issue was that we wanted to customize the backround and icon colours of both active and inactive tabs. The following code was given to enter into Quick CSS and the problem was solved:

    For Active Tab:

    div .main_color .tabcontainer .active_tab {
    background-color: #333;
    color: #666666;
    }

    div .main_color .tabcontainer .active_tab .tab_icon {
    color: #666666;
    }

    For Inactive Tabs:

    .main_color .tabcontainer .tab {
    color: #919191;
    background-color: #333;
    }

    div .main_color .tabcontainer .tab_icon {
    color: #666666;
    }

    With the color values obviously being customizable.

    However, with our color scheme, the color of the text when hovering over it with a mouse is almost impossible to see, for both inactive and active tabs. I’ve tried changing the default color settings in the Enfold>Styling panel for hover colors, but it’s not making a difference. So that makes me think that the perhaps the styling of the tabs is separate to the settings defined in the styling panel? Is there a CSS code I can add to the above to help with this or am I perhaps changing the wrong style settings in the Styling panel?

    Thanks,

    Lea

    #127155

    Please use following css code to change the hover color

    div .main_color .tabcontainer .active_tab:hover, div .main_color .tabcontainer .active_tab a:hover {
    color: #666666;
    }
    div .main_color .tabcontainer .active_tab .tab_icon:hover, div .main_color .tabcontainer .active_tab .tab_icon a:hover {
    color: #666666;
    }

    #127156

    Thanks, but I’ve added and customized the color code and no changes have taken effect.

    #127157

    Hi,

    Can you give us a link to the website with the tabs?

    Try this

    div .main_color .tabcontainer .active_tab:hover, div .main_color .tabcontainer .active_tab a:hover {
    color: red !important;
    }
    div .main_color .tabcontainer .active_tab .tab_icon:hover, div .main_color .tabcontainer .active_tab .tab_icon a:hover {
    color: red !important;
    }

    Change the color value.

    Regards,

    Ismael

    #127158

    Hi, tried adding this. Unfortunately, it made no difference though.

    #127159

    Hi,

    Try this

    .tab_titles .tab:hover {
    color: green !important;
    }
    .main_color .tabcontainer .active_tab:hover{
    color: blue !important;
    }

    Blue is active hover, and green is not active hover

    Thanks,

    Nick

    #127160

    Problem solved, thanks guys!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change Tab Colors – Hover Text’ is closed to new replies.