How can I override the default "TAB" look on the TabControl. RSS

• • Reply
  

  imaginedesig...

  Member

  10 Points

  5 Posts

  How can I override the default "TAB" look on the TabControl.

  Feb 20, 2007 07:39 PM|LINK

  Basically, I'm the designer and trying to customize this tab control. I don't want the default "style" look and need to customize it to my liking. There really isn't much information on this. I do know how to create the tab options as a headertemplate. I just don't know how to TURN off the XP default tab. Can anyone lend any assistance?

• • Reply
  

  imaginedesig...

  Member

  10 Points

  5 Posts

  An Answer To My Own Question.

  Feb 20, 2007 08:03 PM|LINK

  I believe I have figured this out - Thanks to an external web site. I'm posting the solution here so others may benefit from it.

   Basically I found out that the default CSS styles are listed below:  The tab control uses CSS inheritance to set the cascade. So if you change the

  <ajaxToolkit:TabContainer runat="server" Height="300px" width="750px" ScrollBars="Vertical" CssClass="ajax__tab_xp"> to the following and modify the class value you can take control of the CSS in an external style sheet. The one problem is utilizing the embedded images. 

   

  /*AJAX.NET TAB CONTROL */
  .ajax__tab_xp .ajax__tab_header {
      font-family:verdana,tahoma,helvetica;
      font-size:11px;
      background:
          url()
          repeat-x
          bottom;
  }
  .ajax__tab_xp .ajax__tab_outer {
      padding-right:4px;
      background:
          url()
          no-repeat
          right;
      height:21px;
  }
  .ajax__tab_xp .ajax__tab_inner {
      padding-left:3px;
      background:
          url()
          no-repeat;
  }
  .ajax__tab_xp .ajax__tab_tab {
      height:13px;
      padding:4px;
      margin:0;
      background:
          url()
          repeat-x;
  }
  .ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {
      background:
          url()
          no-repeat
          right;
  }
  .ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {
      background:
          url()
          no-repeat;
  }
  .ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {
      background:
          url()
          repeat-x;
  }
  .ajax__tab_xp .ajax__tab_active .ajax__tab_outer {
      background:
          url()
          no-repeat
          right;
  }
  .ajax__tab_xp .ajax__tab_active .ajax__tab_inner {
      background:
          url()
          no-repeat;
  }
  .ajax__tab_xp .ajax__tab_active .ajax__tab_tab {
      background:
          url()
          repeat-x;
  }
  .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;
  }

   

  "AJAX Toolkit" CSS "TabContainer"

  • Marked as answer by Raymond Wen - MSFT on Jun 01, 2007 07:15 AM
• • Reply
  

  marathi

  Member

  195 Points

  76 Posts

  Re: An Answer To My Own Question.

  Mar 17, 2007 12:55 AM|LINK

  Hi,

  Do you know if there any sample css styles for the tabs out there? I am not very good with css and was wondering if I could look at some samples.

  Thanks 

• • Reply
  

  kilko

  Participant

  1502 Points

  501 Posts

  Re: An Answer To My Own Question.

  Sep 29, 2008 12:53 PM|LINK

  http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html can be of help to you.
  
• • Reply
  

  nazanin_a

  Member

  228 Points

  282 Posts

  Re: An Answer To My Own Question.

  Nov 04, 2009 10:09 AM|LINK

  Thanks but could not find my answers
• • Reply
  

  geber12

  Member

  2 Points

  1 Post

  Re: An Answer To My Own Question.

  Jan 17, 2013 07:55 PM|LINK

  I know it's been a while since this thread was posted, but here is a complement to the approved solution, for dummies like me who searched for a while to make this work...

  If you want your page to use the new css, rename "ajax__tab_xp" to something else in your css and web page.

  Ex. .MY_ajax__tab_xp .ajax__tab_header { ... }

  and <ajaxToolkit:TabContainer runat="server" Height="300px" width="750px" ScrollBars="Vertical" CssClass="MY_ajax__tab_xp">
  

  For the images, change url() with your local path. You'll need inner, outer and center images for the regular, the hover and the active tabs. So 9 images, plus 1 for the header (a 1px * 1px image the color of your border). Make them from a screenshot of the default css, or use your own.
  

  .MY_ajax__tab_xp .ajax__tab_header {
      font-family: verdana,tahoma,helvetica;
      font-size: 11px;
      background: url(../Assets/tab_header.png) repeat-x bottom;
  }

  Hope this help.
  

  • Edited by geber12 on Jan 17, 2013 07:55 PM