How to: styling the ASP.NET AJAX TabContainer control

As promised, here is the How-To on styling the Tab control. Hopefully this will help others avoid the solid week of research and testing I went through! I will post some additional notes on using the control, and some links, in a follow-up post.
 
UPDATED APRIL 08, 2009: I have updated this post to include previous updates and some new information.
 

How to Style the ASP.NET AJAX Tab Control:

 

The method for changing the style of the tab control, aka the TabContainer, that actually works is as follows:

  1. For Visual Studio 2005/ASP.NET 2.0, download the source code for the AJAX Control Toolkit from this page: http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=11121 – make sure you grab the version with the source code! Note: If you’re using VS 2008, and you have Service Pack 1 installed, you already have the latest version of the Controls. If you don’t have VS 2009 SP1, you should get it immediately! If you have SP1 but not the Source Code, you can grab the version with the Source Code (the top download link).

  2. 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".

  3. Place the .gif files into an existing folder in your website, then, in Visual Studio, right-click that folder in Solution Explorer and "Add Existing item…" for each image file. Alternately, you can "Add…New Folder" in Visual Studio first, or create the folder in Windows Explorer/My Computer, then use "Add Existing item…" to add the folder, then the images, to your Visual Studio project.

  4. Open the "tabs.css" file, and Copy the entire XP style. Paste it into a .CSS file in your project; you can use your existing main .CSS file, or add a new separate one.

  5. 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. Make a note of the new name; you’ll need it in step 9.

  6. Still in the .CSS file in your project, go through each entry that contains a URL reference to a .gif file—the WebResource.axd? reference—and edit it to point to the .gif files you added to your project in step 3, including the Relative path to the images’ directory. For example, if you placed the .gif images into a folder called "images" in your website’s root folder, and your CSS files are in a separate folder directly under the root folder, such as "styles", 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)

  7. At this point, if you view the page in a browser, you will see the issue mentioned above: the infamous "blank spot", or missing pixels, along the right edge of each tab image. Here is what it looks like (note the "empty" line just to the left of the right edge of each tab):
    bad-tabs

    If you are lucky, and/or using a newer version of the Controls that doesn’t have this flaw, you can skip the next step.

  8. Next, apply the second step of HalH’s fix as mentioned above: remove "padding-right:4px;" from the definition of ‘.ajax__tab_outer’. Depending on which version of the Toolkit you have, this may take care of the problem completely; if not, you may need to employ the first step of Hal’s fix: remove the reference to ‘tab-line.gif‘ from the ‘.ajax__tab_header’ definition – that is, delete the entire "background" portion of the style. Note that this will also most likely remove the line from the top of the TabContainer control; you will have to try it and decide for yourself what an acceptable compromise is for your situation.

  9. Finally, open the page in which you placed the tab controls, in Source view. Edit the opening TabContainer tag 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 a default-styled tab control would look! However, the difference is that you can now change the styles in the ajax__tab_xp2 class in your .CSS file, and the changes you make will show up in the web page.


Additional Points:

