UPDATE: see step #8 for updated information about the fix for the styles.
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 isnot 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 thatactually 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 itonly 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:TabContainerID="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 postall 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
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?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.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
This is great work Andrew. Thanks for sharing your learnings with the rest of the community.
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 forme when I was trying to dig up this information, and very few sites hadanything on it. Those sites thatdid 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
No comments:
Post a Comment