example: http://www.telerik.com/help/aspnet-ajax/menu-change-height.html
example: http://www.telerik.com/help/aspnet-ajax/combobox-appearance-change-height-input-element.html
tutorial: http://www.w3schools.com/css/css_image_sprites.asp
tutorial: http://www.lightpostcreative.com/image-sprites-tutorial/
Demo:
"rmSprite.png" Image
1) Original
2) Custom
Related CSS
/*Font*/
.RadMenu .rmHorizontal .rmText
{
padding: 0 12px 1px 0;
}
.RadMenu_CustomSkin,
.RadMenu_CustomSkin a.rmLink
{
font: normal 22px/23px "Segoe UI", Arial, sans-serif;
color: #000;
text-decoration: none;
}
/*Root Item Focus "rmSprite.png" Image Position*/
.RadMenu_CustomSkin a.rmLink:hover,
.RadMenu_CustomSkin a.rmFocused,
.RadMenu_CustomSkin a.rmSelected
{
background-position: 0 -72px;
}
.RadMenu_CustomSkin a.rmLink:hover .rmText,
.RadMenu_CustomSkin a.rmFocused .rmText,
.RadMenu_CustomSkin a.rmSelected .rmText
{
background-position: 100% -96px;
}
/*Root Item Expand "rmSprite.png" Image Position*/
.RadMenu_CustomSkin a.rmExpanded,
.RadMenu_CustomSkin a.rmExpanded:hover
{
background-position: 0 -278px;
}
.RadMenu_CustomSkin a.rmExpanded .rmText,
.RadMenu_CustomSkin a.rmExpanded:hover .rmText
{
background-position: 100% -351px;
}
/*Sub Item Focus "rmSprite.png" Image Position*/
.RadMenu_CustomSkin .rmGroup a.rmLink:hover,
.RadMenu_CustomSkin .rmGroup a.rmFocused,
.RadMenu_CustomSkin .rmGroup a.rmSelected,
.RadMenu_CustomSkin .rmGroup a.rmExpanded
{
background-position: 0 -168px;
}
.RadMenu_CustomSkin .rmGroup a.rmLink:hover .rmText,
.RadMenu_CustomSkin .rmGroup a.rmFocused .rmText,
.RadMenu_CustomSkin .rmGroup a.rmSelected .rmText,
.RadMenu_CustomSkin .rmGroup a.rmExpanded .rmText
{
background-position: 100% -192px;
}
/*Menu Background "rmSprite.png" Image Position*/
.RadMenu_CustomSkin .rmRootGroup
{
border: 1px solid #b7bdcd;
background-repeat: repeat-x;
background-position: 0 -550px;
background-color: #e0e5f5;
}