After working on a YUI TabView theme for the AjaxControlToolkit’s TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web. I was especially curious in seeing what it would take to include images in each of the tab panel header’s.

Below are the controls I was targeting, where on the Internet I found them, and a short description of what it took to create the corresponding theme. If you are not familiar with how theming the TabContainer works, I recommend reading the

Notes:

1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to ‘ajax__tab_technorati-theme’.
2. Make sure you copy the images to your machine and update the path’s in the stylesheet if you change the path. The images for this theme can be found in the download in the img/technorati directory
3. I tested in both IE7 and FF and did not encounter any issues

Windows Live Gallery Tab Theme

I do not particularly care for the Windows Live Gallery style tab, but I thought it might make for an interesting example because the tab headers all contain images. I thought this might be a difficult scenario to support, but because the TabContainer allows for defining a template to use for the tab headers, it was no problem at all.

Here is the sample markup for the ‘Sidebar gadget’ tab panel. Notice, the HeaderTemplate provides us with the flexibility of defining the image and header text that should be used for the ‘Sidebar gadgets’ tab.

<ajaxtoolkit :TabPanel runat="server">
    <headertemplate>
        <div>
            <img src="img/msngallery/sidebar.png"/>
            <div>Sidebar gadgets</div>
        </div>
    </headertemplate>
    <contenttemplate>
    </contenttemplate>
</ajaxtoolkit>

YUI Tab Theme

I blogged about the YUI theme before, but incase you missed it I figured I would mention it again here.

Notes:

1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to ‘ajax__tab_yuitabview-theme’.
2. Make sure you copy the images to your machine and update the path’s in the stylesheet if you change the path. The images for this theme can be found in the download in the img/yui directory
3. I tested in both IE7, IE6 and FF and did not encounter any issues.

Windows Internet Explorer Tab Theme

The last theme I created is based on the tab control that can be found on the Windows Internet Explorer home page.

Notes:

1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to ‘ajax__tab_ie-theme’.
2. Make sure you copy the images to your machine and update the path’s in the stylesheet if you change the path. The images for this theme can be found in the download in the img/ie directory
3. I tested in both IE7 and FF. There appears to be a small issue with the alignment of the first tab in FF. I am working on resolving this.
Notes:

1. To use this theme, include a link to the CSS file and set the CssClass of the TabContainer control to ‘ajax__tab_msngallery-theme’.
2. Make sure you copy the images to your machine and update the path’s in the stylesheet if you change the path. The images for this theme can be found in the download in the img/msngallery directory
3. I tested in both IE7 and FF and did not encounter any issues

CSS Stylesheet:

body
{
    font-family:verdana,tahoma,helvetica;
}

