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

2 posts, 0 answers
  1. Jorge Saa-Gerbier
    Jorge Saa-Gerbier avatar
    22 posts
    Member since:
    Dec 2008

    Posted 22 Jun 2009 Link to this post

    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
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 24 Jun 2009 Link to this post

    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.
Back to Top