Active tab style

[isigma]

The background for the tab icon is left white on the active tab by mistake, so it looks like a white circle. Quick fix is nav.nav-tabs>li.active>a>span {background:none} Also when the color of the icon and the active background color on the tab is the same, naturally, the icon disappears. In case somebody uses matching colors like me the fix would be .nav.nav-tabs>li.active>a>span i { -webkit-filter: invert(100%);     filter: invert(100%); } See before and after. I'm not sure that the solution for the second issue is universal, but will you include the first one into the future shortcodes plugin? == Alternatively, if you use darker colors for active tabs, both the text and the icon can be set to white .nav.nav-tabs>li.active>a, .nav.nav-tabs>li.active>a>span i {color:white}  

[H.K. Latiyan]

Thanx for the information.

[Johnny Nassar]

can i know where to change the tabs style please in the theme ? I have the following issue in this link : http://www.enassar.com/academy/onlinelibrary/ the below is the code and yo u can check also online through the link I couldn't find the style "tabs-left" I tried a lot even using the custom css in the content but it didn't work also ! [tabs style="tabs-left" theme=""] [tab title="Communication" icon=""] BODY LANGUAGE TOOLKIT COMMUNICATION TOOLKIT GAMES & ICEBREAKERS TOOLKIT BODY LANGUAGE TOOLKIT COMMUNICATION TOOLKIT GAMES & ICEBREAKERS TOOLKIT [/tab] [/tabs]  

[isigma]

You add custom style in the theme's style.css file, or, if you're using a child theme, edit the same file in the child theme folder. Do not change tabs-left in the shortcode plugin folder. If your browser can inspect a page code, check the existing style parameters then substitute them in your style.css. Keep in mind two things: 1. Some theme styles use more specific class names (nested classes chain), so they have a priority over the general one, and you have to use the same specific nested style class chain to get power over the theme's ones. In your case you have to work not with .<span style="line-height: 1.5;">tabs-left</span> but with <span style="line-height: 1.5;">.content .tabs-left </span> .tabs-left .nav > li > a etc. 2. In some cases in order to overwrite the theme's code you have to enforce your's with !important, although do not use it unless you're sure that, say <em style="line-height: 1.5;"><span style="line-height: 1.5;"> .tabs-left </span><span style="line-height: 1.5;">is unique to tabs only. If you enforce your style I'd suggest to check how it changes the mobile style as well.</span> In your case the enforced style will be .tabs-left .nav > li > a {padding: 17px 24px !important} I hope it makes sense for you.

[Author]

Posts