Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Tabstrip > Cssclass is not working in Tabstrip

• Vino

  Posted on Nov 2, 2006 (permalink)

  To the heading of the Tab Strip i have applied custom css.  To the header font is not getting applied through my css also on mouse over the color of the text is also not getting applied.
  
  
  I am sending the aspx code and also the style sheet class.  Please help as soon as possible.
  
  Code in ASpx:
  
  

  <radTS:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"

  Skin="outlook"

  SelectedIndex="0">

  <Tabs>

  <radTS:Tab ID="Tab1" runat="server" Text="Tab Selected"

  SelectedCssClass="TabHeader_Selected"

  CssClass ="TabHeader_deSelected"

  PageViewID="pvSelected">

  </radTS:Tab>

  <radTS:Tab ID="Tab2"

  SelectedCssClass="TabHeader_Selected"

  CssClass ="TabHeader_deSelected"

  runat="server" Text="Tab unselected" PageViewID="pvUnselected">

  </radTS:Tab>

  </Tabs>

  </radTS:RadTabStrip>
  
  Corresponding Style Sheet Class:
  

  .TabHeader_Selected

  {

  border:Solid 1px #065649;

  background-color:#EAF0F0;

  }

  .TabHeader_Selected a.link

  {

  color:red;

  font-family: Tahoma,sans-serif;

  font-size:small;

  font-style:normal;

  }

  .TabHeader_deSelected a.hover

  {

  color:red;

  }

  .TabHeader_deSelected

  {

  border:Solid 1px Green;

  background-color:#065649;

  color: #FFFFFF;

  text-decoration:none;

  font-family: Tahoma, Arial, Helvetica, sans-serif;

  font-size: 12px;

  }

  .TabHeader_deSelected a.link

  {

  font-family: Tahoma,sans-serif;

  font-style:normal;

  }

• Paul Paul

  Posted on Nov 2, 2006 (permalink)

  Hi Vinodhkumar,
  
  In order to use custom CSS classes for the tabstrip control, you will have to set the Skin property to None.
  
  Best wishes,
  Paul
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• Vino

  Posted on Nov 2, 2006 (permalink)

  Thanks for the reply.
  
  if i make skin="none" then the trip is taking the default images.
  
  I have made the skin="outlook".  the images do not come and also style sheet is getting partially applied.  Text in the Tap strip header is getting the font color, but it does not get the font name, size.  and on mouse over the text color is also not changing.
  

• Paul Paul

  Posted on Nov 2, 2006 (permalink)

  Hi Vinodhkumar,
  
  I think the problem is in the name of the skin that you've set. It should be Skin="Outlook", but not Skin="outlook". Mind the case sensitivity of the skin name. Let me know how it goes.
  
  Best wishes,
  Paul
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• mark baer Intermediate

  Posted on Mar 25, 2011 (permalink)

  So is it still correct that you can not apply a Skin, but override an attribute?  For instance, we like the Web20 skin, but my users want a different background color, not white...I tried to apply a custom CSS for "SelectedTab", but it just picks up the Skin...Is that not allowed?
  
  Thanks

• Prava kafle Intermediate

  Posted on Apr 12, 2011 (permalink)

  Hi,
  
  I want to set  fore color of  selected tabs to "OrangeRed" and for this I used  modified CSS as shown below.  Unfortunately,  it works only on post backs but not on initial page load. 
  
         .rtsSelected , .rtsSelected span
         {
              background-color: transparent !important;
            
             text-align: center;
             color:OrangeRed !important;
             font-weight :bold !important;
             font-size:13px !important;
         }
  
   How can I  set the text of selected tabs to custom color?
  Thanks
  Prava

• Shinu MVP

  Posted on Apr 14, 2011 (permalink)

  Hello Prava,
  
  This behavior is expected when you are not setting any selected tab by default. The rtsSelected is applied for the selected tab. If you do not set any selected tab by default, the  rtsSelected won't apply in initial page loads. Try to set the SelectedIndex/Selected property either from aspx or codebehind..
  
  aspx:
  

  <telerik:RadTabStrip ID="exceptionTabStrip" runat="server" SelectedIndex="0"  MultiPageID="exceptionMultiPage">

  <%--or--%>

   <telerik:RadTabStrip ID="exceptionTabStrip" runat="server"  MultiPageID="exceptionMultiPage">

          <Tabs>

              <telerik:RadTab runat="server" Selected="true"  Text="short"  >

  
  Thanks,
  Shinu.

• Prava kafle Intermediate

  Posted on Apr 14, 2011 (permalink)

  Hi Shinu,
  
  I did set SelectedIndex/Selected property  for Tabstrip but still its not implementing custom cssclass. To use my custom cssclass I  disabled embedded skins by setting EnableEmbeddedSkins="false".   Custom cssclass was implemented only on postback  so, to achieve my objective I used jquery to cause asynchronous postback  on Tabstrip's "OnClientLoadEvent".  I made it work for now but it would be nice and efficient if I could use customclasses without any tricks with jquery.
  
  In the meantime, can you tell me  on client side how can I get selected tabs (parent and child Tab) in  Hierarchical Tab strip.
  
  Thanks
  Prava

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Tabstrip > Cssclass is not working in Tabstrip