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

How to adjust the padding-left and padding-right, in the new version(2009.1.525.35)?

1 Answer 85 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jorge Saa-Gerbier
Top achievements
Rank 1
Jorge Saa-Gerbier asked on 22 Jun 2009, 06:27 PM
Hi, Telerik Team

after updating from version 2008.3.1314.35 to version 2009.1.527.35 I have lost the design of my TabStrip [Azul], the design "is broken". I explain:

I have a TabStrip (RadTabStrip1)
The code the .aspx is as below:
   
          <telerik:RadTabStrip      
                ID="RadTabStrip1"      
                SelectedIndex="0"      
                runat="server"      
                MultiPageID="RadMultiPage1"    
                CssClass="tabStrip"    
                EnableEmbeddedSkins="False"    
                Skin="Azul"    
                >    
 

My skin "Blue" could handle the padding-left and padding-right, but now, it's not possible.
The code the TabStrip.Azul.css is as below:
.RadTabStrip_Azul  
{  
    line-height: 0;  
    font-size: 0;  
}  
.RadTabStrip_Azul .rtsLI,  
.RadTabStrip_Azul .rtsLink  
{  
    color: #003366;  
    height:28px;  
}  
.RadTabStrip_Azul .rtsLink  
{  
    text-decoration: none;  
    font-family: tahoma, Verdana, Arial, Helvetica, sans-serif;  
    font-size: 12px;  
    line-height: 28px;  
}  
/* ------------------------------------------------------------------------------- */  
/* disabled tabs */  
.RadTabStrip_Azul .rtsDisabled  
{  
    color: #95D5FF;  
    cursor: default;  
}  
.RadTabStrip_Azul_disabled .rtsDisabled  
{  
    color: #95D5FF;  
    cursor: default;  
}  
/* ------------------------------------------------------------------------------- */  
.RadTabStrip_Azul .rtsImg  
{  
    border:0;  
    vertical-align:top;  
    width: 30px;  
    margin: 2px 0;  
}  
 
.RadTabStrip_Azul .rtsTxt  
{  
    padding: 0px 0px 0px 50px;  
}  
 
.RadTabStrip_Azul .rtsLink  
{  
    padding-left: 5px;  
}  
 
/* Orientation: Top */  
 
.RadTabStrip_Azul .rtsLink   
{   
    padding-right: 0px;     /*  Cambiado por mi     */  
    padding-left: 32px;   
}  
.RadTabStrip_Azul .rtsLast .rtsLink   
{   
    padding-right: 16px;   
    padding-left:  16px;   
}  
 
.RadTabStripTop_Azul .rtsIn   
{   
    padding: 4px 0px 4px 32px;   
}  
 
.RadTabStripTop_Azul .rtsLink { background: transparent url('TabStrip/TabStripStates.gif') no-repeat 100% -56px; }  
.RadTabStripTop_Azul .rtsLink .rtsOut { background: transparent url('TabStrip/TabStripStates.gif') no-repeat 0 -84px; }  
.RadTabStripTop_Azul .rtsFirst .rtsLink .rtsOut { background-position: 0 0; }  
.RadTabStripTop_Azul .rtsLast .rtsLink { background-position: 100% 0; }  
/* ------------------------------------------------------------------------------- */  
.RadTabStripTop_Azul .rtsLink:hover  
{  
    color: #95D5FF;  
}  
 
.RadTabStripTop_Azul .rtsSelected   
{  
    color: #FFFFFF;  
}  
/* ------------------------------------------------------------------------------- */  
.RadTabStripTop_Azul .rtsSelected { background-position: 100% -84px; }  
.RadTabStripTop_Azul .rtsFirst .rtsSelected .rtsOut,  
.RadTabStripTop_Azul .rtsSelected .rtsOut { background-position: 0 -28px; }  
.RadTabStripTop_Azul .rtsLast .rtsSelected { background-position: 100% -28px; }  
 
.RadTabStripTop_Azul .rtsAfter .rtsOut { background-position: 0 -56px; }  
 
.RadTabStripTop_Azul .rtsDisabled.rtsAfter .rtsOut { background-position: 0 -56px; }  
 
.RadTabStripLeft_Azul .rtsIn { padding: 4px 15px 4px 15px; }  
.RadTabStripLeft_Azul .rtsLast .rtsIn { padding-bottom: 4px; }  
.RadTabStripLeft_Azul .rtsLI .rtsLink { padding: 0; }  
/* ------------------------------------------------------------------------------- */  
.RadTabStripLeft_Azul .rtsLink:hover  
{  
    color: #ffffff;  
}  
.RadTabStripLeft_Azul .rtsSelected   
{   
    color: #ffffff;   
}  
/* ------------------------------------------------------------------------------- */  
.RadTabStripLeft_Azul .rtsSelected { background-position: 0 -28px; }  
 
 

I have done a new skin (Skin_TabStrip2), more "simple" from skin "WebBlue" and I can't adjust the padding-left and padding-right.

