UPDATE April 08, 2009: for the latest version of this post, with up-to-date info on styling the Tab control, see my just updated Blog post -- the info below is somewhat outdated and does not have some additional details I have added to the Blog post.


 


First of all, I would like to suggest that the AJAX section of the ASP.NET forums have its own FAQ section. I was going to post this in the general ASP.NET FAQ, but it didn't really fit, and there was no AJAX FAQ, so I'm posting it here.



Next: I have been looking for details on how to style the Tabs in the AJAX Toolkit's Tab control for over a week now. I have found information that is misleading, incomplete, outdated, and just plain wrong. And nowhere have I come across all the information needed to make it work in one place. So, I am posting this here. I hope that an AJAX FAQ can be created, and this post moved there.

 

I am including some background information, about the difficulties people are having in finding information on styling the tabs, first; after that I will include the complete instructions for styling the tabs.

First: the information on the documentation page for styling the tabs is misleading at best, as well as incomplete. The docs tell you that you can simply add your styles to your project as CSS, and neglect to tell you that you must add a "CssClass" attribute pointing to your new styles. They also state that, if you do not specify a style for a given element of the tabs, the "default" style will be used. What they don't say is that the default style is not the style you see when you first drop a tab control on a form! That style is actually the "XP style" you can see in the "tabs.css" file in the source for the AJAX toolkit.
Actually, what the docs refer to as the default style is an extremely bare-bones style, with no tab images at all! Your first impression on seeing this style is likely to be what mine was: "something  must be broken- or I must have done something wrong."

The docs lead you to believe that you can just specify a style for one element -- such as setting the font for the tab body -- and you will then see the style you set, and the rest of the styles will be the "normal" style (aka the XP style).  Not so! What you will get if you try this is what looks like plain tabs, with your font - and no actual tab images! Instead, you will have the names of the tabs above, looking like plain text, with no tab images at all. As noted, this is because the default style is not the "XP style", but rather is an extremely plain style with no images. While the docs are technically correct, the average user is not going to understand that the default style is not the one the control "comes with".

Next, you will find suggestions on some web sites that you download the source code for the toolkit controls, and copy the styles from the "tabs.css" file as a starting point for your own styles. The problem is, when you download the source code, the 'tab-line.gif' image in the .ZIP archive is either corrupt or incorrect, and there is a problem with the .CSS. Apparently the latest version of the Toolkit has a corrected image, but the .CSS is still a problem. This causes a blank spot to appear in a line along the right edge of each tab. You can see this by copying the XP style from the tabs.css file in the source code and pasting it into a .CSS file in your project, then editing the URL references for the images to point to the images you extracted from the source code .ZIP file. There is a fix for this that HalH discovered: http://forums.asp.net/p/1067200/1972639.aspx#1972639 

Some sites, and even some posts on this forum, that suggest you use the styles from the toolkit source - and then they list some of the code, but have incorrect syntax when referencing the images that are embedded in the controls! For the record, if you want to change some styles but not the images themselves, you'll want to keep the references to the embedded images; use the syntax in the "tabs.css" file in the source code. But be warned that you'll need to apply HalH's fix linked in above (it also appears below as item #8).

There are other issues, but the above three alone make it very difficult for someone to get started styling the tabs. 

 

How to Style the AJAX tab control:
The method for changing the style of the tab control that actually works is as follows: 


Download the source code for the AJAX toolkit from this page: http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941 - make sure you grab the version with the source code!


Open the .ZIP archive and extract the tabs.css file, and the tab images - get all 10 of the .gif files that start with "tab". 


Place the .gif files into a folder in your website, then right-click that folder in Solution Explorer and "Add Existing item..." for each image file.


Open the "tabs.css" file and Copy the entire XP style. Paste it into a .CSS file in your project, such as the one you are already using. 


In the .CSS file in your project, edit this first part of each entry for the tab control: .ajax__tab_xp . You want to change it slightly, such as to .ajax__tab_xp2 - that is, add the number 2 to the end. Do this for each entry in the XP style; do it only for the first item on each line. 


Go through each entry that contains a URL reference to a .gif file, and edit it to point to the .gif files you added to your project in step 3. If you placed them into a folder called "images" in your website's root folder, the reference should look like this (be sure you don't accidentally erase any style text from the end of each line): 

