This is a migrated thread and some comments may be shown as answers.

Styling TabStrip

4 Answers 251 Views

TabStrip

This is a migrated thread and some comments may be shown as answers.

smith spd asked on 15 Jul 2010, 07:51 PM

ui-tab.png

Hello Telerik Team,

I would be grateful if someone can provide with a working CSS and images for the attached requirement.
I have tried a lot using Stylebuilder but unable to Customize the Outlook.
I have tried the below css, taking this as a reference.
One more issue is apart from my Custom.css, I see that RadTabStrip (as located in WebResource.axd) conflicts with the one I built.(As Observed by hitting F12 - developer tools in IE)

.RadTabStrip_Curve

{

padding-bottom:0px;

padding-left:0px;

padding-right:0px;

background-color:LightBlue;

}

.RadTabStrip_Curve .rtsLI,

.RadTabStrip_Curve .rtsLink

{

color: #000;

font: 12px/26px sans-serif;

padding:0px 0px 0px 0px;

margin-right:1px;

}

/*div.RadTabStrip_Curve .rtsLI

{

margin-right: 0px;

}*/

.RadTabStrip_Curve .rtsLink:hover

{

color: #4477dd;

}

.RadTabStrip_Curve .rtsSelected:hover

{

color: #000;

}

.RadTabStripLeft_RadTabStrip_Outlook .rtsSeparator,

.RadTabStripRight_RadTabStrip_Outlook .rtsSeparator

{

background: lightblue;

}

/* <disabled tabs> */

.RadTabStrip_Curve .rtsLevel .rtsDisabled,

.RadTabStrip_Curve .rtsLevel .rtsDisabled:hover

{

color: #aaa;

}

.RadTabStrip_Curve .rtsDisabled,

.RadTabStripLeft_Curve .rtsDisabled,

.RadTabStripRight_Curve .rtsDisabled,

.RadTabStripBottom_Curve .rtsDisabled,

.RadTabStrip_Curve_disabled .rtsDisabled

{

color: #bcb;

cursor: default;

}

/* </disabled tabs> */

/* <scrolling arrows> */

.RadTabStrip_Curve .rtsNextArrow,

.RadTabStrip_Curve .rtsPrevArrow,

.RadTabStrip_Curve .rtsPrevArrowDisabled,

.RadTabStrip_Curve .rtsNextArrowDisabled

{

background-image: url('Images/TabStripHStates.png');

}

/*.RadTabStrip_Curve .rtsIn

{

font: 12px/20px arial,sans-serif;

padding: 0 5px 5px;

}*/

/* </scrolling arrows> */

/* <tab backgrounds> */

.RadTabStripTop_RadTabStrip_Outlook .rtsLevel { background-color: transparent; }

/*.RadTabStripTop_RadTabStrip_Outlook .rtsLevel .rtsLink,

.RadTabStripTop_RadTabStrip_Outlook .rtsLevel .rtsOut,

.RadTabStripBottom_RadTabStrip_Outlook .rtsLevel .rtsLink,

.RadTabStripBottom_RadTabStrip_Outlook .rtsLevel .rtsOut,

.RadTabStripTop_RadTabStrip_Outlook_Baseline .rtsLevel,

.RadTabStripBottom_RadTabStrip_Outlook_Baseline .rtsLevel { background-image:url('TabStrip/tab_Inner_Unselected.png'); }*/

.RadTabStripLeft_RadTabStrip_Outlook .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLink {/* background-image: url('Images/tab_Inner_Unselected.png');*/ }

.RadTabStripLeft_RadTabStrip_Outlook .rtsLast .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLast .rtsLink

{

border-bottom: 1px solid;

}

.RadTabStripRight_RadTabStrip_Outlook .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsLI .rtsDisabled:hover { background-position: 100% 0; }

.RadTabStripRight_RadTabStrip_Outlook .rtsLink:hover { background-position: 100% -200px; }

.RadTabStripRight_RadTabStrip_Outlook .rtsSelected,

.RadTabStripRight_RadTabStrip_Outlook .rtsSelected:hover {background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -400px;}

/* </tab backgrounds> */

/* <background positioning: tabs with hovers> */

/* <orientation: top> */

.RadTabStripTop_RadTabStrip_Outlook .rtsLink { background-position: 0 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsOut { background-position: 100% 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsLink:hover { background-position: 0 -52px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsLink:hover .rtsOut { background-position: 100% -52px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected,

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected:hover { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -26px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected .rtsOut,

.RadTabStripTop_RadTabStrip_Outlook .rtsSelected:hover .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -26px; }

.RadTabStripTop_RadTabStrip_Outlook .rtsDisabled:hover { background-position: 0 0; }

.RadTabStripTop_RadTabStrip_Outlook .rtsDisabled:hover .rtsOut { background-position: 100% 0; }

.RadTabStripTop_RadTabStrip_Outlook_Baseline .rtsLevel { background-position: 0 100%; background-repeat: repeat-x; }

/* </orientation: top> */

/* <orientation: bottom> */

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink { background-position: 0 -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsOut { background-position: 100% -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink:hover { background-position: 0 -130px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsLink:hover .rtsOut { background-position: 100% -130px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected,

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected:hover { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -156px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected .rtsOut,

.RadTabStripBottom_RadTabStrip_Outlook .rtsSelected:hover .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -156px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsDisabled:hover { background-position: 0 -182px; }

.RadTabStripBottom_RadTabStrip_Outlook .rtsDisabled:hover .rtsOut { background-position: 100% -182px; }

.RadTabStripBottom_RadTabStrip_Outlook_Baseline .rtsLevel { background-position: 0 -599px; background-repeat: repeat-x; }

/* </orientation: bottom> */

/* <orientation: right> */

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLink,

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left; }

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsLink:hover { background-position: 100% -200px; }

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsSelected,

.RadTabStripRight_RadTabStrip_Outlook .rtsUL .rtsSelected:hover { background: url('TabStrip/TabStripHStates.gif') no-repeat 0 -400px; }

/* </orientation: right> */

/* </background positioning: tabs with hovers> */

/* <simplistic sub-item styles> */

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 { background: #fff; }

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsSelected,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsSelected,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsSelected

{

text-decoration: underline;

}

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel2 .rtsIn,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel3 .rtsIn,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsLink,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsOut,

.RadTabStrip_RadTabStrip_Outlook_SimpleSubItems .rtsLevel4 .rtsIn

{

background: none;

}

/* </simplistic sub-item styles> */

.RadTabStrip_Curve .rtsLink {

padding-left:0px;

}

.RadTabStrip_Curve .rtsLink .rtsOut {

BACKGROUND-IMAGE: url('TabStrip/tab_Inner_Unselected.png')

}

.RadTabStrip_Curve .rtsLink .rtsIn {

background-image: url('TabStrip/tab_Inner_Unselected.png');

}

DIV.RadTabStrip_Curve .rtsLink:hover .rtsOut {

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

DIV.RadTabStrip_Curve .rtsLink:hover .rtsIn {

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

/*.RadTabStrip_Curve .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; }

.RadTabStrip_Curve .rtsSelected .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 100% -72px; }

.RadTabStrip_Curve .rtsFirst .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -180px; }

.RadTabStrip_Curve .rtsLast .rtsSelected { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 100% -180px; }

.RadTabStrip_Curve .rtsLast .rtsSelected .rtsOut { background: #BBBBBB url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; }*/

DIV.RadTabStrip_Curve .rtsSelected .rtsIn {

/*BACKGROUND-COLOR: #BBBBBB;*/

background: url('TabStrip/TabStripHStates.gif') repeat 0 -72px;

}

DIV.RadTabStrip_Curve .rtsSelected .rtsOut

{

BACKGROUND: url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px;

}

Any help in providing the working css n images to this attached file would be greatly appreciated.

Thanks,

4 Answers, 1 is accepted

answered on 21 Jul 2010, 03:12 PM

tabstrip-curve.zip

Hi Smith,

The easiest way to do a RadTabStrip skin is to get an existing one, edit its sprite to use your images and then adjust the line-height and background positions in the skin. Since your requirement has states with very different heights, you will also need to adjust the line-height for the different states and add some paddings here and there. I did it for you, the modified skin is attached.

All the best,
Kamen Bundev
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

answered on 06 Jun 2011, 08:54 AM

tab1.JPG

TabStripStatesv2.png

can any one modify the CSS skin, i tried to set the position but unable to align properly, check the output image attached, i used style builder and copied css and changed the image. still i am getting the error, i want space between tabs

.RadTabStrip_V2RadTabTest .rtsLI,

.RadTabStrip_V2RadTabTest .rtsLink

{

color: #000;

font: 12px/26px Verdana, Arial, sans-serif;

font-weight:normal;

}

.RadTabStripLeft_V2RadTabTest .rtsSeparator,

.RadTabStripRight_V2RadTabTest .rtsSeparator

{

background: #828282;

}

/* <disabled tabs> */

.RadTabStrip_V2RadTabTest .rtsDisabled

{

color: #aaa;

}

/* </disabled tabs> */

/* <scrolling arrows> */

.RadTabStrip_V2RadTabTest .rtsNextArrow,

.RadTabStrip_V2RadTabTest .rtsPrevArrow,

.RadTabStrip_V2RadTabTest .rtsPrevArrowDisabled,

.RadTabStrip_V2RadTabTest .rtsNextArrowDisabled

{

background-image: url('TabStrip/TabStripStates.png');

}

/* </scrolling arrows> */

/* <tab backgrounds> */

.RadTabStripTop_V2RadTabTest .rtsLevel { background-color: transparent; }

.RadTabStripTop_V2RadTabTest .rtsLevel .rtsLink,

.RadTabStripTop_V2RadTabTest .rtsLevel .rtsOut,

.RadTabStripBottom_V2RadTabTest .rtsLevel .rtsLink,

.RadTabStripBottom_V2RadTabTest .rtsLevel .rtsOut,

.RadTabStripTop_V2RadTabTest_Baseline .rtsLevel,

.RadTabStripBottom_V2RadTabTest_Baseline .rtsLevel { background-image: url('TabStrip/TabStripStatesv2.png'); }

.RadTabStripLeft_V2RadTabTest .rtsLink,

.RadTabStripRight_V2RadTabTest .rtsLink { background-image: url('TabStrip/TabStripVStates.png'); }

.RadTabStripLeft_V2RadTabTest .rtsLast .rtsLink,

.RadTabStripRight_V2RadTabTest .rtsLast .rtsLink

{

border-bottom: 1px solid #898C95;

}

/* </tab backgrounds> */

/* <background positioning: overlapping tabs> */

/* <orientation: top> */

.RadTabStripTop_V2RadTabTest .rtsLink { background-position: 0 0; }

.RadTabStripTop_V2RadTabTest .rtsFirst .rtsLink { background-position: 0 0; }

.RadTabStripTop_V2RadTabTest .rtsOut { background-position: 100% -52px; }

.RadTabStripTop_V2RadTabTest .rtsLast .rtsOut { background-position: 100% 0; }

/* selected tab Left Image : comment added by giri*/

.RadTabStripTop_V2RadTabTest .rtsLI .rtsSelected { background-position: 0 -26px; }

/* selected tab middle Image : comment added by giri*/

.RadTabStripTop_V2RadTabTest .rtsSelected .rtsOut { background-position: 100% 0; }

.RadTabStripTop_V2RadTabTest .rtsLI .rtsAfter { background-position: 0 0; }

.RadTabStripTop_V2RadTabTest .rtsLast .rtsSelected .rtsOut { background-position: 100% -26px; }

.RadTabStripTop_V2RadTabTest_Baseline .rtsLevel { background-position: -10px 100%; background-repeat: repeat-x; }

/* </orientation: top> */

/* </background positioning: overlapping tabs> */

/* <simplistic sub-item styles> */

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel2,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel3,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel4 { background: #fff; }

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel2 .rtsSelected,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel3 .rtsSelected,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel4 .rtsSelected

{

text-decoration: underline;

}

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel2 .rtsLink,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel2 .rtsOut,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel2 .rtsIn,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel3 .rtsLink,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel3 .rtsOut,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel3 .rtsIn,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel4 .rtsLink,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel4 .rtsOut,

.RadTabStrip_V2RadTabTest_SimpleSubItems .rtsLevel4 .rtsIn

{

background: none;

}

/* </simplistic sub-item styles> */