There seems to be a lot of issues on the ASP.NET Forums with “Theming” the AJAX Control Toolkit’s Tab Control. There are lots of requests for samples (one example), but there are limited resources out there. Looking at the Tabs sample page, you will find information on Theming, but it’s pretty basic. You will find the various styles that affect the tabs on the bottom of the sample page. Even with this, it leaves something out and people have problems. I believe the thing that throws people off is how the sample states “If your CssClass does not provide values for any of those then it falls back to the default value.”; the default value for the tabs are extremely basic. The style you most frequently see is the XP tab style (more on this later).
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”> |
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 { .visoft__tab_xpie7 .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { |
Finally, the rest of the styles which we’ll change a bit from the ajax__tab_xp styles:
|
.visoft__tab_xpie7 .ajax__tab_header { .visoft__tab_xpie7 .ajax__tab_outer { .visoft__tab_xpie7 .ajax__tab_inner { .visoft__tab_xpie7 .ajax__tab_tab { .visoft__tab_xpie7 .ajax__tab_body { |
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
93 Comments
Thank you very much. Just what I was looking for :)
Very helpful, thanks.
Fantastic article!! Works perfectly. You saved me so much time!
@Mark & Damien
RE: styling of individual tabs
I recently had this requirement come up with a client… Normally I would have used the Telerik Tab control to do this, but they were unwilling to budge on that regard. So I looked through the TapContainer control in the toolkit and was able to successfully apply unique styles. This blog post outlines my experiences in dealing with, and work around the TabPanel limitations imposed by the control toolkit.
http://clanmonroe.com/Blog/archive/2008/05/09/applying-unique-styles-to-tabs—ajaxcontroltoolkit.aspx
Hi Damien,
Don’t know what went wrong.
It works fine now.
My CSS is in the App_themes folder and the styles for the tabs are like this:
.visoft__tab_xpie7 .ajax__tab_inner { background:url(images/tab/tab-left.gif) no-repeat; }
tab-pictures are in App_Themesgalchoimagestab
Thanks,
Joop
Joop -
To use themes, you can put your CSS in your "App_Themes/galcho" folder. You can call it tab.css. Also, you can have your images folder in your theme (e.g. "App_Themes/galcho/images") as well. Add all your images for your theme in there. For the CSS, you don’t have to specify a <link> in the master page for it since the theme will automatically add the tab.css to your page. Once you have this structure, you can simply use a path relative to the CSS file (so just "images/tab/tab-hover.gif" instead of the full "App_Themes/galcho/images/tab/tab-hover.gif" path). If you need more help, check out http://quickstarts.asp.net/QuickStartv20/aspnet/doc/themes/default.aspx.
-Damien
Hi there,
I’m trying to use Theming (App_themes folder ) in the CSS, but then the gif’s are not shown. It only works when I put the images in images folder under the root.
.visoft__tab_xpie7 .ajax__tab_header { background:url(images/tab/tab-line.gif) repeat-x bottom; }
.visoft__tab_xpie7 .ajax__tab_outer { background:url(images/tab/tab-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_inner { background:url(images/tab/tab-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_tab { background:url(images/tab/tab.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { background:url(App_Themes/galcho/images/tab/tab-hover-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { background:url(App_Themes/galcho/images/tab/tab-hover-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { background:url(App_Themes/galcho/images/tab/tab-hover.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { background:url(images/tab/tab-active-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { background:url(images/tab/tab-active-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { background:url(images/tab/tab-active.gif) repeat-x; }
Here the HOVER images are not show.
Any suggestion ?
Reymes-
If you don’t set a CSSClass for the inner tab control, do you get the standard "XP" styles? I haven’t tested nested tabs before, so I’m interested as to what happens.
Hi there Damien,
Thanks a lot for sharing that info about Tab-themes. I dealing with some other problem. I am trying to used those themes, but at the same time I need to put another Tab Control inside each Panel of a general Tab-Control. The problem is that the inner-Tab-Controls do not display the specified theme. Theme is showed only one for the outer Tab-Control.
Any idea of what is going on?
Thanks in advance
Damien,
EXCELLENT Post.
My only addition is that I added ["border-top: #B9D3FB 5px solid;" to the .visoft__tab_xpie7 .ajax__tab_body {} style. That gives a solid blue line accross the whole bottom of the TabContainer Control (by putting it on the TOP of the content block).
Sean D.
Is there any way to set all tabs vertically ?
Mark,
I don’t think changing the individual tab style (e.g. the background) is possible without modifications to the Tab Control’s source code. You can do some customization using the HeaderTemplate, but this doesn’t change the full rendering of the tab, it just adds your header template code into the inner most SPAN of the tab itself. Also, if you are trying to disable a tab, you would need more than just CSS to accomplish this. There is a post on the ASP.NET forums that may help you out in doing this, although I haven’t taken the time to try it out for myself: http://forums.asp.net/t/1074319.aspx.
-Damien
Hi Damien
I’ve been looking every where for this answer so i’m hoping you can help
I’m looking to style individual tabs, i want to change the colour of a few of them (grey them out)
I’ve changed the CSSCLASS on the individual tabs but it doesn’t seem to get applied to the tabs
can you tell me if this is possible or how i can tackle it?
thanks
Chris,
It looks correct, however is the path correct? For example, you are using a relative link, but based on the position of the page your path maybe off. One thing you can try is set your link to be runat="server" and use a path of ~/StyleSheets/visoft__tab_xpie7.css assuming the StyleSheets folder is off of the root. You can also use FireBug (http://getfirebug.com) in FireFox and it will show you the loaded CSS files.
I’m not sure if you use themes, but it maybe a good idea since theme stylesheets are included automatically and the path will be correct. You can get more information on MSDN: http://msdn2.microsoft.com/en-us/library/ykzx33wh.aspx.
-Damien
[quote]
Chris -
You need to include the CSS stylesheet for the tab styles either in your MasterPage or you can add a stylesheet for the specific page using the technique found here: snipplr.com/…/.
Hope this helps!
-Damien
[/quote]
I tried including the css file in both ways mentioned, however, that didn’t seem to help. Below is the code for the master page.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="myMaster.master.cs" Inherits="myMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" rel="stylesheet" href="Stylesheets/visoft__tab_xpie7.css" />
<link type="text/css" rel="stylesheet" href="Stylesheets/StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
<br />
<br />
<span class="Test">This is another test.</span>
</form>
</body>
</html>
Below is the final rendering of the head tag only.
<head><title>
Untitled Page
</title><link type="text/css" rel="stylesheet" href="Stylesheets/visoft__tab_xpie7.css" /><link type="text/css" rel="stylesheet" href="Stylesheets/StyleSheet.css" /><link href="StyleSheets/visoft__tab_xpie7.css" rel="stylesheet" type="text/css" /><link href="/scorecard/WebResource.axd?d=oMNrY_T3KXTsOSsbu9yz1pcY2cFaQlMpY6g0TgmJfxm290LkzUJJakdWKIU5zCGyidjWWvInGD14h12ipbeT-w2&t=633310672420000000" type="text/css" rel="stylesheet" /></head>
(I’ll take out one of the two visoft__tab_xpie7 references when this starts to work)
I added a css class called "Test" which turns text green and included it in StyleSheet.css and then cut/pasted it into visoft__tab_xpie7.css, both times it turned the text green as it should. So the stylesheet is getting loaded. Is there something I’m forgeting? Thanks for your help Damien.
Prasad -
Thanks for sharing these, I’m sure these will help out many users.
-Damien
Inspired by this post, I made some more nice looking themes. here you go
http://digdotnet.blogspot.com/2008/03/aspnet-ajax-tab-control-colorful-themes.html
Prasad.
Chris -
You need to include the CSS stylesheet for the tab styles either in your MasterPage or you can add a stylesheet for the specific page using the technique found here: http://snipplr.com/view/3824/adding-css-link-to-a-c-master-page-from-a-child-codebehind-page/.
Hope this helps!
-Damien
Great example. I was able to open/run it without any problems.
However, I copied/pasted the ajaxtoolkit source from default.aspx into a content page like:
<%@ Page Language="C#" MasterPageFile="~/myMaster.master" AutoEventWireup="true" CodeFile="dummy.aspx.cs" Inherits="dummy" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ScorePlaceHolder" Runat="Server">
<asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>
<ajaxToolkit:tabcontainer id="tabContainer1" runat="server" height="300" cssclass="visoft__tab_xpie7">
<ajaxToolkit:tabpanel id="tabPanel1" headertext="Tab 1" runat="server">
<contenttemplate>Test – Tab 1</contenttemplate>
</ajaxToolkit:tabpanel>
<ajaxToolkit:tabpanel id="tabPanel2" headertext="Tab 2" runat="server">
<contenttemplate>Test – Tab 2</contenttemplate>
</ajaxToolkit:tabpanel>
<ajaxToolkit:tabpanel id="tabPanel3" headertext="Tab 3" runat="server">
<contenttemplate>Test – Tab 3</contenttemplate>
</ajaxToolkit:tabpanel>
<ajaxToolkit:tabpanel id="tabPanel4" headertext="Tab 4" runat="server">
<contenttemplate>Test – Tab 4</contenttemplate>
</ajaxToolkit:tabpanel>
</ajaxToolkit:tabcontainer>
</asp:Content>
The CSS stopped working. I don’t know why(the page will load and function, no styling). Is there something specific you have to do to make CSS/Content work with AJAX/Tabs? I included the css file in the master page header.
Awesome – a great, clear and easy to follow piece of advice – thanks very much!
Thank you so much for your valued post.
Congratulations, your code works perfect here!! thank you!!!
I’m trying to change the color based on the tab selected through client side. Probably within the OnClientActiveTabChanged. Has anyone been able to do this?
Very cool. I am working with the YUI theme and found your examples very clear and concise. Good job.
hai,In my tab control the header text is displaying half of the text and remaining is white space.?thanks
Hans -Tabs on the Left are a bit tricky, but not impossible. You will need to modify the source for the Tabs control, the good news is all you need to modify is the rendering and not the logic.There are also other products out there that do this, for example: http://dhtmlx.com/docs/products/dhtmlxTabbar/-Damien
Matt – For a fixed width, just set a width on the ajax__tab_tab. For example:width:100px;Note that this may mess up your layout a bit though based on the overall width of your tabs, so you may have to play around with it. -Damien
Is there anyway to make the tabs all the same length no matter what the header text length is?
Hi,Is there a way to put the tabs on the left side and not on top?greetings,hans
Mahbubul – Are you looking for the source code? It’s available at the end of the article: Look for the line “If you’d like, you can download the files for this sample: Full Solution | CSS and Images Only“-Damien
my need AJAX Control Toolkit – Tab Control – Themes
Hi,You explanation si very good and useful. I am trying to use this, Everything is working fine but background image is not coming. I am using IE7.Images are copied to respective dir.Could you please suggest me what else could be wrong.?
Jay – Your best bet is to use an image or something within the HeaderTemplate for the tab to indicate there is something “special” about it.-Damien
Do you know a way to change the style for just one of the tab panels? For example, if I have a container w/ 3 panels and if the user meet a cetain criteria, I would like to “flag” the third tab (highlight in red or something like that) so the user knows to go there after looking over the info on the default panel.Thanks
Dondi,No, you don’t need to recompile at all. Just add your stylesheet to your page and add your custom CSS class name. Download the demo and it should be clearer.
I still don’t quite get it. Does that mean I replace the css in the ajax project recompile it and then reinstall ajax on my pc for the changes to take affect?
Brilliant explanation. Clear and precise. Saved me alot of time
It works! u were totally in the first thing u thought: I had a SPAN style definition. The problem: line-height:30px.Thx so much, u’ve helped a lot and I’ve learnt also.
Oscar-Your old DOCTYPE should be correct:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>.Make sure you don’t have anything before the doctype, such as the XML declaration or a comment. IE6 gets pushed into Quirks Mode when there is something before the DOCTYPE. Look at the source of your rendered page to make sure the DOCTYPE is the first line.If it isn’t quirks mode causing your issue, it could be possible that you have another style on your site that may be effecting it. For example if you have something like SPAN { padding: 10px; }, this will apply a 10px padding to all SPANS, causing you issues with your tabs.I’d recommend using the IE Developer Toolbar to attempt to troubleshoot your issue. Sometimes these things are pain to track down…Does the “standard” XP style work successfully for you? If this does, then you may have to adjust the padding or something when you create your new theme. Hope you find your issue!-Damien
Ok, let’s see if i’ve understood:my old configuration was:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>and checking the wiki article, for having A (S is not possible) in IE6 i’ve to put:<?xml version=”1.0″ encoding=”UTF-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>That is the same save to the line <?xml…>But this doesn´t fix the problem. Am i doing right?thx
Thx so much for ur quick answer. I’m gonna check it just now and I’ll tell u!Bye
Oscar,It looks to me like IE6 is being pushed into “Quirks Mode” (see http://en.wikipedia.org/wiki/Quirks_mode). The Toolkit assumes the IE is in standards rendering mode… I believe the faulty box model is IE6 Quirks Mode is to blame for you issue. Check the Wiki and make sure you use one of the standard-rendering DOCTYPE declarations. Hope this helps!-Damien
Very good post and nice result, but it’s giving me problems in IE 6.0:http://www.hagasesuweb.com/imagenes/problem_explorer.gifAny suggestion is welcomedThx
kw7566 -It’s not impossible, but it will involve some work. You will need to modify the source for the Tabs control, the good news is all you need to modify is the rendering and not the logic.-Damien
this works great! – Next question – any way to change the tab location? I need the tabs on the bottom and on the left (vertical). I have seen 3rd party controls accomplish this feat but was hoping it was feasible with toolkit – wishful thinking?
Thanks a Trillion sir. Exactly waht i was looking for.
Gustavo,Glad this helped you! Thanks for the comment.-Damien
Thank you very much!!!You solved and saved my life with this post!!!Its a very good site!Bye
What about styling each tab panel differently? I am trying to implement a simple style where I have three tabs and each one is a different color (red, green, blue) Styling the container works but it gives me the same style for each tab. I would like to be able to override the styles for the individual tab panel seperatley.ideas?
sweet, just what i was looking for :D thanks very much