Styling TabStrip

[smith spd]

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,

[Kamen Bundev]

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

[Hiren]

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> */

[Kate]

Hi Giri,

I have just answered your question in the following forum post.

All the best,
Kate
the Telerik team

[Hiren]

Thanks KATE