[Thanks to the Commenters for some of these]

  • I have heard from a few people that there is a noticeable flicker the first time they move the mouse over the Tabs. This is likely caused by some of the images not being downloaded until the user mouses over or clicks one of the Tabs. You can fix this by pre-loading the image files. There are various ways to accomplish this, including using JavaScript to pre-load the images, but the method I prefer involves using CSS to have the images loaded, but not shown, during initial page load. First, identify which images are not loading automatically;  it is likely to be the images with "hover" in their title, such as "tab-hover.gif", and perhaps the main "tab.gif" and tab-line.gif". Next, you will want to create a CSS style in your CSS file, such as this one:
    .PreloadedImage {display:none;}

    Finally, you will want to apply this style to the images in question, by placing the images somewhere on the web page, preferably at the bottom of the page, inside a <div> or <span> tag, and adding CssClass="PreloadedImage" to the <div> or <span> tag. This will cause the images to be loaded when the page loads, well before they are needed during a MouseOver or Click. The end result is that the download flicker will not occur.

  • As Ravee noted in a comment below, depending on the size of the font you use for the Tab headers, you may want to increase the height of the tabs from the default of 13 to a larger size such as 21, by changing the ".ajax__tab_xp2 .ajax__tab_tab" line, like this:
    .ajax__tab_xp2 .ajax__tab_tab {height:21px; [etc. ...]

The XP style from the "tabs.css" file:

I have received a couple of comments from people who have not been able to locate the "XP style" I mentioned in the tabs.css file.

So, here are the XP styles, as pulled directly from my copy of the "tabs.css" file, re-named with a "2" at the end. I have commented out the problematic style "padding-right:4px;" on ".ajax__tab_xp2 .ajax__tab_outer", so you should be able to use these styles as-is, after editing the image locations to point to your .gif files and adding the "CssClass="ajax__tab_xp2" attribute to the TabContainer tag in your .ASPX file—note the double underscore after "ajax". If you still experience the problem shown in #7 above, you may need to make the additional change of eliminating ‘tab-line.gif‘ from the ‘.ajax__tab_header’ definition, as noted in #8 above.

Note: these worked as-is on my PC, after changing the image locations; your mileage may vary.


/* xp theme */

/* Please note: as noted in one of the comments, and above, you must change the "WebResource.axd?"-style image URL references to point to the location of the image files on your server, or the Tab images will not show. The easiest approach is to replace the entire reference with a relative URL to the images. For instance, if your images are in a directory named "images" under the root of your site, and your .CSS files are likewise in a separate folder under your root, the following syntax will work:

{background:url(../images/tab-hover-right.gif) no-repeat right;}

You will, of course, need to adjust the relative path to match the location of the .CSS file and the images in your application.

Thanks to the anonymous Commenter who pointed the problem out; although I had encountered this, and fixed it, in my own application, I had neglected to post the fix here.  */

 

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

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

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

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

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

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

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

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

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

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

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

/******************************************************************************************************/

Advertisements
  1. #1 by Christopher Baker on March 12, 2012 - 4:28 pm

    I don’t have an “edge” if you will, or a border for that portion of the tab body that does NOT have tabs above it. For example, My tab body is 900px wide, but in some cases I have only one or two tabs above it. Who can I show such a line without that lone extending from pixel x=0 to pixel x=900 and runining the illusion of not having that line cutting off the active tab?

  2. #2 by Unknown on May 14, 2009 - 7:45 am

    I just wanted to drop a line and thank you for your thorough and extremely helpful post. I wish I had read it two days ago! After spending more than a couple of hours on getting the styles work, I was missing the last part about taking out the padding!Thanks again,

  3. #3 by Michael on April 21, 2009 - 10:11 pm

    Thank you so much for posting this. I am always amazed when someone is kind enough to prevent others from going through the same pain you obviously had to endure in order to come up with this solution. I can’t thank you enough for saving me from what would probably have amounted to days of trial and error. Kudos to you!

  4. #4 by Gary on April 15, 2009 - 3:14 pm

    Followed your instructions and it works great!. Thank you so much for taking the time to research this bloddy mess.NOTE:The only change that is different from your instructions is I used (as an example) background-image:url(‘tabimages/tab.gif’); vs, this background:url(../images/tab.gif). I needed the single tick and the path I annotated. I was having trouble with the missing pixel issue but removing the padding-right:4px; fixed that. Thanks againGary

    • #5 by Schatzii on August 11, 2011 - 8:41 am

      Thank you both the original blogger…and Gary…ur suggestion made my day!

  5. #6 by Andrew on April 8, 2009 - 5:32 pm

    @No Name (Feb. 6)The <% %> references require you to embed the images as Web Resources. I did not go this route.The background:url(/relative_path/to_files) approach will work. You do *not* want to add tildes, quotes etc. to the path; do it exactly as I show above, just the path itself. Have you verified that you have the path correct? Try using the same path in an <img> tag outside the Tab Control to verify that the path is correct.The other thing that can trip you up: make sure you have re-named the style in the stylesheet, as in step 5 above, and that you use the *exact* same name in the Tab Control’s tag, as in step 10.Finally, make certain you have referenced the stylesheet in the .ASPX page! The fact that the background was styled properly does not mean that you have the styling set properly for the Tab images. The first time I attempted to style the Tabs, I had the same experience–the background color style was used, but not the Tab image styles.

  6. #7 by Andrew on April 8, 2009 - 3:41 pm

    @Michael:I fortunately did not need to support IE6 for the Intranet app I wrote using the Tab control. So I was blissfully unaware of any issues with different rendering. I would think that the standard methods for working around browser differences would apply; if I get some time later I will take a look.

  7. #8 by Unknown on February 7, 2009 - 1:40 am

    I have been trying to customize the tab style now for two days. I followed the instructions above, but I cannot get the tab "heads" to render. I use a background color, which is applied to the tab body, so I know the CSS is being referenced correctly. I’m using VS2005 and the AjaxControlToolkit for .Net 2.0. I have set up the images in a folder which is a sibling to the webpage, just like the AjaxControlToolkit sample project (AjaxControlToolkit in a folder under the solution, as is the SampleWebSite). I’m using lines like this for the styles in the .css file:.TCS_tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:inherit;font-weight:bold;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}which is identical to that in the sample app. I’ve also tried using background:url(../AjaxControlToolkit/Tabs/tab-left.gif), using slashes, backslashes, dots, leading tildes, with and without quotes, and nothing works. The only difference I can see is that my TabContainer is in a .ascx file, where the TabContainer is in a .aspx file in the Ajax sample app.If anyone can shed light on this issue, I’d appreciate it!

  8. #9 by Michael on February 6, 2009 - 6:16 pm

    Thanks Andrew, I wish that I had found your blog and your post on ASP.NET: UPDATED AJAX FAQ earlier than I did. I also spent a lot of time with the Ajax Tab Control and through trial and error had found the items in the included CSS that need changes in order to make it work right. The weird one was the 4 pixel on .ajax__tab_outer {padding-right:0px} that needs a 0 to close that gap. Also the height mentioned by ravee below was another that I found to change from 21 to 13, but that only changes the left and center, not the right. (?) I changed the colors of the graphics, changed the name of the style, and included the style name on the CSS entry for the TabContainer.The problem I’m having is the differences between IE7 and IE6 for this control. The right side of the tabs I made will be 4 pixels higher in IE7 when this setting is 0px: .ajax__tab_outer {padding-bottom:0px} If I set this to 4px, then it will be 4 pixels lower than the center and left when viewed in IE6. Since I have to account for both IE7 and IE6, I’m working on a Javascript to get the version and dynamically change this CSS setting. So far I can detect the version, but I’m having trouble with the correct code/syntax to change the CSS from the Javascript in the ASP source of the masterpage.master file.If I am on a bad track and there is another, better way to accomidate the difference between IE6 and IE7, then please let me know.Thank you!

  9. #10 by ajthepoolman on October 10, 2008 - 4:40 pm

    Thank you for all your work on this Andrew!  I have been searching for 3 days, trying to figure out why my tabs wouldn’t display the style.  I thought it had to do with my page.  It has a hidden panel that is only displayed once a valid person is selected.  The tabs are in that panel.  My thought was that the css styles weren’t being applied to hidden objects.  I was going in circles! 
     
    Thanks again for a great blog!

  10. #11 by Andrew on September 25, 2008 - 1:45 am

    @no name #2:
    Yes, that is correct, the WebResource.axd etc. URL references are PC-specfiic and this will break when you move the files to your server.
     
    I will be addressing this in the blog post shortly.
     
    -Andrew
     
     

  11. #12 by ravee on September 24, 2008 - 8:08 pm

    hi Andrew,Good job. The details were simple to follow. Additionally I had to do the followingincrease the height of tab to 21 from 13..ajax__tab_xp2 .ajax__tab_tab {height:13px;……

  12. #13 by no name on July 16, 2008 - 1:15 pm

    Be warned: The strange WebResource.axd URLs are encrypted machine-specific values (based on the machinkey specified in machine.config), therefore the above code will not work for anyone else. Even if you *do* locate and use the correct URLs for your PC, you’ll find that it won’t work when you move the site to a different server.
     
    This caught me out but fortunately as I was only changing the font I was able to remove most of the CSS and just override the font-family.

  13. #14 by Kaushal on February 27, 2008 - 7:22 pm

    Thanks a Ton for doing this. :)

  14. #15 by Unknown on February 27, 2008 - 7:07 pm

    Thank you for this information.  It was very helpful to me.  I have a question regarding using the default images.  I tried leaving the background URL file references as they were but this does not work.  I believe it is because of the embedded code blocks (<%= …%>) which do not get processed in the css file.  What is the best location for the tab styles in order to allow processing the code blocks?

  1. Infopath 2010 Videos

Leave a Reply

Fill in your details below or click an icon to log in:

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: