How to edit Css files for RadTabStrip

[p]

Hi,

I am following this link to implement RadTabStrip:

http://demos.telerik.com/ASPNET/Prometheus/TabStrip/Examples/Appearance/CustomCssClasses/DefaultCS.aspx

My problem is the following:

1. I want to align the text for the tabs in the center. At present, they are getting aligned to the left by default.

2. The enabled tab should have the text in black and the not-selected tab should have text in white.

Please let me know how is that possible.

Thanks.

[Yana]

Hello,

1. The text for the tabs is aligned in the centre by default, it has equal padding on both sides.
2. Please use cssClass and SelectedCssClass  as in the example or you can set these colors like this:

<style type="text/css">
  .RadTabStrip_Default .rtsLink {
          color: white !important;
   }
  .RadTabStripTop_Default .rtsSelected,
  .RadTabStripTop_Default .rtsSelected:hover {
          color: black !important;
   }
</style>

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[p]

Hi Yana,

Thanks for your reply.

1. It works now.
2. still does not work. I tried using the following: 

 

<telerik:RadTabStrip AutoPostBack="true" ID="TabStrip" runat="server" MultiPageID="RadMultiPage1"

 

 

EnableEmbeddedSkins="False" SelectedIndex="0" Align="Center">

 

 

<Tabs>

 

 

<telerik:RadTab PageViewID="PageView0" Text="Details" SelectedCssClass="SelectedTab"

 

 

runat="server" Font-Size="8" Font-Names="Verdana" CssClass="UnselectedTab"

 

 

Font-Underline="false" Width="33%" Height="20px" Selected = "true">

 

 

</telerik:RadTab>

 

 

<telerik:RadTab PageViewID="PageView1" Text="Elementen boekingsomschrijving" CssClass="UnselectedTab"

 

 

runat="server" Font-Size="8" Font-Names="Verdana" Font-Underline="false" Width="33%" SelectedCssClass="SelectedTab"

 

 

Height="20px">

 

 

</telerik:RadTab>

 

 

</Tabs>

 

 

</telerik:RadTabStrip>

My css looks like this:

 

 

.SelectedTab

 

 

 

{

 

background-color: #bee903;

 

 

font-size : 8;

 

 

font-family : "Verdana";

 

 

color: Black;

 

 

text-align: center;

 

}

 

 

.UnselectedTab

 

 

 

{

 

background-color: #7e9a0e;

 

 

font-size : 8;

 

 

font-family : "Verdana";

 

 

color: White;

 

 

text-align: center;

 

}

This does not seem to work! Please help.

[Yana]

Hi,

Please use fixed width for tabs instead of percentages.

All the best,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rohit]

Can you let me know as to how to change the color of the indivudual tab in Telerik:RadTab control without setting "Enableembeddedskins = false"
By default I am using "Default" as default skin which has tab color as light gray.

Thanks

[Yana]

Hello Rohit,

You can set CssClass property of the tab as demonstrated here.

Kind regards,
Yana
the Telerik team

[Rohit]

Hi,
Thanks fro your reply.

The demo shows how to change the font style of the tab text.
I want to change the color of the tab itself. By default I am using "Default" as default skin which has tab color as light gray.
Keeping the border style and font style same, how can I change the color of default gray of tab to some other color.
Attached is what our requirement is. I have checked that all default available skins of Telerik so not provide such tab skin style.

Awaiting for your reply.

Thanks and Regards

[Yana]

Hello Rohit,

Could you please tell us which version of the controls exactly you're using?

All the best,
Yana
the Telerik team

[Rohit]

Hi,

I am using 2010.3.1109.40 version of  Telerik control.

[Yana]

Hi Rohit,

In this case you should modify the background sprite image of the Default skin and overwrite only the following css style:

div.RadTabStripTop_Default .rtsLevel .rtsLink,
div.RadTabStripTop_Default .rtsLevel .rtsOut,
div.RadTabStripBottom_Default .rtsLevel .rtsLink,
div.RadTabStripBottom_Default .rtsLevel .rtsOut,
div.RadTabStripTop_Default_Baseline .rtsLevel,
div.RadTabStripBottom_Default_Baseline .rtsLevel {
   background-image: url('newTabStripStates.png');
}

I've attached the backround image and here the sprite is explained in details.

All the best,
Yana
the Telerik team