Tabview Styling for Unselected Tabs

Locked
GatorTim
Posts: 2
Joined: 22 Aug 2015, 23:50

22 Nov 2015, 01:00

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
PrimeFaces 5.3, Mojarra 2.3.0, Tomcat 8.0.26

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

24 Nov 2015, 10:41

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>

GatorTim
Posts: 2
Joined: 22 Aug 2015, 23:50

24 Nov 2015, 15:03

This works perfectly! Thanks!
PrimeFaces 5.3, Mojarra 2.3.0, Tomcat 8.0.26

User avatar
aragorn
Posts: 3641
Joined: 29 Jun 2013, 12:38

24 Nov 2015, 16:19

Glad to hear, thanks;)

Locked

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest