YUI Library Home

YUI Library Examples: TabView Control: Skinning TabView

TabView Control: Skinning TabView

This demonstrates how to customize the TabView skin.

Tab One Content

Tab Two Content

Tab Three Content

Customizing TabView Skin

Skinning the YUI TabView widget is done using CSS.

The stylesheet used for other TabView examples is a minified version of the tabview-core.css and tabview-skin.css files. In order to customize the TabView skin, we recommend using the raw source files as a reference.

The tabview-core.css file includes foundational styling that controls tab orientation and basic layout, including margin between tabs and padding inside of tabs. Overriding these allows you to customize TabView for your own needs. We recommend overriding these in a separate file to simplify integrating with YUI updates.

This snippet from tabview-core.css shows the selectors and style properties you will need to override in order to customize tab spacing and padding:

1/* default space between tabs */ 
2.yui-navset .yui-nav li, 
3.yui-navset .yui-navset-top .yui-nav li, 
4.yui-navset .yui-navset-bottom .yui-nav li { 
5    margin:0 0.5em 0 0/* horizontal tabs */ 
6} 
7.yui-navset-left .yui-nav li, 
8.yui-navset-right .yui-nav li { 
9    margin:0 0 0.5em/* vertical tabs */ 
10} 
11 
12/* default width for side tabs */ 
13.yui-navset .yui-navset-left .yui-nav, 
14.yui-navset .yui-navset-right .yui-nav, 
15.yui-navset-left .yui-nav, 
16.yui-navset-right .yui-nav { width:6em} 
17 
18.yui-navset-top .yui-nav, 
19.yui-navset-bottom .yui-nav { 
20    width:auto
21} 
22.yui-navset .yui-navset-left
23.yui-navset-left { padding:0 0 0 6em} /* map to nav width */ 
24.yui-navset-right { padding:0 6em 0 0} /* ditto */ 
view plain | print | ?

The tabview-skin.css file builds upon the tabview-core.css file, adding borders, color information and other skin specific styling. This snippet includes all of the styling applied to the default TabView orientation ("top"):

1<style type="text/css"
2 
3/* .yui-navset defaults to .yui-navset-top */ 
4.yui-skin-sam .yui-navset .yui-nav, 
5.yui-skin-sam .yui-navset .yui-navset-top .yui-nav { /* protect nested tabviews from other orientations */ 
6    border:solid #2647a0/* color between tab list and content */ 
7    border-width:0 0 5px
8    Xposition:relative
9    zoom:1
10} 
11 
12.yui-skin-sam .yui-navset .yui-nav li, 
13.yui-skin-sam .yui-navset .yui-navset-top .yui-nav li { 
14    margin:0 0.16em 0 0/* space between tabs */ 
15    padding:1px 0 0/* gecko: make room for overflow */ 
16    zoom:1
17} 
18 
19.yui-skin-sam .yui-navset .yui-nav .selected, 
20.yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected {  
21    margin:0 0.16em -1px 0/* for overlap */ 
22} 
23 
24.yui-skin-sam .yui-navset .yui-nav a, 
25.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a { 
26    background:#d8d8d8 url(../../../../assets/skins/sam/sprite.png) repeat-x/* tab background */ 
27    border:solid #a3a3a3
28    border-width:0 1px
29    color:#000
30    text-decoration:none
31} 
32 
33.yui-skin-sam .yui-navset .yui-nav a em, 
34.yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em { 
35    border:solid #a3a3a3
36    border-width:1px 0 0
37    cursor:hand; 
38    padding:0.25em .75em
39    left:0right0bottom0/* protect from other orientations */ 
40    top:-1px/* for 1px rounded corners */ 
41    position:relative
42} 
43 
44.yui-skin-sam .yui-navset .yui-nav .selected a, 
45.yui-skin-sam .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ 
46.yui-skin-sam .yui-navset .yui-nav .selected a:hover { /* no hover effect for selected */ 
47    background:#2647a0 url(../../../../assets/skins/sam/sprite.png) repeat-x left -1400px/* selected tab background */ 
48    color:#fff; 
49} 
50 
51.yui-skin-sam .yui-navset .yui-nav a:hover, 
52.yui-skin-sam .yui-navset .yui-nav a:focus { 
53    background:#bfdaff url(../../../../assets/skins/sam/sprite.png) repeat-x left -1300px/* selected tab background */ 
54    outline:0
55} 
56
57.yui-skin-sam .yui-navset .yui-nav .selected a em { 
58    padding:0.35em 0.75em/* raise selected tab */ 
59} 
60 
61.yui-skin-sam .yui-navset .yui-nav .selected a, 
62.yui-skin-sam .yui-navset .yui-nav .selected a em { 
63    border-color:#243356/* selected tab border color */ 
64} 
65
66.yui-skin-sam .yui-navset .yui-content { 
67    background:#edf5ff; /* content background color */ 
68} 
69 
70.yui-skin-sam .yui-navset .yui-content, 
71.yui-skin-sam .yui-navset .yui-navset-top .yui-content { 
72    border:1px solid #808080/* content border */ 
73    border-top-color:#243356/* different border color */ 
74    padding:0.25em 0.5em/* content padding */ 
75} 
76 
77</style> 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Logger Output:

Logger Console

INFO 196ms (+181) 1:46:52 AM:

LogReader instance0

LogReader initialized

INFO 15ms (+1) 1:46:52 AM:

example

The example has finished loading; as you interact with it, you'll see log messages appearing here.

INFO 14ms (+1) 1:46:52 AM:

Tab

attributes initialized

INFO 13ms (+1) 1:46:52 AM:

Tab

attributes initialized

INFO 12ms (+0) 1:46:52 AM:

Tab

attributes initialized

INFO 12ms (+12) 1:46:52 AM:

TabView

attributes initialized

INFO 0ms (+0) 1:46:52 AM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More TabView Control Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings