
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.
7 Answers, 1 is accepted

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

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
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 .rtsLevel
1
.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

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 .rtsLevel
1
.rtsLink {
background-color
: yellowGreen;
background-image
: linear-gradient(yellowGreen,
red
);
}
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
