+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Skins in widgets

Skins in widgets

3 posts, 0 answered
  1. Jose Antonio
    Jose Antonio avatar
    13 posts
    Registered:
    19 Jul 2010
    04 Feb 2011
    Link to this post
    Hi, actually my problem is style a navigation control, i saw the option of specified the skin but, in what place i put it?, i put the skin in my theme but don't work. If you show me a specific css document to style navigation control, it would be great.
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    09 Feb 2011
    Link to this post
    Hello Jose ,

    When you specify a "custom skin" string the default navigation theme is dropped and the string is appended to your navigation selector. For example if you use RadTabStrip and specify a skin name Jose you will get a css selector with a name RadTabStrip_Jose. With this selector you can modify the specific navigation control.

    In the tutorial How to create a template there is a step by step guide about that.


    Regards,
    Jordan
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. ashishpandey21jan
    ashishpandey21jan avatar
    1 posts
    Registered:
    27 Sep 2014
    10 Oct 2014
    Link to this post

    helo sir,

    please tell mi how the bottom border shows like first image in image 2,actully in first image Tabstrip skin used office 2007 and when we updated the version of project by telerik ui controls we make a custom skin of RadTabStrip of office 2007 by style builder but the problem is this is not shows the bottom border like image 1 ,

    i attached 

    1)image 1

    2)image 2

    2)custom skin made by style builder of RadtabStrip -office 2007

    css is as:

    .RadTabStrip_RadStripn{color:black;font:12px "Segoe UI",Arial,Helvetica,sans-serif;line-height:26px}.RadTabStrip_RadStripn .rtsGhostTab{border-color:#a7bedb;border-radius:5px;color:#00156e;background-color:#ccdbee}.RadTabStrip_RadStripn .rtsLevel{background:#ccdbee}.RadTabStrip_RadStripn .rtsLevel.rtsLevel2,.RadTabStrip_RadStripn .rtsLevel.rtsLevel3{background-color:#ccdbee;background-image:url('TabStrip/Level2Bg.png');background-repeat:repeat-x}.RadTabStrip_RadStripn .rtsLI{},.RadTabStrip_RadStripn .rtsLink{color:black;font:12px/26px "Segoe UI",Arial,Helvetica,sans-serif}.RadTabStrip_RadStripn .rtsLink{background-image:none}.RadTabStrip_RadStripn .rtsLink:hover{text-decoration:underline}.RadTabStrip_RadStripn .rtsOut{background-image:none}.RadTabStrip_RadStripn .rtsSelected,.RadTabStrip_RadStripn .rtsSelected:hover{text-decoration:underline}.RadTabStrip_RadStripn .rtsDisabled{color:#8d8d8d}.RadTabStrip_RadStripn .rtsLevel1{background-color:#bfdbff;background-image:url('TabStrip/TabStripStates.png');background-position:0 100%;background-repeat:no-repeat}.RadTabStrip_RadStripn .rtsLevel1 .rtsLink{background-position:0 0;color:#00156e}.RadTabStrip_RadStripn .rtsLevel1 .rtsLink:hover{background-position:0 -52px}.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected,.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected:hover{text-decoration:none;background-position:0 -26px}.RadTabStrip_RadStripn .rtsLevel1 .rtsOut{background-image:url('TabStrip/TabStripStates.png');background-position:100% 0}.RadTabStrip_RadStripn .rtsLevel1 .rtsLink:hover .rtsOut{background-position:100% -52px}.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected .rtsOut,.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected:hover .rtsOut{background-position:100% -26px}.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabled{color:#8d8d8d}.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabled:hover{background-position:0 0;text-decoration:none}.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabled:hover .rtsOut{background-position:100% 0}.RadTabStrip_RadStripn .rtsLevel2{background-position:0 0}.RadTabStrip_RadStripn .rtsLevel3{background-position:0 -26px}.RadTabStrip_RadStripn .rtsNextArrow,.RadTabStrip_RadStripn .rtsPrevArrow,.RadTabStrip_RadStripn .rtsPrevArrowDisabled,.RadTabStrip_RadStripn .rtsNextArrowDisabled{background-image:url('TabStrip/TabStripStates.png')}.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1{background-image:none}.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1 .rtsLink{background-image:url('TabStrip/TabStripVStates.png');*zoom:1}.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1 .rtsOut{background-image:none}.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel2{background-image:none}.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel3{background-image:none}.RadTabStripBottom_RadStripn .rtsLevel.rtsLevel2,.RadTabStripBottom_RadStripn .rtsLevel.rtsLevel3{background-image:none}.RadTabStripBottom_RadStripn .rtsLevel1{background-position:0 -599px;background-repeat:repeat-x}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLink{background-position:0 -130px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLink:hover{background-position:0 -182px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsOut{background-position:100% -130px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLink:hover .rtsOut{background-position:100% -182px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected,.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected:hover{background-position:0 -156px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected .rtsOut,.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected:hover .rtsOut{background-position:100% -156px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsDisabled:hover{background-position:0 -599px}.RadTabStripBottom_RadStripn .rtsLevel1 .rtsDisabled:hover .rtsOut{background-position:100% -599px}.RadTabStripBottom_RadStripn .rtsLevel2{background-image:none}.RadTabStripBottom_RadStripn .rtsLevel3{background-image:none}.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLink{background-position:100% 0}.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLink:hover{background-position:0 -200px}.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLink.rtsSelected{background-position:0 -400px}.RadTabStripLeft_RadStripn .rtsLevel1 .rtsDisabled:hover{background-position:100% 0}.RadTabStripLeft_RadStripn .rtsSeparator{background:#6f6f6f}.RadTabStripRight_RadStripn .rtsLevel1 .rtsLink{background-position:100% 0}.RadTabStripRight_RadStripn .rtsLevel1 .rtsLink:hover{background-position:100% -200px}.RadTabStripRight_RadStripn .rtsLevel1 .rtsLink.rtsSelected{background-position:100% -400px}.RadTabStripRight_RadStripn .rtsLevel1 .rtsDisabled:hover{background-position:100% 0}.RadTabStripRight_RadStripn .rtsSeparator{background:#6f6f6f}html .RadTabStrip_RadStripn_disabled .rtsLevel1 .rtsLink{color:#8d8d8d;cursor:default}html .RadTabStrip_RadStripn_disabled .rtsLevel1 .rtsLink:hover{text-decoration:none}div.RadTabStrip_Office2010Blue a.rtsLink:focus{outline-color:#6f6f6f}div.RadTabStrip_Office2010Blue a.rtsLink:focus:after{border-color:#6f6f6f \9}.rtsDropClue_RadStripn{background-image:url('Common/rtsDropClueSprite.png')}.rtsDropClueTop_RadStripn{background-position:0 -20px}.rtsDropClueRight_RadStripn{background-position:0 -30px}.rtsDropClueBottom_RadStripn{background-position:0 0}.rtsDropClueLeft_RadStripn{background-position:0 -10px}



     div.RadTabStrip_RadStripn .rtsLevel1 {

    background-color: rgb(204, 219, 241);

    }

     div.RadTabStrip_RadStripn .rtsLink {

    font-weight: bold;

    text-align: center;

    }

     div.RadTabStrip_RadStripn .rtsLink:hover {

    text-decoration: none;

    text-align: center;

    }

     div.RadTabStrip_RadStripn .rtsSelected {

    text-align: center;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover {

    text-align: center;

    }

     div.RadTabStrip_RadStripn .rtsDisabled {

    text-align: center;

    }

     div.RadTabStrip_RadStripn .rtsDisabled:hover {

    text-align: center;

    }












     div.RadTabStrip_RadStripn .rtsSelected .rtsIn {

    margin-top: 0px;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover .rtsIn {

    margin-top: 0px;

    }

     div.RadTabStrip_RadStripn .rtsLevel1 {

    background-image: none;

    }

     div.RadTabStrip_RadStripn .rtsLink {

    color: rgb(0, 21, 110);

    font-family: Segoe UI, Arial, Helvetica, sans-serif;

    }

     div.RadTabStrip_RadStripn .rtsSelected {

    background-image: url('TabStrip/tabLeftOn.gif');

    background-repeat: repeat-y;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover {

    background-image: url('TabStrip/tabLeftOn.gif');

    background-repeat: repeat-y;

    }

     div.RadTabStrip_RadStripn .rtsSelected .rtsOut {

    background-image: url('TabStrip/tabRightOn.gif');

    background-repeat: repeat-y;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover .rtsOut {

    background-image: url('TabStrip/tabRightOn.gif');

    background-repeat: repeat-y;

    }

     div.RadTabStrip_RadStripn .rtsSelected .rtsIn {

    padding-top: 0px;

    margin-top: 0px;

    background-image: url('TabStrip/btn-1.jpg');

    background-repeat: repeat;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover .rtsIn {

    padding-top: 0px;

    margin-top: 0px;

    background-image: url('TabStrip/btn-1.jpg');

    background-repeat: repeat;

    }




















     div.RadTabStrip_RadStripn {

    padding-top: 0px;

    }

     div.RadTabStrip_RadStripn .rtsLink {

    padding-top: 0px;

    margin-top: 5px;

    }

     div.RadTabStrip_RadStripn .rtsLink .rtsOut {

    margin-top: 0px;

    padding-top: 0px;

    border-top-style: solid;

    border-top-width: 0px;

    }

     div.RadTabStrip_RadStripn .rtsLink .rtsIn {

    margin-top: 0px;

    padding-top: 1px;

    background-image: none;

    }

     div.RadTabStrip_RadStripn .rtsSelected {

    background-image: url('TabStrip/tabLeftOn.gif');

    background-repeat: repeat;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover {

    background-image: url('TabStrip/tabLeftOn.gif');

    background-repeat: repeat;

    }

     div.RadTabStrip_RadStripn .rtsSelected .rtsOut {

    margin-bottom: 0px;

    padding-bottom: 0px;

    border-bottom-style: solid;

    border-bottom-width: 0px;

    padding-top: 1px;

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover .rtsOut {

    margin-bottom: 0px;

    padding-bottom: 0px;

    border-bottom-style: solid;

    border-bottom-width: 0px;

    padding-top: 1px;

    }

     div.RadTabStrip_RadStripn .rtsSelected .rtsIn {

    margin-top: 0px;

    border-top-style: solid;

    border-top-width: 0px;

    padding-top: 0px;

    background-image: url('TabStrip/btn-1.jpg');

    }

     div.RadTabStrip_RadStripn .rtsSelected:hover .rtsIn {

    margin-top: 0px;

    border-top-style: solid;

    border-top-width: 0px;

    padding-top: 0px;

    background-image: url('TabStrip/btn-1.jpg');

    }
3 posts, 0 answered