Ajax Tab Container Css Styles /Themes

Question

_{Friday, June 22, 2012 2:51 AM}

Hi..

I need smart Css styles/ Themes  for ajax Ajax Tab Container in my webform.

Thanks in advance.

All replies (5)

_{Friday, June 22, 2012 5:30 AM ✅Answered}

this is Css and you can Edit as per your Requrment

<style type="text/css">
        .MyTabStyle .ajax__tab_header
        {
            font-family: "Helvetica Neue" , Arial, Sans-Serif;
            font-size: 14px;
            font-weight:bold;
            display: block;

        }
        .MyTabStyle .ajax__tab_header .ajax__tab_outer
        {
            border-color: #222;
            color: #222;
            padding-left: 10px;
            margin-right: 3px;
            border:solid 1px #d7d7d7;
        }
        .MyTabStyle .ajax__tab_header .ajax__tab_inner
        {
            border-color: #666;
            color: #666;
            padding: 3px 10px 2px 0px;
        }
        .MyTabStyle .ajax__tab_hover .ajax__tab_outer
        {
            background-color:#9c3;
        }
        .MyTabStyle .ajax__tab_hover .ajax__tab_inner
        {
            color: #fff;
        }
        .MyTabStyle .ajax__tab_active .ajax__tab_outer
        {
            border-bottom-color: #ffffff;
            background-color: #d7d7d7;
        }
        .MyTabStyle .ajax__tab_active .ajax__tab_inner
        {
            color: #000;
            border-color: #333;
        }
        .MyTabStyle .ajax__tab_body
        {
            font-family: verdana,tahoma,helvetica;
            font-size: 10pt;
            background-color: #fff;
            border-top-width: 0;
            border: solid 1px #d7d7d7;
            border-top-color: #ffffff;
        }
    </style>

_{Friday, June 22, 2012 4:50 AM}

hello,

you will find Themes for Tab form this website

http://mattberseth.com/blog/2008/04/ajaxcontroltoolkit_tabcontaine.html

and how to modify Default Colors in ASP.Net AJAX Tabs Conatiner see below website

http://ctrlf5.net/?p=56

_{Friday, June 22, 2012 5:23 AM}

Thanks, but i need CSS, I could not find there.,

_{Sunday, June 24, 2012 11:36 PM}

Refer this

http://digdotnet.blogspot.in/2008/03/aspnet-ajax-tab-control-colorful-themes.html

http://lekshmi.org/2008/10/22/ajaxcontroltoolkit-tabcontainer-themes/

_{Wednesday, October 9, 2013 5:48 AM}

<style type="text/css">
.ajax__tab_xpsprite-theme .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px;
background:url(Images/InnerPage/menu.gif) repeat-x bottom;
}
.ajax__tab_xpsprite-theme .ajax__tab_header .ajax__tab_outer
{
padding-right:1px;
background:url(Images/InnerPage/menu.gif) no-repeat right -213px;
height:21px;
}
.ajax__tab_xpsprite-theme .ajax__tab_header .ajax__tab_inner
{
padding-left:0px;
background:url(Images/InnerPage/menu.gif) no-repeat left -187px;
}
.ajax__tab_xpsprite-theme .ajax__tab_header .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(Images/InnerPage/menu.gif) repeat-x left -5px;
}
.ajax__tab_xpsprite-theme .ajax__tab_hover .ajax__tab_outer
{
background:url(Images/InnerPage/menu.gif) no-repeat right -161px;
}
.ajax__tab_xpsprite-theme .ajax__tab_hover .ajax__tab_inner
{
background:url(Images/InnerPage/menu.gif) no-repeat left -135px;
}
.ajax__tab_xpsprite-theme .ajax__tab_hover .ajax__tab_tab
{
background:url(Images/InnerPage/menu.gif) repeat-x left -109px;
}
.ajax__tab_xpsprite-theme .ajax__tab_active .ajax__tab_outer
{
background:url(Images/InnerPage/menu.gif) no-repeat right -83px;
}
.ajax__tab_xpsprite-theme .ajax__tab_active .ajax__tab_inner
{
background:url(Images/InnerPage/menu.gif) no-repeat left -57px;
}
.ajax__tab_xpsprite-theme .ajax__tab_active .ajax__tab_tab
{
background:url(Images/InnerPage/block2.jpg) repeat-x left -31px;
}
.ajax__tab_xpsprite-theme .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>