Customize only one aspect of skin for Tabstrip

8 posts, 0 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 23 Jul 2015 Link to this post

    Using the Telerik skin throughout our site but using the Black skin for our Tabstrips.  Have the requirement to change the color of non-selected tabs.  Is it possible to still utilize the skin but change just this one element?  In the image attached, need to lighten the background color of the "Dates" tab.

     

     

  2. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 23 Jul 2015 in reply to Kurt Kluth Link to this post

    <telerik:radtabstrip id="_tsAuditing" runat="server" multipageid="_mpAudit" width="98%" align="left"  autopostback="false" style="margin-left: auto; margin-right: auto;" Skin="Black">
       <Tabs>
           <telerik:RadTab PageViewID="KeyData_PageView" Text="Key Data" Selected="True"/>
           <telerik:RadTab PageViewID="Dates_PageView" Text="Dates" Visible="true" />
       </Tabs>
    </telerik:radtabstrip>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 24 Jul 2015 Link to this post

    Hi Kurt,

    You can change the background-color of the tabs when RadTabStrip is in Classic render mode if you make a custom sprite for this control. Please check our documentation for more information on how to create custom skin using sprites:
    http://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/appearance-and-styling/sprite-guide
    http://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/appearance-and-styling/tutorial-creating-a-custom-skin-using-sprite

    It would be much easier if you switch your RadTabStrip to Lightweight render mode. Then you will need only CSS to change the styles.

    If you decide to use Lightweight RadTabStrip and you need assistance to override the background-color of RadTabs, I will be glad to assist you further.

    Regards,
    Aneliya Petkova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 24 Jul 2015 in reply to Aneliya Petkova Link to this post

    Aneliya,

    It looks like going with the RadTabStrip in Lightweight render mode would be the best option.  I attempted to search from examples but your help would be appreciated.

    Thanks

  6. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 27 Jul 2015 Link to this post

    Hi Kurt,

    To change the background-color of non-selected tabs when RadTabStrip is in Lightweight render mode, you need to add the following CSS to your page:
    html .RadTabStrip .rtsLevel1 .rtsLink {
        background-color: yellowGreen;
        background-image: linear-gradient(yellowGreen, red);
    }

    Please note that this style doesn't include hover state of the tabs.

    Attached you may find a sample project. I also took a screen-shot showing how the RadTabStrip is displayed at my side.

    Hope this will be helpful.

    Regards,
    Aneliya Petkova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Ryan
    Ryan avatar
    17 posts
    Member since:
    Dec 2012

    Posted 11 Aug 2015 in reply to Aneliya Petkova Link to this post

    Aneliya,

     I set the control to lightweight mode and tried your CSS but the results were not as expected. Instead of coloring the tabs it just colored the background around the tabs. I've attached a screenshot that shows this.

     Here's the code used for the tabstrip:

    <telerik:radtabstrip id="_tsAuditing" runat="server" multipageid="_mpAudit" width="98%" align="left"  autopostback="false" style="margin-left: auto; margin-right: auto;" Skin="Black" RenderMode="Lightweight" CssClass="RadTabStrip_Custom">
                           <Tabs>
                               <telerik:RadTab PageViewID="KeyData_PageView" Text="Key Data" Selected="True" ToolTip="Key Audit Data"/>
                               <telerik:RadTab PageViewID="Dates_PageView" Text="Dates" Visible="true" ToolTip="Audit Dates" />
                           </Tabs>
                       </telerik:radtabstrip>

     

    And the CSS used:

    html .RadTabStrip_Custom .rtsLevel1 .rtsLink {
        background-color: yellowGreen;
        background-image: linear-gradient(yellowGreen, red);
    }

  8. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 13 Aug 2015 Link to this post

    Hi Ryan,

    The layout of the radTabStrip on the image that you had provided is classic render mode layout. Please, make you sure that you are using the last version dll-s (at least 2015.2.623) and also that there is no other RadTabStrip control in the classic render mode.

    Do not hesitate to contact us if you have other questions.

    Regards,
    Magdalena
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Ryan
    Ryan avatar
    17 posts
    Member since:
    Dec 2012

    Posted 13 Aug 2015 in reply to Magdalena Link to this post

    Thank you Magdalena, updating the DLL's helped.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017