I'm having an issue changing the color of the right-most part of the first menu item in a vertical RadMenu.
Screen Shot of Issue
This is the first time I've modified a Telerik control's CSS.
I'ver modified a copy of the Default.RadMenu_Default.cs file.
I have a vertical menu and I want the menu items to have a white background with black text.
I was successful to the point where the only background that is not white is the background of the space? to the right of the text on the first menu item. See screen shot.
Thanks in advance for any help you can give.
Mike
CSS follows:
/
* RadMenu Default skin */
.RadMenu_Default
{
border: 1px solid White;
border-bottom-width: 0;
border-top-color: White ;
background-color: White;
text-align: left;
}
.RadMenu_Default_rtl
{
text-align: right;
}
.RadMenu_Default_Context
{
background: none;
border: 0;
}
.RadMenu_Default a
{
text-decoration: none;
}
.RadMenu_Default .rmLink
{
line-height: 24px;
text-decoration: none;
color: Black ;
}
.RadMenu_Default .rmLink:focus,
.RadMenu_Default .rmFocused
{
outline: 0;
}
.RadMenu_Default .rmExpanded
{
position: relative;
z-index: 10000;
}
.RadMenu_Default .rmLink:hover,
.RadMenu_Default .rmFocused,
.RadMenu_Default .rmExpanded
{
background-color: White;
color: Black;
}
.RadMenu_Default .rmLink .rmText
{
font: normal 12px Arial, sans-serif;
}
.RadMenu_Default .rmGroup
{
background: White;
}
.RadMenu_Default .rmGroup .rmLink
{
text-decoration: none;
color: White;
}
.RadMenu_Default_rtl .rmGroup .rmLink
{
text-align: right;
}
.RadMenu_Default .rmGroup .rmLink:hover,
.RadMenu_Default .rmGroup .rmFocused,
.RadMenu_Default .rmGroup .rmExpanded
{
color: White;
background: White;
}
.RadMenu_Default .rmText
{
padding: 3px 20px 5px;
}
.RadMenu_Default .rmGroup .rmLink .rmText
{
font-size: 11px;
padding: 4px 37px 5px 20px;
}
.RadMenu_Default_rtl .rmGroup .rmLink .rmText
{
padding: 4px 20px 5px 37px;
}
/* <expand arrows styling> */
.RadMenu_Default .rmGroup .rmLink .rmExpandRight
{
background: transparent url(Menu/ArrowExpand.gif) no-repeat right -1px;
}
.RadMenu_Default .rmGroup .rmLink .rmExpandLeft
{
background: transparent url(Menu/ArrowExpandRTL.gif) no-repeat left -1px;
}
.RadMenu_Default .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu_Default .rmGroup .rmFocused .rmExpandRight,
.RadMenu_Default .rmGroup .rmExpanded .rmExpandRight
{
background-image: url(Menu/ArrowExpandHovered.gif);
}
.RadMenu_Default .rmGroup .rmLink:hover .rmExpandLeft,
.RadMenu_Default .rmGroup .rmFocused .rmExpandLeft,
.RadMenu_Default .rmGroup .rmExpanded .rmExpandLeft
{
background-image: url(Menu/ArrowExpandHoveredRTL.gif);
}
/* </expand arrows styling> */
.RadMenu_Default .rmHorizontal .rmItem { border-right: 1px solid White; padding-bottom:1px; }
.RadMenu_Default .rmHorizontal .rmLast { border-right: 0; }
.RadMenu_Default .rmVertical .rmItem { border-bottom: 1px solid White; }
.RadMenu_Default .rmVertical .rmLast { border-bottom: 0; padding-bottom: 1px; }
.RadMenu_Default_rtl .rmHorizontal .rmItem { border-left: 0; }
.RadMenu_Default .rmRootGroup .rmGroup .rmItem,
.RadMenu_Default_Context .rmGroup .rmItem
{ border-right: 0; border-bottom: 0; padding-bottom: 0; }
.RadMenu_Default .rmGroup
{
border: 0px solid White;
background-color: White;
}
.RadMenu_Default .rmGroup .rmExpanded
{
z-index: 1;
}
.RadMenu_Default .rmTopArrow,
.RadMenu_Default .rmBottomArrow
{
height: 10px;
width: 100%;
background-color:White;
}
.RadMenu_Default .rmBottomArrow
{
background-position: center -18px;
}
.RadMenu_Default .rmLeftArrow,
.RadMenu_Default .rmRightArrow
{
width: 10px;
height: 100%;
background-color:White;
}
.RadMenu_Default .rmRightArrow
{
background-position: -18px center;
}
.RadMenu_Default .rmItem .rmDisabled .rmText
{
color: White;
}
.RadMenu_Default .rmRootGroup .rmItem .rmDisabled
{
background: none;
}
.RadMenu_Default .rmGroup .rmItem .rmDisabled
{
background-color: White;
}
.RadMenu_Default .rmRootGroup .rmSeparator,
.RadMenu_Default .rmGroup .rmSeparator
{
background: White;
border-top: 1px solid White;
border-bottom: 0;
}
.RadMenu_Default .rmSeparator .rmText
{
display: none;
}
.RadMenu_Default .rmHorizontal .rmSeparator
{
height: 20px;
width: 1px;
line-height: 20px;
border: 0;
}
.RadMenu_Default .rmVertical .rmSeparator
{
height: 1px;
margin: 3px 0;
border: 0;
line-height: 1px;
}
.RadMenu_Default .rmLeftImage
{
margin: 2px;
}
.RadMenu_Default .rmSlide
{
margin: -1px 0 0 -1px !important;
}
.RadMenu_Default .rmHorizontal .rmSlide
{
margin-top: -2px !important;
}
.RadMenu_Default_rtl .rmSlide
{
margin-left: 0 !important;
margin-right: -1px !important;
}
.RadMenu_Default .rmGroup .rmSlide
{
margin: 0 !important;
}
.RadMenu_Default .rmItem .rmDisabled:hover
{
background: none;
}
.RadMenu_Default .rmItem
{
background-color:White;
}
2 Answers, 1 is accepted
Please try the following CSS:
div.RadMenu_Default {
background-image: none;
}
It should resolve the problem. Also, please consider using external skins - this will improve performance greatly and will reduce CSS code debt.
Greetings,
Alex
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
Now I'm going to switch to an external skin as you suggested.
Mike