Tagged: Color, hover text, styling, tabs
-
AuthorPosts
-
June 28, 2013 at 10:56 am #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
June 29, 2013 at 7:06 am #127155Please 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;
}July 4, 2013 at 9:21 am #127156Thanks, but I’ve added and customized the color code and no changes have taken effect.
July 5, 2013 at 6:51 am #127157Hi,
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
July 5, 2013 at 10:00 am #127158Hi, tried adding this. Unfortunately, it made no difference though.
July 8, 2013 at 2:09 am #127159Hi,
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
July 9, 2013 at 8:43 am #127160Problem solved, thanks guys!
-
AuthorPosts
- The topic ‘Change Tab Colors – Hover Text’ is closed to new replies.