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

[Jorge Saa-Gerbier]

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

[Kamen Bundev]

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.