The code the RadTabStrip.Skin_TabStrip2.css is as below:
.RadTabStrip_Skin_TabStrip2  
{  
 
}  
 
.RadTabStrip_Skin_TabStrip2 .rtsLI,  
.RadTabStrip_Skin_TabStrip2 .rtsLink  
{  
    color: #000;  
    font: 12px/26px tahoma, Verdana, Arial, Helvetica, sans-serif;  
 
}  
 
.RadTabStrip_Skin_TabStrip2 .rtsLI,  
.RadTabStrip_Skin_TabStrip2 .rtsLink  
{  
    color: #fff;  
}  
 
.RadTabStrip_Skin_TabStrip2 .rtsLink:hover,  
.RadTabStrip_Skin_TabStrip2 .rtsSelected  
{  
    color: #0f3789;  
}  
 
.RadTabStripLeft_Skin_TabStrip2  .rtsSeparator,  
.RadTabStripRight_Skin_TabStrip2 .rtsSeparator  
{  
    background: #3D556C;  
}  
 
/* <disabled tabs> */  
.RadTabStrip_Skin_TabStrip2 .rtsLevel .rtsDisabled,  
.RadTabStrip_Skin_TabStrip2 .rtsLevel .rtsDisabled:hover  
{  
    color: #0f3789; /*  dddddd  */  
}  
/* </disabled tabs> */  
 
/* <tab backgrounds> */  
.RadTabStripTop_Skin_TabStrip2 .rtsLevel                            { background-color: transparent; }  
 
.RadTabStripTop_Skin_TabStrip2    .rtsLevel .rtsLink,  
.RadTabStripTop_Skin_TabStrip2    .rtsLevel .rtsOut,  
.RadTabStripBottom_Skin_TabStrip2 .rtsLevel .rtsLink,  
.RadTabStripBottom_Skin_TabStrip2 .rtsLevel .rtsOut,  
.RadTabStripTop_Skin_TabStrip2_Baseline     .rtsLevel,  
.RadTabStripBottom_Skin_TabStrip2_Baseline  .rtsLevel               { background-image: url('TabStrip/TabStripStates.png'); }  
/* </tab backgrounds> */  
 
 
/* <background positioning: tabs with hovers> */  
 
/* <orientation: top> */  
.RadTabStripTop_Skin_TabStrip2 .rtsLink                             { background-position: 0px  0px; }  
.RadTabStripTop_Skin_TabStrip2 .rtsOut                              { background-position: 100% 0px; }  
 
.RadTabStripTop_Skin_TabStrip2 .rtsLink:hover                       { background-position: 0px  -52px; }  
.RadTabStripTop_Skin_TabStrip2 .rtsLink:hover .rtsOut               { background-position: 100% -52px; }  
 
.RadTabStripTop_Skin_TabStrip2 .rtsSelected,  
.RadTabStripTop_Skin_TabStrip2 .rtsSelected:hover                   { background-position: 0px  -26px; }  
 
.RadTabStripTop_Skin_TabStrip2 .rtsSelected .rtsOut,  
.RadTabStripTop_Skin_TabStrip2 .rtsSelected:hover .rtsOut           { background-position: 100% -26px; }  
 
.RadTabStripTop_Skin_TabStrip2 .rtsDisabled:hover                   { background-position: 0px  0px; }  
.RadTabStripTop_Skin_TabStrip2 .rtsDisabled:hover .rtsOut           { background-position: 100% 0px; }  
 
.RadTabStripTop_Skin_TabStrip2_Baseline .rtsLevel                   { background-position: 0px  100%; background-repeat: repeat-x; }  
/* </orientation: top> */  
 
 
/* </background positioning: tabs with hovers> */  
 
.RadTabStrip_Skin_TabStrip2 .rtsText  
{  
 
}  
 

I need some help for impleting this.

Thanks for you help,
Jorge Saa-Gerbier

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 24 Jun 2009, 11:07 AM
Hello Jorge,

In Q1 2009, all sizing styles were moved to the base stylesheet, thus you can't directly override it while it is in effect. In order to do it, you need to raise the specificity of your classes by simply adding the element type (which is div for all RadControls) in front of every class, like this:
div.RadTabStrip_Skin_TabStrip2 .rtsLI, 
div.RadTabStrip_Skin_TabStrip2 .rtsLink 

    color: #000; 
    font: 12px/26px tahoma, Verdana, Arial, Helvetica, sans-serif; 
 } 
div.RadTabStrip_Skin_TabStrip2 .rtsLI, 
div.RadTabStrip_Skin_TabStrip2 .rtsLink 

    color: #fff; 

div.RadTabStrip_Skin_TabStrip2 .rtsLink:hover, 
div.RadTabStrip_Skin_TabStrip2 .rtsSelected 

    color: #0f3789; 


If you still have problems with your skin - open a support ticket and send the skin to me plus a screenshot of the old skin (how it should look like) and I will adjust it for you.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Tags
TabStrip
Asked by
Jorge Saa-Gerbier
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or