Hello Mike,
The best solution would be to create a separate sprite including the split buttons only. Then you could add the additional CSS that will override the original base positions according to your new design requirements.
Attached is
HeightProjectFiles.zip containing old 40px height button files updated with a few extra CSS lines that overrides base styles and allow button to work correctly with 40px height Split Buttons:
/* SplitButton */
a.customHeight40 .rbSplitRight,
a.customHeight40 .rbSplitLeft
{
background-image: url(splitButton40.gif) !important;
}
.customHeight40 .rbSplitRight
{
right: 0;
background-position: 0 0;
}
.customHeight40 .rbSplitRight:hover
{
background-position: -18px 0;
}
.customHeight40 .rbSplitRight:focus,
.customHeight40 .rbSplitRight:active
{
background-position: -36px 0;
}
.customHeight40 .rbSplitLeft
{
left: 0;
background-position: -54px 0;
}
.customHeight40 .rbSplitLeft:hover
{
background-position: -72px 0;
}
.customHeight40 .rbSplitLeft:focus,
.customHeight40 .rbSplitLeft:active
{
background-position: -90px 0;
}
/* Disabled split buttons */
.customHeight40.rbDisabled .rbSplitRight:hover,
.customHeight40 .rbDisabled .rbSplitRight:active,
.customHeight40 .rbDisabled .rbSplitRight:focus
{
background-position: 0 0;
}
.customHeight40.rbDisabled .rbSplitLeft:hover,
.customHeight40.rbDisabled .rbSplitLeft:active,
.customHeight40.rbDisabled .rbSplitLeft:focus
{
background-position: -54px 0;
}
In the project you will find also
splitButton40.gif sprite, containing the new height split buttons.
If you want them to be wider than the original 18ox width, to let`s say 25px, you should add alos the following CSS:
Of course you will need to adjust the background positions also, with the new 7px added to the original width of the split button:
/* SplitButton */
a.customHeight40 .rbSplitRight,
a.customHeight40 .rbSplitLeft
{
width: 25px;
}
a.customHeight40 .rbSplitRight,
a.customHeight40 .rbSplitLeft
{
background-image: url(splitButton40.gif) !important;
}
.customHeight40 .rbSplitRight
{
right: 0;
background-position: 0 0;
}
.customHeight40 .rbSplitRight:hover
{
background-position: -25px 0;
}
.customHeight40 .rbSplitRight:focus,
.customHeight40 .rbSplitRight:active
{
background-position: -50px 0;
}
.customHeight40 .rbSplitLeft
{
left: 0;
background-position: -75px 0;
}
.customHeight40 .rbSplitLeft:hover
{
background-position: -100px 0;
}
.customHeight40 .rbSplitLeft:focus,
.customHeight40 .rbSplitLeft:active
{
background-position: -125px 0;
}
/* Disabled split buttons */
.customHeight40.rbDisabled .rbSplitRight:hover,
.customHeight40 .rbDisabled .rbSplitRight:active,
.customHeight40 .rbDisabled .rbSplitRight:focus
{
background-position: 0 0;
}
.customHeight40.rbDisabled .rbSplitLeft:hover,
.customHeight40.rbDisabled .rbSplitLeft:active,
.customHeight40.rbDisabled .rbSplitLeft:focus
{
background-position: -75px 0;
}
Please note, that the Split Buttons in the project were created with height of 40px and width of 18px and they will work properly with the CSS included in the project only. The above given 25px width CSS is just an example how to improve the existing CSS if you need wider split buttons.
Regards,
Bojo
the Telerik team