More Sample AjaxControlToolkit TabContainer Themes …

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 documentation for the TabContainer control

Download | Live Demo | View Stylesheet

Technorati Tab Theme

I like Technorati’s tab control because it simple, yet in my opinion it still has a nicer presentation than the default xp style TabContainer theme.  Here is a link to the page where I found this control.

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

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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:TabPanel>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, “Courier New”, courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

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

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.

That’s it.  Enjoy!

Originally made and posted by

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: