30/06/2011
      No Comments
      latif

Default theme for Tab Control of ASP.NET is not a good one. So customize is necessary to the theme. we can customize the design by changing the CSS property but we have to do it with different way not general way. here i have work with ajaxtoolkit. main thing is you have put the [ CssClass=”YourClassName”  ] in the tab property basically in the first tag. Here I have used the class name “orange” in no 1. And see the style sheet number in no 2.If you use image as background it will be very good thing for tab. good luck.

AjaxToolkit:TabPanel Theme Customize

Image: Theme of AjaxToolkit:TabPanel

1. [ This your page ]

<ajaxToolkit:TabContainer runat="server" ID="ApartmentTabs" ActiveTabIndex="0" CssClass="orange" >
    <ajaxToolkit:TabPanel runat="server" ID="anything" HeaderText="Opera" Font-Bold="True">
    <HeaderTemplate  >
   Opera
    </HeaderTemplate>
        <ContentTemplate>
            <.................................>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>

    <ajaxToolkit:TabPanel runat="server" ID="Picture" HeaderText="Firefox">
    <HeaderTemplate>
    Firefox
    </HeaderTemplate>
        <ContentTemplate>
            <...............>
        </ContentTemplate>
    </ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

2. [ This is your style sheet ]

.orange
{
    font-family: arial,helvetica;
}

.orange .ajax__tab_body
{
    font-size: 10pt;
    border: 1px solid #D6E3B9;
    border-top: none;
    background-color: #fbfbfb;
    padding: 10px 10px 10px 10px;
    margin-top:-6px;
}

.orange .ajax__tab_header
{
    background-color: #333;

    border-bottom: none;
    padding: 2px 2px 4px 2px;
    background:url('images/tab-head-bg.png') repeat-x;
    height:35px;
    padding-left:50px;
}

.orange .ajax__tab_tab
{
    font-size: 1em;
    color: #35670f;
    font-weight: bold;
    text-align: center;

    padding: 5px;

    cursor:pointer;

}

/*.orange .ajax__tab_active .ajax__tab_tab, .orange .ajax__tab_hover .ajax__tab_tab
{
    color: #ff9933;
    background:url('images/tab-tab-bg.png') repeat-x;
}*/

.orange .ajax__tab_active .ajax__tab_tab,
.orange .ajax__tab_hover .ajax__tab_tab
{
    color: #31261b;
    background:url('images/tab-tab-bg.png') repeat-x top;

}
.orange .ajax__tab_active .ajax__tab_outer,
.orange .ajax__tab_hover .ajax__tab_outer
{
    background:url('images/tab-outer-bg.png') no-repeat right top;
    padding-right:11px;
}
.orange .ajax__tab_active .ajax__tab_inner,
.orange .ajax__tab_hover .ajax__tab_inner
{

    background:url('images/tab-iner-bg.png') no-repeat left top;
    padding-left:12px;
}

3. [  Images ]

To do this theme you need 4 image

  1. header backgroud (.ajax__tab_header)
  2. inner: left side image(ajax__tab_inner)
  3. tab: middle image(ajax__tab_tab)
  4. outer: right side image(ajax__tab_outer)

The most important this is that css class ORANGE have to put in ajaxtoolkit property. If you not put this there will be no result as desires. You can use any name in the place of orange. This was used for overwrite the ajaxtoolkit style sheet.

you can try it. If you need any help you can ask me.