background:url(../images/tab.gif)



At this point, if you view the page in a browser, you will see the issue mentioned above: the "blank spot", or missing pixels, along the right edge of each tab image.  


Next, apply HalH's fix as mentioned above (I'm quoting him here, for the most part): remove the reference to 'tab-line.gif' from the '.ajax__tab_header' definition - that is, delete the entire "background" portion of the style. Then, remove "padding-right:4px;" from the definition of '.ajax__tab_outer'. [EDIT- I have discovered that, at least with the latest version of the toolkit, you can leave the reference to the image in place, which restores the line along the top of the tabs.]


Finally, open the page(s) in which you placed the tab controls in Source view. Edit the opening TabContainer tag in each file to add a CssClass reference to your new style. For the example above in step 5, the tag would look like this: 

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" CssClass="ajax__tab_xp2">






At this point, you will have a tab control that looks exactly the way an un-styled tab control would look! However, the difference is that you can now add/change the styles, and the changes you make will show up in the web page. Note: if you are happy with the image files that come with the stock XP style, don't change the background URL file references; you will still need to use HalH's fix, though.

It's surprising this control was released with a corrupt image [NOTE: THIS APPEARS TO BE FIXED IN THE LATEST VERSION] and broken CSS. Clearly the problem was fixed internally in the control's code and its internal image, since the control works when simply dropped unchanged on a webform, but the fix didn't get propagated to the publicly released source code... It would be nice to see Microsoft fix this issue, or at least post all of this information in the docs for the tab control...

Because I had so much trouble finding all this information, I am posting this here, in addition to posting this in the thread mentioned above.

Hopefully this will help someone else avoid the solid week I spent digging up this information from the few pages that have any info at all about this issue...





-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

This is great stuff, thanks so much for sharing it. I see questions all the time wanting to know more about this topic. 
I do have one problem and it may just be that you did this with a slightly older version of the toolkit, but my tabs.css does not reference xp anywhere. I have classes like.ajax__tab_default .ajax__tab_header and there is no reference to xp. Is there something I am missing? 
Chris Love
ASP.NET 2.0 Your Visual Blueprint for developing Web Applications

Hi Chris-
AFAIK I am working with the latest version of the toolkit. I don't know why the XP style would be missing from your "tabs.css" file.
For the record, I will post the .CSS styles from my "tabs.css" file, and you can use them as a basis. Remember to remove the problem style as in my post above, and, if necessary, the reference to the problem .gif file:  
/* xp theme */

..ajax__tab_xp0 .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rmrJJ7SjYIGSDdAdtNw1Ew2&t=633167421400000000) repeat-x bottom;}

..ajax__tab_xp0 .ajax__tab_outer {padding-right:4px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1yrs7q_zNUWaBBHgGRYOHKQ2&t=633167421400000000) no-repeat right;height:21px;}

..ajax__tab_xp0 .ajax__tab_inner {padding-left:3px;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY133ijxBIREEOoObFED_Bhzw2&t=633167421400000000) no-repeat;}

..ajax__tab_xp0 .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbv_dPXVoiLJ4geaEoszM6Zx7A4pJ2521Vwp4VsPeLe2fQ2&t=633167421400000000) repeat-x;}

..ajax__tab_xp0 .ajax__tab_hover .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rJjD_WkIfACTs9HQKpeKUA2&t=633167421400000000) no-repeat right;}

..ajax__tab_xp0 .ajax__tab_hover .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rMUVO7awInbuj7kuhms0Aw2&t=633167421400000000) no-repeat;}

..ajax__tab_xp0 .ajax__tab_hover .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1v5hLjjGOCMpBlMfF8JzFbA2&t=633167421400000000) repeat-x;}

..ajax__tab_xp0 .ajax__tab_active .ajax__tab_outer {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY11YFCEA-F1KrZBMAZZJHpInefUOk0Ib7CmvpoDZVzyh41&t=633167421400000000) no-repeat right;}

..ajax__tab_xp0 .ajax__tab_active .ajax__tab_inner {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1jldUXO80Ye5rs84ruU2hGw2&t=633167421400000000) no-repeat;}

..ajax__tab_xp0 .ajax__tab_active .ajax__tab_tab {background:url(WebResource.axd?d=enSUOcaa7DLBDplOv1agOWCbl483FKJyVuuGamtrdbsYLV5lPgufcLNwW9J6abY1rn-Bcdsd-Psg-56pH8vCFg2&t=633167421400000000) repeat-x;}

..ajax__tab_xp0 .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}


/****************************** END STYLES ********************************************************/


Here is the syntax for referencing a .gif file that is in a folder in your website- for this example, the file is in a folder named "images" which is in the root of the site:

background:url(../images/tab-line.gif)
 
Since I had such a rough time finding info on this, I am going to post a few links I found of use:

Ron Buckton, creator of the Tab control, has a  page on styling the calendar and tabs: http://blogs.msdn.com/rbuckton/pages/ajaxskinning.aspx - I actually found several references to this article, but apparently his original domain went down or something, so I never did get to read it; but he contacted me with this updated link.
An example of the problem and some possible solutions: http://forums.asp.net/rss.aspx?ForumID=1022&PostID=1742827
Damien's sample style page: http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx
BTW, Ron Buckton has mentioned that "fixing" the method for styling the tabs and calendar controls is a priority, though he couldn't give a time-frame...
 
HTH,
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

OK, this one pushed me over the edge.
I had such an irritating time getting the Tab control styled, that I have stopped resisting the flow, and I have started my own blog about ASP.NET and other related and unrelated stuff at:
http://acushen.spaces.live.com/blog/
I re-posted the how-to above, and am adding a series of additional posts detailing why it was so difficult to find out how to style the tabs. Rants? Maybe a little... :-)
I will also have some additional links and hints on styling the tab control...
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

This is great work Andrew. Thanks for sharing your learnings with the rest of the community.
Kirti Deshpande
Program Manager, Silverlight and ASP.NET AJAX
Microsoft

This posting is provided "AS IS" with no warranties, and confers no rights. 

andrew: 
your post saved me a lot of time. 
i had no tab styles because i embedded a tab container in a updatepanel.  with the information from your post it took about 15 minutes to solve and get the styles working with the tab container inside the updatepanel.
thanks, chad

Guys-
I'm glad I was able to help.
I know how frustrating it was for me when I was trying to dig up this information, and very few sites had anything on it. Those sites that did have something generally had only one piece of the puzzle, and/or part of their info was wrong...
Feel free to check out my brand-new Blog at: http://acushen.spaces.live.com/blog/. It was started as a direct result of my difficulties with the Tab control, and I have posted a bit more about my experiences with styling the Tab control...
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

I just downloaded the svn code for the Control Toolkit today and the  tab-line.gif is 'STILL' corrupt. I compared the images from a working one and the corrupt one and the only difference is the 4 pixel blank line in the corrupt one, so I can't see that this gif actually added anything that is missing.
Update: Having looked at it further I would hazard a guess that the original intent was for there to be a 4 pixel gap between adjacent tabs (not inside a tab), but the graphic & css got slightly mucked up. I have fixed it so it now works properly and looks a lot nicer. I can svn it if required.


 
 

Great work! Man, you saved me tons of time. The only issue I was having initially , I was dynamically adding the 
tab container and tabs. In order to get this to work I had to place the tab container explicitedly on the page and set the 
.CSS in the html verses in the code-behind then add the tabs dynamically. That worked! Anyhow, thanks much! xjh

Glad it helped. I know I was going crazy trying to figure it out myself the first time!
That's good to know about adding the control dynamically. When I get a few minutes, I'll write that up & put it on my blog as well.
 
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

Hi, i'm fairly new to all this, and following the steps till step 8, if i remove the reference to 'tab-line.gif' then the top line from the container is removed (as mentioned).  If i keep it, the top line overflows beyond
 the width of the TabContainer.  How could i prevent it from overflowing ? Thanks
 
 

i manged to get rid of the top line overflow by removing the "width" field of ".ajax__tab_body", and then in the TabContainer element specifying a width <cc1:TabContainer ID=......Width="800">.  I found this through guessing and am not really sure if it is the proper way, but it seems to work for now.
 
