This is a migrated thread and some comments may be shown as answers.

Change background color of part of a RadMenu item?

2 Answers 324 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 15 Sep 2008, 12:38 AM

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

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 15 Sep 2008, 09:55 AM
Hi Mike,

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.
0
Mike
Top achievements
Rank 1
answered on 15 Sep 2008, 01:16 PM
That worked - thank you very much Alex.

Now I'm going to switch to an external skin as you suggested.

Mike
Tags
Menu
Asked by
Mike
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Mike
Top achievements
Rank 1
Share this question
or