Possible to have custom scroll button size?

[Tom]

I have a custom skin, and cannot seem to get my custom arrows to show. I'd like bigger arrows for people browsing on touch devices.  Is this possible?  I tried amending the background-position values in the skin css, but to no avail.  Currently, the images used seem to be coming from a fixed place in the sprite image, but not where I'm trying to point in the css.

NB: Even though this the RadTabStrip has ScrollChildren set to true, the tabs wrap in IE9 and Chrome, though never in Firefox (all Win7).  Note that sometimes the tab strip becomes a single line strip as I remove and add tabs.

Any help would be welcome.

See an example at http://an.rsl.wustl.edu/radcontrolswebapp1/default.aspx

Here is part of my custom skin css (named "an12")

.RadTabStrip_an12 .rtsLI,
.RadTabStrip_an12 .rtsLink
{
    color: #000;
    font: 12px/26px "Segoe UI", Arial, sans-serif;
}

.RadTabStripLeft_an12 .rtsSeparator,
.RadTabStripRight_an12 .rtsSeparator
{
    background: #828282;
}

/* <disabled tabs> */
.RadTabStrip_an12 .rtsDisabled
{
    color: #aaa;
}
/* </disabled tabs> */

/* <scrolling arrows> */
.RadTabStrip_an12 .rtsNextArrow,
.RadTabStrip_an12 .rtsPrevArrow,
.RadTabStrip_an12 .rtsPrevArrowDisabled,
.RadTabStrip_an12 .rtsNextArrowDisabled
{
    background-image: url('TabStrip/TabStripStates.png');
    height:48px;
    width:32px;
}

.RadTabStrip_an12 .RadTabStripTop_an12 .rtsNextArrow { background-position: 0 -288px; }
.RadTabStrip_an12 .RadTabStripTop_an12 .rtsPrevArrow { background-position: -32px -288px; }
.RadTabStrip_an12 .RadTabStripTop_an12 .rtsPrevArrowDisabled{ background-position: -64px -288px; }
.RadTabStrip_an12 .RadTabStripTop_an12 .rtsNextArrowDisabled{ background-position: -96px -288px; }

/* </scrolling arrows> */

[Kate]

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

[Tom]

Thanks, Kate. Your solution is perfect, and the link on specificity is great.

Of course, my tab scroll buttons are ridiculously huge on a web page, but work for a tablet.