Skins in widgets - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Skins in widgets

  • Skins in widgets
  • 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.
  • 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
  • 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_RadStripncolor:black;font:12px "Segoe UI",Arial,Helvetica,sans-serif;line-height:26px.RadTabStrip_RadStripn .rtsGhostTabborder-color:#a7bedb;border-radius:5px;color:#00156e;background-color:#ccdbee.RadTabStrip_RadStripn .rtsLevelbackground:#ccdbee.RadTabStrip_RadStripn .rtsLevel.rtsLevel2,.RadTabStrip_RadStripn .rtsLevel.rtsLevel3background-color:#ccdbee;background-image:url('TabStrip/Level2Bg.png');background-repeat:repeat-x.RadTabStrip_RadStripn .rtsLI,.RadTabStrip_RadStripn .rtsLinkcolor:black;font:12px/26px "Segoe UI",Arial,Helvetica,sans-serif.RadTabStrip_RadStripn .rtsLinkbackground-image:none.RadTabStrip_RadStripn .rtsLink:hovertext-decoration:underline.RadTabStrip_RadStripn .rtsOutbackground-image:none.RadTabStrip_RadStripn .rtsSelected,.RadTabStrip_RadStripn .rtsSelected:hovertext-decoration:underline.RadTabStrip_RadStripn .rtsDisabledcolor:#8d8d8d.RadTabStrip_RadStripn .rtsLevel1background-color:#bfdbff;background-image:url('TabStrip/TabStripStates.png');background-position:0 100%;background-repeat:no-repeat.RadTabStrip_RadStripn .rtsLevel1 .rtsLinkbackground-position:0 0;color:#00156e.RadTabStrip_RadStripn .rtsLevel1 .rtsLink:hoverbackground-position:0 -52px.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected,.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected:hovertext-decoration:none;background-position:0 -26px.RadTabStrip_RadStripn .rtsLevel1 .rtsOutbackground-image:url('TabStrip/TabStripStates.png');background-position:100% 0.RadTabStrip_RadStripn .rtsLevel1 .rtsLink:hover .rtsOutbackground-position:100% -52px.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected .rtsOut,.RadTabStrip_RadStripn .rtsLevel1 .rtsSelected:hover .rtsOutbackground-position:100% -26px.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabledcolor:#8d8d8d.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabled:hoverbackground-position:0 0;text-decoration:none.RadTabStrip_RadStripn .rtsLevel1 .rtsDisabled:hover .rtsOutbackground-position:100% 0.RadTabStrip_RadStripn .rtsLevel2background-position:0 0.RadTabStrip_RadStripn .rtsLevel3background-position:0 -26px.RadTabStrip_RadStripn .rtsNextArrow,.RadTabStrip_RadStripn .rtsPrevArrow,.RadTabStrip_RadStripn .rtsPrevArrowDisabled,.RadTabStrip_RadStripn .rtsNextArrowDisabledbackground-image:url('TabStrip/TabStripStates.png').RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1background-image:none.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1 .rtsLinkbackground-image:url('TabStrip/TabStripVStates.png');*zoom:1.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel1 .rtsOutbackground-image:none.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel2background-image:none.RadTabStrip_RadStripn.RadTabStripVertical .rtsLevel3background-image:none.RadTabStripBottom_RadStripn .rtsLevel.rtsLevel2,.RadTabStripBottom_RadStripn .rtsLevel.rtsLevel3background-image:none.RadTabStripBottom_RadStripn .rtsLevel1background-position:0 -599px;background-repeat:repeat-x.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLinkbackground-position:0 -130px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLink:hoverbackground-position:0 -182px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsOutbackground-position:100% -130px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsLink:hover .rtsOutbackground-position:100% -182px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected,.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected:hoverbackground-position:0 -156px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected .rtsOut,.RadTabStripBottom_RadStripn .rtsLevel1 .rtsSelected:hover .rtsOutbackground-position:100% -156px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsDisabled:hoverbackground-position:0 -599px.RadTabStripBottom_RadStripn .rtsLevel1 .rtsDisabled:hover .rtsOutbackground-position:100% -599px.RadTabStripBottom_RadStripn .rtsLevel2background-image:none.RadTabStripBottom_RadStripn .rtsLevel3background-image:none.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLinkbackground-position:100% 0.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLink:hoverbackground-position:0 -200px.RadTabStripLeft_RadStripn .rtsLevel1 .rtsLink.rtsSelectedbackground-position:0 -400px.RadTabStripLeft_RadStripn .rtsLevel1 .rtsDisabled:hoverbackground-position:100% 0.RadTabStripLeft_RadStripn .rtsSeparatorbackground:#6f6f6f.RadTabStripRight_RadStripn .rtsLevel1 .rtsLinkbackground-position:100% 0.RadTabStripRight_RadStripn .rtsLevel1 .rtsLink:hoverbackground-position:100% -200px.RadTabStripRight_RadStripn .rtsLevel1 .rtsLink.rtsSelectedbackground-position:100% -400px.RadTabStripRight_RadStripn .rtsLevel1 .rtsDisabled:hoverbackground-position:100% 0.RadTabStripRight_RadStripn .rtsSeparatorbackground:#6f6f6fhtml .RadTabStrip_RadStripn_disabled .rtsLevel1 .rtsLinkcolor:#8d8d8d;cursor:defaulthtml .RadTabStrip_RadStripn_disabled .rtsLevel1 .rtsLink:hovertext-decoration:nonediv.RadTabStrip_Office2010Blue a.rtsLink:focusoutline-color:#6f6f6fdiv.RadTabStrip_Office2010Blue a.rtsLink:focus:afterborder-color:#6f6f6f \9.rtsDropClue_RadStripnbackground-image:url('Common/rtsDropClueSprite.png').rtsDropClueTop_RadStripnbackground-position:0 -20px.rtsDropClueRight_RadStripnbackground-position:0 -30px.rtsDropClueBottom_RadStripnbackground-position:0 0.rtsDropClueLeft_RadStripnbackground-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');