my next question is would it be possible to style the different panels in the same container differently, say i'd like each panel in the same container to have a different background color.  Anyone?
 

My version of the toolkit puts an orange line at the top of the selected tab headers. To keep in style with my site, I wanted to change them to light blue. So I copied the .gifs to my images directory. Then I copied the css classes to my .css file. I modified the class names with a "2" on the end. Then I changed the image url as such:
 

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {background:url("../Images/Tab/tab-active.gif") repeat-x;}
 
However, my images are not displaying at all. I know that my tabContainers are finding the css class because if I modify any other styling elements, they get reflected in the browser.
 
What am I doing wrong?
 
pardo

Has anyone tried this when the tab container is in a content placeholder?  I'm using master pages and cannot get the images to show up for the tabs at all.  I can change fonts (colors, typeface, weight, etc.) but cannot get the tab images to load.  Also, I'm wondering if the stylesheet can be from a theme or if it needs to be linked into the head tag on the page.  I am using themes and it seems to be acting really wierd.
 
Mike

Mike-
FWIW, I am successfully using the tabs in a Content Page linked to a Master Page, and have been for months, through a few different releases of the Toolkit. I have not tried using Themes with the tabs, as I don't generally use Themes.
I have always used the Tabs with my CSS in a separate file, linked in the head as you said. I have occasionally found issues with this method, however; and so, if you are trouble-shooting issues with styling the Tabs, I recommend moving the CSS declarations directly into the .ASPX page. That way you eliminate one possible problem, and narrow down the possibilities. You can always move them back once the cause of the problem is identified and fixed.
HTH,
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

One other thing that helps when I am having issues with loading the images: copy the image files directly to the folder where the rest of your website image files are, and reference them directly from there in the CSS. That way you can eliminate one more variable.
Remember that just copying the physical files to the directory is not enough-- you have to right -click on that folder , select "Add New", and navigate to the image files.
HTH,
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

Wow! I came across your article after 5 hours of frustration, I went through it step by step and it worked! Thanks!

You're welcome!
I went through those same 5 hours of frustration...and that's why I took the time to make the initial post on this. The docs just don't cut it on this one.
 
Glad to help...
-Andrew
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!

Thanks Andrew, it was quite benificial.
 Bob

For the tab-line.gif, what should the dimensions of that image be? On mine I'm the active tab still has a line underneath its header. Had to make my own tab-line.gif because the other one wouldn't open, so I'm not sure if I've got the right size, which may be the problem there. Cheers.
 Edit - sorted this myself, the image is 1x1, problem I had was caused by the height attribute on .ajax__tab_tab being too low.

This works great, thank you.  I only have 1 question about the setup.  I now have the following (any url line for example) as instructed in my .css:
background:url(../Images/AJAX Tabs/tab-hover-right.gif) no-repeat right;
The problem is, when I hover over the tab there is a quick flicker on the screen.  While looking in the footer of IE you can briefly see that the image is being downloaded (it is really quick), but the download still makes a quick flicker.
The default .css from the AJAX toolkit was as follows:
background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;
For whatever reason thier version does not flicker when hovering over the tabs.
Does anyone know of a way to prevent this flickering from downloading of the image?

 
Thank you,

As a quick follow-up solution to my last post - the images just needed to be pre-loaded.  There are several ways this can be done but I decided just to place the following hidden <div> at the bottom of my page that loads the images.  This takes care of the flickering from loading the images.
<div id="ImageLoader" style="visibility: hidden">
   <img alt="" src="../Images/AJAX Tabs/tab-hover-left.gif" />
   <img alt="" src="../Images/AJAX Tabs/tab-hover-right.gif" />
   <img alt="" src="../Images/AJAX Tabs/tab-hover.gif" />
   <img alt="" src="../Images/AJAX Tabs/tab-line.gif" />
   <img alt="" src="../Images/AJAX Tabs/tab.gif" />
</div>
 
Thank you,

 ATConway -
Thanks for the info. I have added it to my Blog post at http://acushen.spaces.live.com/blog/cns!E3A022289D65B5C0!123.entry .
 
-Andrew 
Please remember when your post is solved, to "Mark as Answer" the post(s) that solved it!