Skins in widgets - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 04-Feb-2011 00:00

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.

Posted by Community Admin on 09-Feb-2011 00:00

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

Posted by Community Admin on 10-Oct-2014 00:00

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');

This thread is closed