I feel you should begin by looking at the structure of the tab HTML
to truly understand how it works. If you are curious about the other
HTML structure, check out Firebug. The power of Firebug is truly amazing; this is a sample screenshot but doesn't even come close to paying Firebug justice:
[If anyone from the Microsoft IE team is listening; PLEASE give us this power in IE7 or IE8, the Internet Explorer Developer Toolbar is ok, but it just feels crippled next to Firebug and "Firebug Lite" doesn't fill any of the real gap.]
Let's take a closer look at the tab structure:
|
01 <span id="..." class="ajax__tab_active">
02 <span class="ajax__tab_outer">
03 <span class="ajax__tab_inner">
04 <span id="..." class="ajax__tab_tab">Tab 1</span>
05 </span>
06 </span>
07 </span>
|
As you can see, a tab is constructed of nested <span> tags. The class ajax__tab_outer defines the right side of the tab, the class ajax__tab_inner defines the left side of the tab, and finally ajax__tab_tab defines the middle of the tab as this image shows:
Now that we understand the tab structure, let's work on some styles.
In this example, we'll clone the tab styles of Internet Explorer 7
(IE7) under Windows XP. The easiest way to create new styles is to copy
that of the ajax__tab_xp which is the default style that you typically see. Browsing the source of the Tab control (which you can download from Codeplex), navigate to the AjaxControlToolkit\Tabs folder and open up Tabs.css. You will find a section called xp theme;
this is what we are copying. Looking at the CSS you'll see that the
effects for the tab are created using images and for the IE7 style, we
will do the same. So in copying the XP style, we create the following
images:
- tab-line.gif – Used to underline the header
- tab-right – The right side of the inactive tab
- tab-left – The left side (outer) of the inactive tab
- tab – The inner portion (tab) of the inactive tab
- tab-right-hover – The right side of the hover tab
- tab-left-hover – The left side (outer) of the hover tab
- tab-hover – The inner portion (tab) of the hover tab
- tab-right-active – The right side of the active tab
- tab-left-active – The left side (outer) of the active tab
- tab-active – The inner portion (tab) of the active tab
…and finally create the styles (I have separated the background
declarations from the other styles just for simplicity of listing and
discussions)
First the backgrounds; this is a carbon copy of the ajax__tab_xp with just our new images replacing the embedded ones.
|
/* IE theme – Backgrounds */
.visoft__tab_xpie7 .ajax__tab_header {
background:url(tab-line.gif) repeat-x bottom;
}
.visoft__tab_xpie7 .ajax__tab_outer {
background:url(tab-right.gif) no-repeat right;
}
.visoft__tab_xpie7 .ajax__tab_inner {
background:url(tab-left.gif) no-repeat;
}
.visoft__tab_xpie7 .ajax__tab_tab {
background:url(tab.gif) repeat-x;
}
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer {
background:url(tab-hover-right.gif) no-repeat right;
}
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner {
background:url(tab-hover-left.gif) no-repeat;
}
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab {
background:url(tab-hover.gif) repeat-x;
}
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer {
background:url(tab-active-right.gif) no-repeat right;
}
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner {
background:url(tab-active-left.gif) no-repeat;
}
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab {
background:url(tab-active.gif) repeat-x;
}
|
Finally, the rest of the styles which we'll change a bit from the ajax__tab_xp styles:
|
.visoft__tab_xpie7 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:11px;
}
.visoft__tab_xpie7 .ajax__tab_outer {
height:29px;
}
.visoft__tab_xpie7 .ajax__tab_inner {
padding-left:3px;
}
.visoft__tab_xpie7 .ajax__tab_tab {
padding:8px 40px;
margin:0;
}
.visoft__tab_xpie7 .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
|
Most of the styles are arbitrary (and most are copies from the ajax__tab_xp styles), but the two import styles that effect the tab are the height and padding,
underlined in the sample above. The height matches that of the tab
images while the padding increases the width and centers the text
vertically and horizontally. You could set different left and right
paddings to change the text alignment, but in this example we have it
centered.
The last thing we need to do is to add the custom CssClass to the Tab Container:
<ajaxcontroltoolkit:tabcontainer id="tabContainer" runat="server" height="300" cssclass="visoft__tab_xpie7">
Finally, everything in place; we get the following tab style:
The three styles are represented in the image: tab, active, and
hover. Not a bad reproduction from the original. Obviously, we don't
have an image in the header in this example, but this can always be
added using the <headertemplate> of the Tab Panel. You can also go a bit farther with the replication and add the thin bar that is below the tabs.
If you'd like, you can download the files for this sample: Full Solution | CSS and Images Only
