Tab container & Tab panel

Hi

I am trying to customize look n feel of tab panel's Header Text -- by giving a hover effect or a different background image to tabs. I could not see any way of achieving it.

Where is the location of class ajax__tab_xp? If I create my own class, the separate tabs disappear.. How to apply or modify the stylesheet class??

Thanks in advance for your help.

Anyone guyz? AJAX experts? Please help.

I will greatly appreciate a line of working code for this.. Thanks in advance.

Hi,

Here is a code snippet demonstrate using custom style on tabContainer.

<style type="text/css">
.ajax__tab_xp2 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:21px;
background:
repeat-x
bottom;white-space:normal;
}
.ajax__tab_xp2 .ajax__tab_outer {
border-style: solid double;
padding-right:4px;
background:
no-repeat
right;
height:21px;
}
.ajax__tab_xp2 .ajax__tab_inner {
padding-left:3px;
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_tab {
height: 100px;
padding:4px;
margin:0;
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_container .ajax__tab_default {text-align:center; background-color:Blue;white-space:normal;}
.ajax__tab_xp2 .ajax__tab_body {text-align:center; background-color:Blue; font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; border-style:none; border-color:Green; border-bottom-style:none; border-left:none; border-right:none; border-top:none; }
.ajax__tab_xp .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>

<ajaxToolkit:TabContainer CssClass="ajax__tab_xp2" ....................

This question is being asked soooo many times...

Maybe this'll help:

http://forums.asp.net/t/1163303.aspx

And maybe someone should put this in the FAQ (if it isn't already there)..

Thank you Raymond.. your post has solved my problem 95%.. great!

Quick question, on Hover I have:

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
/* background:no-repeat; */
font-weight:bold;

due to this, all tabs move or drift little bit (due to font weight change) on Mouse Over.
How can I avoid this?

Thanks & I mark this as answer!

Thank you NNM, for the post link. I totally agree with other member -- TabPanel/Container controls are so "non-intuitive" .. if changing style on tab control must be done through css then why can't MSFT write a single line or provide a sample in their AJAX demos!! I spent freaking hours in figuring this out ...

Believe it .. I am gonna have questions when I start actual coding with Tab Controls! ..

Sam

sdekha76 :

Try changing thepadding value. There's no fixed answer to padding value, since I think it depends on the font size.

edit: the tab styling may seem non intuitive at first, but once you play around with it a bit, you'll be able to customize it completely, even changing the background images. I really love this toolkit control.