YUI Library Examples: TabView Control: Skinning TabView

Customizing TabView Skin

Skinning the YUI TabView widget is done using CSS.

To demonstrate how to customize the default TabView skin, first we'll include the TabView core CSS and TabView skin files, as well as the other TabView dependencies:

Using the skin css file as a reference, we then override the appropriate styles for our custom skin:

.yui-sam-skin .yui-navset .yui-nav em,
.yui-sam-skin ,yui-navset .yui-content {
    color:#fff; /* text color */
}

.yui-sam-skin .yui-navset .yui-nav a, 
.yui-sam-skin .yui-navset .yui-nav a em {
    background:#000; /* tab background */
    border-color:#424242; /* tab border color */
}

.yui-sam-skin .yui-navset .yui-nav .selected a,
.yui-sam-skin .yui-navset .yui-nav .selected a em,
.yui-sam-skin .yui-navset .yui-nav a:focus,
.yui-sam-skin .yui-navset .yui-nav a:focus em,
.yui-sam-skin .yui-navset .yui-nav a:hover,
.yui-sam-skin .yui-navset .yui-nav a:hover em {
    background:#044977; /* selected tab background color */
    border-color:#316d97; /* selected tab border color */
}

.yui-sam-skin .yui-navset .yui-nav {
    border-bottom-color: #316d97; /* tab list bottom border */
}

.yui-sam-skin .yui-navset .yui-content {
    background:#20272d; /* content background color */
    border-top:5px solid #044977; /* color between tab list and content */
}

.yui-sam-skin .yui-navset .yui-content div {
    border-color:#316d97 #424242 #424242; /* content border */
}
</style>

Next we will create a <div> called demo and include the TabView markup:

All that is left is to create an instance of TabView from our demo element:

This is a simple example of how to extend the TabView skin.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

TabView Control Examples:

More TabView Control Resources:

User's Guide (external)
API Documentation
Cheat Sheet (external; pdf)