Blog news and more:

Sat 18, october 2008

Change the YUI Tabview layout by Danilo Bonardi

As the previous article on YUI dialogs, I come back on on YUI Framework components customizzation to write about tabView.

The tabView is a very useful component to save page space and organize informations in a usable way. As dialogs, I describe how to re-define YUI CSS classes to customize tabview layout.

There are several way to use the tabview component, in this article I'm using the markup tabview used in this example on the official YUI guide.

    <script type="text/javascript">
       YAHOO.util.Event.onDOMReady(demoDialog);
    </script>
    <a href="javascript:null(0)" id="showDemoDialog"></a>

    <div id="demoDialog" class="demoDialog" >
	    <div class="hd">Welcome!</div>
	    <div class="bd">
            <h3>Welcome</h3>
	    </div>
       	<div class="ft">
            <b>by Shiny Frog</b>
        </div>
    </div>

In the first step I delete every thing that YUI add to the tabview layout, I'm doing this to obtain clean tabs. The last 2 classes are needed to manage the blue line between tabs selectors and content, this line is the bottom border of the div that cointain all the tabs selectors. Tha management of selected tab is done while CSS Class “selected”

.yui-skin-sam .yui-navset .yui-content { 
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus,
.yui-skin-sam .yui-navset .yui-nav .selected a:hover {
    background-image: none;
    background-color: transparent;
}

.yui-skin-sam .yui-navset .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-nav {
    border-color: transparent;
}

Starting with this base is really simple to decorate the tabview, Here you can find the working example.

.yui-skin-sam .yui-navset .yui-content { 
    background-image: none;
    background-color: #c2d6f3;
    font-style: italic;
    font-variant: small-caps;
}

.yui-skin-sam .yui-navset .yui-nav a,
.yui-skin-sam .yui-navset .yui-nav a:hover,
.yui-skin-sam .yui-navset .yui-nav a:focus {
    background-color: transparent;
    background: url("images/tab.png");
}

.yui-skin-sam .yui-navset .yui-nav .selected a,
.yui-skin-sam .yui-navset .yui-nav .selected a:focus,
.yui-skin-sam .yui-navset .yui-nav .selected a:hover {
    background-color: transparent;
    background: url("images/seltab.png");
}

.yui-skin-sam .yui-navset .yui-navset .yui-nav,
.yui-skin-sam .yui-navset .yui-nav {
    border-color: #162944;
}

Share Your Thoughts

Comments rules:

If possible please stick to English language
We support Gravatar, go for it!
Use BBCode for formatting: [b], [u], [s]
Use [i] for quoting
Use [link www.site.com] site [/link] for links
Use [google] or [wiki] for referencies
HTML code is not allowed in comments

Blog news and more:

Change the YUI Tabview layout by Danilo Bonardi

Comments rules:

Archives: