Yahoo UI Tabs CSS

Yahoo UI (or YUI) is a javascript framework which is used by Wikidot to make creation of tabs much easier. More information is at http://developer.yahoo.com/yui/examples/tabview/skinning.html

You cannot alter the way the Yahoo UI framework for tabs actually works on Wikidot but then you don't need to. What you can do is to alter the look of the tabs by changing the CSS.

Default YUI Tabs CSS

The Wikidot base CSS contains the Yahoo UI tabs CSS as shown below.


The default tabs

With the Yahoo CSS the tabs look like this:

defaulttabs.png

The most common changes

As with any CSS on Wikidot you only need to add to your custom CSS the rules and properties which you want to change, everything that you don't change will cascade down from the default CSS.

The most common changes from the default that a site developer will want to make are likely to be:

background of tabs
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
background-color: xxx;
}

the background color and text color of the selected tab
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
background-color:xxx;
color: xxx;
}

the background color when you hover over a tab
.yui-navset .yui-nav li a em:hover, .yui-navset-top .yui-nav li a em:hover, .yui-navset-bottom .yui-nav li a em:hover {
background-color: xxx;
}

the border between the tabs and content

.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
border-bottom: xxx;
}

content text color
.yui-navset .yui-content p {
color: xxx;
}

content background and border color
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
background-color: xxx;
border: xxx;
}

Custom CSS

So, using all the rules for the most common changes we listed above, we will change the look of the tabs:

@import url(http://vineyard.wikidot.com/dark:css/code/1);
 
/*===background color of tabs===*/
.yui-navset .yui-nav li a em, .yui-navset-top .yui-nav li a em, .yui-navset-bottom .yui-nav li a em {
    background-color: #93bf96;
}
 
/*===the background color of the selected tab===*/
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a em {
    background-color:gold;
    color: #000;
}
 
/*===the background color when you hover over a tab===*/
.yui-navset .yui-nav li a em:hover, .yui-navset-top .yui-nav li a em:hover, .yui-navset-bottom .yui-nav li a em:hover {
    background-color: #f7f7fe;
}
 
/*===the border between the tabs and content===*/
.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
  border-bottom: 10px solid #74baac;
}
 
/*===content text color===*/
.yui-navset .yui-content p {
    color: #888888;
}
 
/*===content background and border color===*/
.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    background-color:#efefef;
    border: 1px solid #468259;
}

The Result

Quousque tandem abutere, Catilina, patientia nostra? quamdiu etiam furor iste tuus nos eludet? quem ad finem sese effrenata jactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt? Patere tua consilia non sentis, constrictam jam horum omnium scientia teneri conjurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris?

Site Design, Syntax and Examples by Rob Elliott 2008-2016