Changing the tab text and font size

[vairam]

Hi

I am using the tab strip control with skin="Office 2007"

I need to change the Tab text to Bold and change the size also.because this skin text size is small.


Thanks
Vairam

[Princy]

Hello Vairam,

Try out the following code to set the font style for RadTabStrip:
css:

 <style type="text/css">
    .RadTabStrip_Office2007 .rtsIn
     {
       font-weight:bold !important;
       font-size:larger !important;
     }

 </style>

Thanks
Princy.

[Augusto Cosatti]

Hello.

I have a tab strip defined with the Default Skin. The font is fine when the tab is displayed. However when I move the mouse over the tab, the font becomes larger and underlined.

How can I define the font attributes when the mouse is over ?

Thanks for you support.
Regards
Augusto

[Paul]

Hi Augusto,

I think it will be best if you can provide a live URL or open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

All the best,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Augusto Cosatti]

Hi Paul.

I have found out why the font is changing when the mouse is over. I have defined in my application a "a." default style and this default style applied also to the Tab strip.

I have to defined a new style for the Tabstrip and it works.

Thanks for your help
Augusto

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" CssClass="TabStrip"
SelectedIndex="0" Width="100%">
<Tabs>
<telerik:RadTab Text="Tab Strip 1" CssClass="TabStrip">
</telerik:RadTab>
<telerik:RadTab Text="Tab Strip 2" CssClass="TabStrip">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>

 

CSS file:

.TabStrip

{

color: #000; 
text-decoration: none;
font: 12px/26px "Segoe UI", Arial, sans-serif;
}

 

 

 

 

[Augusto Cosatti]

Hi again.

Actually we only need to set the CssClass in the RadTab declaration.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
SelectedIndex="0" Width="100%">
<Tabs>
<telerik:RadTab Text="Tab Strip 1" CssClass="TabStrip">
</telerik:RadTab>
<telerik:RadTab Text="Tab Strip 2" CssClass="TabStrip">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>

and the style is 

.TabStrip:hover
{
color: #000;
text-decoration: none;
font: 12px/26px "Segoe UI", Arial, sans-serif;
}