Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Ajax > skin for tabstrip selecting background for selected tab

• Thomas Lang

  Posted on Mar 23, 2011 (permalink)

  Hello,
  
  can someone help me. I have the skin for the tabstrip,  and i'm NOT a css newbie, but i can't figure out how to do a simple thing like set the background of the tabs to black when selected, and white when not selected.  Can you help me. here is the skin that i am working with.
  
  again,  i would like everything to remain the same execept i would like the tab to be black when selected.
  
  thanks,
  tom
  

  .RadTabStrip_Maestro .rtsLI,

  .RadTabStrip_Maestro .rtsLink

  {

      color: #000000;

      font: 12px/26px "Segoe UI", Arial, sans-serif;

  }

   

  .RadTabStrip_Maestro .rtsLI,

  .RadTabStrip_Maestro .rtsLink

  {

      color: #ffffff;

  }

   

  .RadTabStrip_Maestro .rtsLink:hover,

  .RadTabStrip_Maestro .rtsSelected

  {

      color: Blue;

  }

   

  .RadTabStripLeft_Maestro .rtsSeparator,

  .RadTabStripRight_Maestro .rtsSeparator

  {

      background: #685c6b;

  }

   

  /* <disabled tabs> */

  .RadTabStrip_Maestro .rtsLevel .rtsDisabled,

  .RadTabStrip_Maestro .rtsLevel .rtsDisabled:hover

  {

      color: #dedede;

  }

  /* </disabled tabs> */

   

  /* <scrolling arrows> */

  .RadTabStrip_Maestro .rtsNextArrow,

  .RadTabStrip_Maestro .rtsPrevArrow,

  .RadTabStrip_Maestro .rtsPrevArrowDisabled,

  .RadTabStrip_Maestro .rtsNextArrowDisabled

  {

      background-image: url('TabStrip/TabStripStates.png');

  }

  /* </scrolling arrows> */

   

  /* <tab backgrounds> */

   

  .RadTabStripTop_Maestro .rtsLevel { background-color: transparent; }

   

  .RadTabStripTop_Maestro .rtsLevel .rtsLink,

  .RadTabStripTop_Maestro .rtsLevel .rtsOut,

  .RadTabStripBottom_Maestro .rtsLevel .rtsLink,

  .RadTabStripBottom_Maestro .rtsLevel .rtsOut,

  .RadTabStripTop_Maestro_Baseline .rtsLevel,

  .RadTabStripBottom_Maestro_Baseline .rtsLevel { background-image: url('TabStrip/TabStripStates.png'); }

   

  .RadTabStripLeft_Maestro .rtsLink,

  .RadTabStripRight_Maestro .rtsLink { background-image: url('TabStrip/TabStripVStates.png'); }

   

  .RadTabStripLeft_Maestro .rtsLast .rtsLink,

  .RadTabStripRight_Maestro .rtsLast .rtsLink

  {

      border-bottom: 1px solid #939194;

  }

   

  .RadTabStripRight_Maestro .rtsLink,

  .RadTabStripRight_Maestro .rtsLI .rtsDisabled:hover { background-position: 100% 0; }

  .RadTabStripRight_Maestro .rtsLink:hover { background-position: 100% -200px; }

  .RadTabStripRight_Maestro .rtsSelected,

  .RadTabStripRight_Maestro .rtsSelected:hover { background-position: 100% -400px; }

  /* </tab backgrounds> */

   

  .RadTabStripRight_Maestro .rtsSelected { color: Black; }

  .RadTabStripRight_Maestro { color: Black; }

   

  /* <background positioning: tabs with hovers> */

   

  /* <orientation: top> */

   

  .RadTabStripTop_Maestro .rtsLink { background-position: 0 0; }

  .RadTabStripTop_Maestro .rtsOut { background-position: 100% 0; }

   

  .RadTabStripTop_Maestro .rtsLink:hover { background-position: 0 -52px; }

  .RadTabStripTop_Maestro .rtsLink:hover .rtsOut { background-position: 100% -52px; }

   

  .RadTabStripTop_Maestro .rtsSelected,

  .RadTabStripTop_Maestro .rtsSelected:hover { background-position: 0 -26px; }

  .RadTabStripTop_Maestro .rtsSelected .rtsOut,

  .RadTabStripTop_Maestro .rtsSelected:hover .rtsOut { background-position: 100% -26px; }

   

  .RadTabStripTop_Maestro .rtsDisabled:hover { background-position: 0 0; }

  .RadTabStripTop_Maestro .rtsDisabled:hover .rtsOut { background-position: 100% 0; }

   

  .RadTabStripTop_Maestro_Baseline .rtsLevel { background-position: 0 100%; background-repeat: repeat-x; }

   

  /* </orientation: top> */

   

  /* <orientation: bottom> */

   

  .RadTabStripBottom_Maestro .rtsLink { background-position: 0 -182px; }

  .RadTabStripBottom_Maestro .rtsOut { background-position: 100% -182px; }

   

  .RadTabStripBottom_Maestro .rtsLink:hover { background-position: 0 -130px; }

  .RadTabStripBottom_Maestro .rtsLink:hover .rtsOut { background-position: 100% -130px; }

   

  .RadTabStripBottom_Maestro .rtsSelected,

  .RadTabStripBottom_Maestro .rtsSelected:hover { background-position: 0 -156px; }

  .RadTabStripBottom_Maestro .rtsSelected .rtsOut,

  .RadTabStripBottom_Maestro .rtsSelected:hover .rtsOut { background-position: 100% -156px; }

   

  .RadTabStripBottom_Maestro .rtsDisabled:hover { background-position: 0 -182px; }

  .RadTabStripBottom_Maestro .rtsDisabled:hover .rtsOut { background-position: 100% -182px; }

   

  .RadTabStripBottom_Maestro_Baseline .rtsLevel { background-position: 0 -599px; background-repeat: repeat-x; }

   

  /* </orientation: bottom> */

   

  /* <orientation: right> */

   

  .RadTabStripRight_Maestro .rtsUL .rtsLink,

  .RadTabStripRight_Maestro .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left; }

  .RadTabStripRight_Maestro .rtsUL .rtsLink:hover { background-position: 100% -200px; }

  .RadTabStripRight_Maestro .rtsUL .rtsSelected,

  .RadTabStripRight_Maestro .rtsUL .rtsSelected:hover { background-position: 100% -400px; }

   

  /* </orientation: right> */

   

  /* </background positioning: tabs with hovers> */

   

  /* <simplistic sub-item styles> */

   

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 { background: #ffffff; }

   

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsLink,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsLink,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsLink

  {

      color: #000000;

  }

   

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsLink:hover,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsLink:hover,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsLink:hover

  {

      color: #81638a;

  }

   

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsSelected,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsSelected,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsSelected

  {

      text-decoration: underline;

      color: #81638a;

  }

   

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsLink,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsOut,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel2 .rtsIn,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsLink,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsOut,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel3 .rtsIn,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsLink,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsOut,

  .RadTabStrip_Maestro_SimpleSubItems .rtsLevel4 .rtsIn

  {

      background: none;

  }

   

  /* </simplistic sub-item styles> */

   

   DIV.RadTabStrip_Maestro {

   

      BACKGROUND-COLOR: #896494;

   

  }

• Kate Kate

  Posted on Mar 28, 2011 (permalink)

  Hello Thomas Lang,
  
  You can add the following css class selector to change the background color when a tab is selected or hovered:
  

  /*sets the background color to black when selected*/

          div.RadTabStripTop_Maestro .rtsLevel1 .rtsLI .rtsSelected

         {

             background-color: black;

          }

           /*sets the background color to white when hovered*/

         div.RadTabStrip_Maestro .rtsLink:hover

         {

             background-color: White;

         }

  
  
  Greetings,
  Kate
  the Telerik team

  Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Ajax > skin for tabstrip selecting background for selected tab