This demonstrates how to customize the 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:
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"):
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.