This is a migrated thread and some comments may be shown as answers.

Customize only one aspect of skin for Tabstrip

7 Answers 74 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth asked on 23 Jul 2015, 03:20 PM

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

Sort by
0
Kurt Kluth
Top achievements
Rank 1
answered on 23 Jul 2015, 03:24 PM
<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>
0
Aneliya Petkova
Telerik team
answered on 24 Jul 2015, 07:44 AM
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
0
Kurt Kluth
Top achievements
Rank 1
answered on 24 Jul 2015, 01:04 PM

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

0
Aneliya Petkova
Telerik team
answered on 27 Jul 2015, 10:16 AM
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
0
Ryan
Top achievements
Rank 1
answered on 11 Aug 2015, 01:29 PM

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

0
Magdalena
Telerik team
answered on 13 Aug 2015, 08:20 AM
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
0
Ryan
Top achievements
Rank 1
answered on 13 Aug 2015, 06:01 PM
Thank you Magdalena, updating the DLL's helped.
Tags
TabStrip
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Kurt Kluth
Top achievements
Rank 1
Aneliya Petkova
Telerik team
Ryan
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or