Click here to Skip to main content
15,868,164 members
Please Sign up or sign in to vote.
3.00/5 (2 votes)
Dear Friends,

Can any one guide me on CSS for Tabcontainter in ASP.Net
I want to use different style of theme.

Regards,
AP
Posted

 
Share this answer
 
Comments
Maciej Los 21-Jun-12 12:58pm    
Good! +5!
Sandeep Mewara 21-Jun-12 16:36pm    
Thanks.
If u use jquery for Tab container means various themes are available.
visit jqueryui.com
 
Share this answer
 
v2
CSS
Write following in style tag of aspx file

<style type="text/css">
.ajax__myTab .ajax__tab_header { font-family: Arial, Helvetica, sans-serif; font-size: 12px;font-weight: bold;color:#000;border-left:solid 1px #666666; border-bottom:thin 1px #666666 }
        .ajax__myTab .ajax__tab_outer { padding-right: 4px; height: 20px; background-color: #fff; margin-right: 1px; border-right: solid 1px #666666; border-top: solid 1px #666666 }
        .ajax__myTab .ajax__tab_inner { padding-left: 4px; background-color: #fff; }
        .ajax__myTab .ajax__tab_tab { height: 13px; padding: 4px; margin: 0; }
        .ajax__myTab .ajax__tab_hover .ajax__tab_outer { background-color:  #c9c9c9}
        .ajax__myTab .ajax__tab_hover .ajax__tab_inner { background-color:  #c9c9c9}
        .ajax__myTab .ajax__tab_hover .ajax__tab_tab { background-color: #c9c9c9; cursor:pointer }
        .ajax__myTab .ajax__tab_active .ajax__tab_outer { background-color:#9ebae8; border-left: solid 1px #999999; }
        .ajax__myTab .ajax__tab_active .ajax__tab_inner { background-color:#9ebae8; }
        .ajax__myTab .ajax__tab_active .ajax__tab_tab {background-color:#9ebae8;cursor:inherit }
        .ajax__myTab .ajax__tab_body {border: 1px solid #666666; padding: 6px; background-color: #ffffff; }
        .ajax__myTab .ajax__tab_disabled {color:Gray }
</style>


Now set property CssClass="ajax__myTab" of ajax tab container
 
Share this answer
 
CSS
<style type="text/css">

    .fancy-green .ajax__tab_header
{
background: url('images/green_bg_Tab.gif') repeat-x;
cursor:pointer;
}
.fancy-green .ajax__tab_hover .ajax__tab_outer, .fancy-green .ajax__tab_active .ajax__tab_outer
{
background: url('images/green_left_Tab.gif') no-repeat left top;
}
.fancy-green .ajax__tab_hover .ajax__tab_inner, .fancy-green .ajax__tab_active .ajax__tab_inner
{
background: url('images/green_right_Tab.gif') no-repeat right top;
}
.fancy .ajax__tab_header
{
font-size: 13px;
font-weight: bold;
color: #000;
font-family: sans-serif;
}
.fancy .ajax__tab_active .ajax__tab_outer, .fancy .ajax__tab_header .ajax__tab_outer, .fancy .ajax__tab_hover .ajax__tab_outer
{
height: 46px;
}
.fancy .ajax__tab_active .ajax__tab_inner, .fancy .ajax__tab_header .ajax__tab_inner, .fancy .ajax__tab_hover .ajax__tab_inner
{
height: 46px;
margin-left: 16px; /* offset the width of the left image */
}
.fancy .ajax__tab_active .ajax__tab_tab, .fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_header .ajax__tab_tab
{
margin: 16px 16px 0px 0px;
}
.fancy .ajax__tab_hover .ajax__tab_tab, .fancy .ajax__tab_active .ajax__tab_tab
{
color: #fff;
}
.fancy .ajax__tab_body
{
font-family: Arial;
font-size: 10pt;
border-top: 0;
border:1px solid #999999;
padding: 8px;
background-color: #ffffff;
}




    </style>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900