Page 1 of 1
Tabview Styling for Unselected Tabs
Posted: 22 Nov 2015, 01:00
by GatorTim
In the Volt theme, the inactive tabs have no border and the same background color as the tab header area. This means that the only reason that you can tell that there is something to click on is because of the tab's title. I would like to restyle this to change the inactive tabs to at least have a different background color and possibly a border. However, it doesnt appear as if the inactive tabs have a css class that I can override. Is there a way to modify the color of the inactive tabs? If so, how?
Thanks!
Tim
Re: Tabview Styling for Unselected Tabs
Posted: 24 Nov 2015, 10:41
by mert.sincan
Please try with;
Code: Select all
<style type="text/css">
.ui-tabs .ui-tabs-nav li {
background-color: red;
border: 1px solid #ffffff !important;
}
.ui-tabs.ui-tabs-top .ui-tabs-nav li {
border-bottom-color: transparent !important;
}
.ui-tabs.ui-tabs-bottom .ui-tabs-nav li {
border-top-color: transparent !important;
}
.ui-tabs.ui-tabs-left .ui-tabs-nav li {
border-right-color: transparent !important;
}
.ui-tabs.ui-tabs-right .ui-tabs-nav li {
border-left-color: transparent !important;
}
</style>
Re: Tabview Styling for Unselected Tabs
Posted: 24 Nov 2015, 15:03
by GatorTim
This works perfectly! Thanks!
Re: Tabview Styling for Unselected Tabs
Posted: 24 Nov 2015, 16:19
by mert.sincan
Glad to hear, thanks;)