/* ajax__tab_xp-theme theme */
.ajax__tab_xp-theme .ajax__tab_header
{
    font-family:verdana,tahoma,helvetica;
    font-size:11px;
    background:url(img/xp/tab-line.gif) repeat-x bottom;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_outer
{
    padding-right:4px;
    background:url(img/xp/tab-right.gif) no-repeat right;
    height:21px;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_inner
{
    padding-left:3px;
    background:url(img/xp/tab-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_header .ajax__tab_tab
{
    height:13px;
    padding:4px;
    margin:0;
    background:url(img/xp/tab.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_outer
{
    background:url(img/xp/tab-hover-right.gif) no-repeat right;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_inner
{
    background:url(img/xp/tab-hover-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_hover .ajax__tab_tab
{
    background:url(img/xp/tab-hover.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_outer
{
    background:url(img/xp/tab-active-right.gif) no-repeat right;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_inner
{
    background:url(img/xp/tab-active-left.gif) no-repeat;
}
.ajax__tab_xp-theme .ajax__tab_active .ajax__tab_tab
{
    background:url(img/xp/tab-active.gif) repeat-x;
}
.ajax__tab_xp-theme .ajax__tab_body
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    border:1px solid #999999;
    border-top:0;
    padding:8px;
    background-color:#ffffff;
}

/* ajax__tab_yuitabview-theme theme (img/yui/sprite.png) */
.ajax__tab_yuitabview-theme .ajax__tab_header
{
    font-family:arial,helvetica,clean,sans-serif;
    font-size:small;
    border-bottom:solid 5px #2647a0;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_outer
{
    background:url(img/yui/sprite.png) #d8d8d8 repeat-x;
    margin:0px 0.16em 0px 0px;
    padding:1px 0px 1px 0px;
    vertical-align:bottom;
    border:solid 1px #a3a3a3;
    border-bottom-width:0px;
}
.ajax__tab_yuitabview-theme .ajax__tab_header .ajax__tab_tab
{
    color:#000;
    padding:0.35em 0.75em;
    margin-right:0.01em;
}
.ajax__tab_yuitabview-theme .ajax__tab_hover .ajax__tab_outer
{
    background: url(img/yui/sprite.png) #bfdaff repeat-x left -1300px;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_tab
{
    color:#fff;
}
.ajax__tab_yuitabview-theme .ajax__tab_active .ajax__tab_outer
{
    background:url(img/yui/sprite.png) #2647a0 repeat-x left -1400px;
}
.ajax__tab_yuitabview-theme .ajax__tab_body
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    padding:0.25em 0.5em;
    background-color:#edf5ff;
    border:solid 1px #808080;
    border-top-width:0px;
}

/* ajax__tab_technorati-theme theme */
.ajax__tab_technorati-theme .ajax__tab_header
{
    font-family:"Helvetica Neue", Arial, Sans-Serif;
    background:url(img/technorati/tab-line.png) repeat-x bottom;
    font-size:12px;
    display:block;
}
.ajax__tab_technorati-theme .ajax__tab_header .ajax__tab_outer
{
    background:url(img/technorati/tab.png) no-repeat left top;
    border-color:#222;
    color:#222;
    padding-left:10px;
    margin-right:3px;
}
.ajax__tab_technorati-theme .ajax__tab_header .ajax__tab_inner
{
    background:url(img/technorati/tab.png) no-repeat right top;
    border-color:#666;
    color:#666;
    padding:3px 10px 2px 0px;
}
.ajax__tab_technorati-theme .ajax__tab_hover .ajax__tab_inner
{
    color:#000000;
}
.ajax__tab_technorati-theme .ajax__tab_active .ajax__tab_outer
{
    background:url(img/technorati/tab.png) no-repeat 0pt -40px;
    border-bottom-color:#ffffff;
}
.ajax__tab_technorati-theme .ajax__tab_active .ajax__tab_inner
{
    background:url(img/technorati/tab.png) no-repeat right -40px;
    color:#000000;
    border-color:#333
}
.ajax__tab_technorati-theme .ajax__tab_body
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    padding:8px;
    background-color:#ffffff;
    border:solid 1px #d7d7d7;
    border-top-width:0;
}

/* ajax__tab_msngallery-theme theme */
.ajax__tab_msngallery-theme .ajax__tab_header
{
    background:url(img/msngallery/tab-line.png) repeat-x bottom;
    font-size:12px;
    display:block;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_outer
{
    border:solid 1px #D7DCE1;
    padding:1px 1px 0px 1px;
    border-bottom:solid 2px #A8D4D9;
    background-color:#edf2fb;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab
{
    padding:6px 10px 6px 10px;
    color:#444444;
    width:117px;
    display:block;
    text-align:center;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab img
{
    height:24px;
    width:24px;
}
.ajax__tab_msngallery-theme .ajax__tab_header .ajax__tab_tab div
{
    font-family:Verdana, Arial, Sans-Serif;
    font-weight:bold;
    white-space:nowrap;
    line-height:145%;
    font-size:92%;
}
.ajax__tab_msngallery-theme .ajax__tab_active .ajax__tab_outer
{
    padding:0px 0px 0px 0px;
    border:solid 2px #A8D4D9;
    border-bottom-color:#ffffff;
    background-color:#ffffff;
}
.ajax__tab_msngallery-theme .ajax__tab_body
{
    font-family:verdana,tahoma,helvetica;
    font-size:10pt;
    padding:8px;
    background-color:#ffffff;
    border:solid 2px #A8D4D9;
    border-top-width:0;
}

/* ajax__tab_ie-theme theme */
.ajax__tab_ie-theme .ajax__tab_header
{
    padding-left:5px;
}
.ajax__tab_ie-theme .ajax__tab_header .ajax__tab_tab
{
    margin-right:0px;
    background:url(img/ie/tab_unselected.gif);
    width:116px;
    padding:9px 0px 3px 0px;
    text-align:center;
    color:#006699;
    font-family:verdana;
    font-size:13px;
    display:block;
}
.ajax__tab_ie-theme .ajax__tab_active .ajax__tab_tab
{
    padding:6px 0px 3px 0px;
    background:url(img/ie/tab_selected.gif);
}
.ajax__tab_ie-theme .ajax__tab_body
{
    background:url(img/ie/ie_tabbacker_720x296.jpg) no-repeat;
    font-size:13px;
    font-family:verdana;
    height:296px;
    width:716px;
}
.ajax__tab_ie-theme .ajax__tab_body div
{
     padding:8px;
}

Demo: http://mattberseth2.com/tab_theme_II/
Download: http://mattberseth2.com/downloads/tab_theme_II.zip
Source: http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html

Related Listings:

1. Tabs with Moo tools plugin This is MooTabs! Using a slightly modified CSS file and...
2. Decoy Fix for IE Duplicate Characters Bug Among the countless IE annoyances, the duplicate character bug is...
3. Vertical bar graph using php Who wants to use Excel to make a new graph...
4. Sliding Menu for script.aculo.us It’s been a while since the original post Sexy sliding...
5. Creating A Draggable Sitemap With JQuery There are a handful of javascript libraries and plugins available...

Do you like this post?

Email: