Hello Tom,
In general there are two stylesheets that are applied to all of our controls. The first one is the baseStyleSheet (
added in Q3 2009 release) and the second one is specific for its skin. Since the background-position, the width and the height of the scrolling arrows are applied through the baseStyleSheet you will need to override it by
raising the specificity (you can use the code below). If you want to learn more about specificity, there is an excellent article that you can read
here.
/*applying height and width to the arrows*/
div.RadTabStrip .rtsPrevArrow,
div.RadTabStrip .rtsNextArrow,
div.RadTabStrip .rtsPrevArrowDisabled,
div.RadTabStrip .rtsNextArrowDisabled
{
height: 18px;
line-height: 18px;
margin-top: 5px;
width: 18px;
}
/* representing the current position of the arrows*/
div.RadTabStrip .rtsPrevArrow {
background-position: 0 -208px;
}
div.RadTabStrip .rtsNextArrow {
background-position: -18px -208px;
}
div.RadTabStrip .rtsPrevArrow:hover {
background-position: -36px -208px;
}
div.RadTabStrip .rtsNextArrow:hover {
background-position: -54px -208px;
}
div.RadTabStrip .rtsPrevArrowDisabled,
div.RadTabStrip .rtsPrevArrowDisabled:hover {
background-position: -72px -208px;
}
div.RadTabStrip .rtsNextArrowDisabled,
div.RadTabStrip .rtsNextArrowDisabled:hover {
background-position: -90px -208px;
}
/*appplying the sprite image of the arrows*/
div.RadTabStrip_Vista .rtsNextArrow,
div.RadTabStrip_Vista .rtsPrevArrow,
div.RadTabStrip_Vista .rtsPrevArrowDisabled,
div.RadTabStrip_Vista .rtsNextArrowDisabled {
background-image: url('TabStrip/TabStripStates.png');
}
Kind regards,
Kate
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license!
Book your seat now >>