Customize only one aspect of skin for Tabstrip

[Kurt Kluth]

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.

 

 

[Kurt Kluth]

<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>

[Aneliya Petkova]

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

[Kurt Kluth]

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

[Aneliya Petkova]

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

[Ryan]

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);
}

[Magdalena]

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

[Ryan]

Thank you Magdalena, updating the DLL's helped.