Custom RadMenu Skin

[Lev]

Hi, I created custom skin from black skin and modified it. When I set radmenu width to 100% (to stretch entire page) I am getting black background instead of mine color (#5d646d). Please help.

Menu.Black.css
/* <RadMenu / Black> */

.RadMenu_Black .rmRootGroup,
.RadMenu_Black a.rmLink,
.RadMenu_Black .rmText,
.RadMenu_Black .rmLeftArrow,
.RadMenu_Black .rmRightArrow,
.RadMenu_Black .rmTopArrow,
.RadMenu_Black .rmBottomArrow
{
    background-image: url('Menu/rmSprite.png');
    background-color: transparent;
}
.RadMenu_Black .rmRootGroup
{

    background-repeat: repeat-x;
    background-color: #161616;
}

.RadMenu_Black .rmVertical
{
    background-position: 0 -408px;
}

/* <Root items> */

.RadMenu_Black,
.RadMenu_Black a.rmLink
{
    font-family:Calibri;
    font-size:16px;
    font-weight:bold;
    color:LightBlue;
    background-color:#5d646d;
    text-decoration: none;
}

.RadMenu_Black a.rmLink:hover
{
    color: Yellow;
}

.RadMenu_Black a.rmLink,
.RadMenu_Black .rmText
{
    background-repeat: no-repeat;
    background-position: 0 500px;
}

.RadMenu_Black a.rmLink:hover,
.RadMenu_Black a.rmFocused,
.RadMenu_Black a.rmSelected
{
    background-position: 0 -72px;
}

.RadMenu_Black a.rmExpanded,
.RadMenu_Black a.rmExpanded:hover
{
    background-position: 0 -72px;
}

.RadMenu_Black a.rmExpanded .rmText,
.RadMenu_Black a.rmExpanded:hover .rmText
{
    background-position: 100% -96px;
}

.RadMenu_Black .rmLast a.rmExpanded .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
}

.RadMenu_Black a.rmDisabled,
.RadMenu_Black a.rmDisabled:hover
{
    color: #7d7d7d;
    background-position: 0 500px;
}

/* </Root items> */


/* <Submenu items> */

.RadMenu_Black .rmGroup,
.RadMenu_Black .rmMultiColumn,
.RadMenu_Black .rmGroup .rmVertical
{
    border: 1px solid #080808;
    background: #4f4f4f url('Menu/rmVSprite.png') repeat-y 0 0;
}

.RadMenu_Black .rmTopFix,
.RadMenu_Black .rmBottomFix,
.RadMenu_Black .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_Black .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_Black .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
.RadMenu_Black .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_Black_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_Black_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #4f4f4f;
    background-repeat: repeat-y;
}

* html .rmRoundedCorners_Black .rmGroup .rmItem,
* html .rmRoundedCorners_Black ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #4f4f4f;
    background-repeat: repeat-y;
}

.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_Black .rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_Black .rmRoundedCorners .rmGroupColumn .rmItem,
.RadMenu_Black .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
.RadMenu_Black .rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_Black .rmRoundedCorners .rmScrollWrap .rmVertical,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_Black_Context.rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrap .rmVertical
{
    background-image: none;
}

* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmGroup,
* html .rmRoundedCorners_Black .rmScrollWrap .rmItem,
* html .rmRoundedCorners_Black .rmHorizontal .rmItem,
* html .rmRoundedCorners_Black .rmScrollWrap .rmVertical
{
    background-image: none;
}

.RadMenu_Black .rmRoundedCorners .rmGroupColumn
{
    background-color: #4f4f4f;
}

.RadMenu_Black .rmBottomLeft,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_Black_Context.rmRoundedCorners ul.rmGroup,
.RadMenu_Black .rmRoundedCorners ul.rmGroup,
.RadMenu_Black .rmRoundedCorners .rmMultiColumn
{
    background-image:  url('Menu/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

* html .rmRoundedCorners_Black .rmScrollWrapContainer,
* html .rmRoundedCorners_Black .rmGroup ul.rmGroup,
* html .rmRoundedCorners_Black ul.rmGroup
{
    background-image:  url('Menu/rmRoundedLeft.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadMenu_Black .rmTopRight,
.RadMenu_Black .rmBottomRight
{
    background-image:  url('Menu/rmRoundedRight.png');
    background-color: transparent;
    background-repeat: no-repeat;
}

.RadMenu_Black .rmTopFix,
.RadMenu_Black .rmBottomFix,
.RadMenu_Black .rmRoundedCorners .rmGroup .rmFirst,
.RadMenu_Black_Context.rmRoundedCorners .rmGroup .rmFirst,
.rmRoundedCorners_Black .rmGroup .rmFirst
{
    border-color: #080808;
}

.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
{
    background: #4F4F4F;
}

* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmTopFix,
* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmBottomFix
{
    background: #4F4F4F;
}

.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
{
    background-color: #4F4F4F;
    border: 0;
}

* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmTopArrow,
* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmBottomArrow,
* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmLeftArrow,
* html .rmRoundedCorners_Black .rmScrollWrapContainer .rmRightArrow
{
    background-color: #4F4F4F;
    border: 0;
}

.RadMenu_Black_rtl .rmBottomLeft,
.RadMenu_Black_rtl .rmRoundedCorners ul.rmGroup,
.RadMenu_Black_rtl .rmRoundedCorners .rmMultiColumn,
.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_Black .rmScrollWrapContainer .rmBottomLeft,
.rmRoundedCorners.RadMenu_Black_Context_rtl ul.rmGroup,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer
{
    background-image: url('Menu/rmRoundedLeft_rtl.png');
}

.RadMenu_Black_rtl .rmTopRight,
.RadMenu_Black_rtl .rmBottomRight
{
    background-image: url('Menu/rmRoundedRight_rtl.png');
}

.RadMenu_Black_rtl li.rmTopFix,
.RadMenu_Black_rtl li.rmBottomFix,
.RadMenu_Black_rtl .rmRoundedCorners .rmGroup .rmItem,
.rmRoundedCorners.RadMenu_Black_Context_rtl .rmGroup .rmItem
{
    background-position: 101% 0;
}

.RadMenu_Black .rmSlide .rmScrollWrap
{
    background-image: none;
}

.RadMenu_Black_rtl .rmGroup,
.RadMenu_Black_rtl .rmMultiColumn,
.RadMenu_Black_rtl .rmGroup .rmVertical
{
    background-position: 100% 0;
}

.RadMenu_Black .rmRootGroup li.rmItem .rmGroup
{
    padding-bottom: 0;
}

.RadMenu_Black .rmGroup li.rmLast
{
    padding-bottom: 1px;
}

.RadMenu_Black .rmRootGroup .rmHorizontal
{
    background-image: none;
}

.RadMenu_Black .rmScrollWrap .rmVertical
{
    border: 0;
}

.RadMenu_Black .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.RadMenu_Black_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.rmRoundedCorners_Black .rmScrollWrapContainer li.rmItem
{
    background: none;
}

.RadMenu_Black .rmGroup .rmItem a.rmLink,
.RadMenu_Black .rmGroup .rmItem a.rmLink:hover,
.RadMenu_Black .rmGroup .rmItem a.rmFocused,
.RadMenu_Black .rmGroup .rmItem a.rmSelected,
.RadMenu_Black .rmGroup .rmItem a.rmExpanded
{
    padding-bottom: 0;
    border: 0;

}

.RadMenu_Black .rmGroup a.rmLink,
.RadMenu_Black .rmGroup .rmText,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled:hover,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled .rmText,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled:hover .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
    background-color: transparent;
    font-size:medium;
    font-weight:normal;
    color:White;
}

.RadMenu_Black .rmGroup a.rmLink:hover,
.RadMenu_Black .rmGroup a.rmFocused,
.RadMenu_Black .rmGroup a.rmSelected,
.RadMenu_Black .rmGroup a.rmExpanded
{
    background-position: 0 -168px;
}

.RadMenu_Black .rmGroup a.rmLink:hover .rmText,
.RadMenu_Black .rmGroup a.rmFocused .rmText,
.RadMenu_Black .rmGroup a.rmSelected .rmText,
.RadMenu_Black .rmGroup a.rmExpanded .rmText
{
    background-position: 100% -192px;
    color:Yellow;
}

/* <expand arrows> */

.RadMenu_Black .rmVertical .rmExpandRight,
.RadMenu_Black .rmGroup .rmExpandDown,
.RadMenu_Black_Context .rmGroup .rmExpandRight,
.RadMenu_Black .rmVertical .rmItem a.rmDisabled .rmExpandRight,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled .rmExpandDown,
.RadMenu_Black .rmVertical .rmItem a.rmDisabled:hover .rmExpandRight,
.RadMenu_Black .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown
{
    background-position: 100% -216px;
}
.RadMenu_Black .rmHorizontal .rmExpandDown
{
    background: transparent url('Menu/rmSprite.png') no-repeat rightright !important;
    display: inline-block !important;
}
.RadMenu_Black .rmVertical a.rmLink:hover .rmExpandRight,
.RadMenu_Black .rmVertical a.rmFocused .rmExpandRight,
.RadMenu_Black .rmVertical a.rmSelected .rmExpandRight,
.RadMenu_Black .rmVertical a.rmExpanded .rmExpandRight
{
    background-position: 100% -312px;
}

.RadMenu_Black .rmGroup a.rmLink:hover .rmExpandRight,
.RadMenu_Black .rmGroup a.rmFocused .rmExpandRight,
.RadMenu_Black .rmGroup a.rmSelected .rmExpandRight,
.RadMenu_Black .rmGroup a.rmExpanded .rmExpandRight,
.RadMenu_Black .rmGroup a.rmLink:hover .rmExpandDown,
.RadMenu_Black .rmGroup a.rmFocused .rmExpandDown,
.RadMenu_Black .rmGroup a.rmSelected .rmExpandDown,
.RadMenu_Black .rmGroup a.rmExpanded .rmExpandDown
{
    background-position: 100% -240px;
}

.RadMenu_Black .rmVertical a.rmDisabled:hover .rmExpandRight,
.RadMenu_Black .rmGroup a.rmDisabled:hover .rmExpandDown
{
    background-image: url('Menu/rmSprite.png');
    background-position: 100% -216px;
}

/* </expand arrows> */

/* <rtl> */

.RadMenu_Black_rtl .rmVertical a.rmExpanded .rmText,
.RadMenu_Black_rtl .rmVertical a.rmExpanded:hover .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
}

.RadMenu_Black_rtl .rmGroup a.rmLink:hover,
.RadMenu_Black_rtl .rmGroup a.rmFocused,
.RadMenu_Black_rtl .rmGroup a.rmSelected,
.RadMenu_Black_rtl .rmGroup a.rmExpanded
{
    background-position: 100% -264px;
}

.RadMenu_Black_rtl .rmGroup a.rmLink:hover .rmText,
.RadMenu_Black_rtl .rmGroup a.rmFocused .rmText,
.RadMenu_Black_rtl .rmGroup a.rmSelected .rmText,
.RadMenu_Black_rtl .rmGroup a.rmExpanded .rmText
{
    background-position: 0 -288px;
}

.RadMenu_Black_Context_rtl .rmVertical .rmExpandLeft,
.RadMenu_Black_rtl .rmRootGroup .rmExpandLeft
{
    background-position: 0 -312px;
}

.RadMenu_Black_rtl .rmVertical a.rmLink:hover .rmExpandLeft,
.RadMenu_Black_rtl .rmVertical a.rmFocused .rmExpandLeft,
.RadMenu_Black_rtl .rmVertical a.rmSelected .rmExpandLeft,
.RadMenu_Black_rtl .rmVertical a.rmExpanded .rmExpandLeft
{
    background-position: 0 -216px;
}

.RadMenu_Black_rtl .rmGroup a.rmLink:hover .rmExpandLeft,
.RadMenu_Black_rtl .rmGroup a.rmFocused .rmExpandLeft,
.RadMenu_Black_rtl .rmGroup a.rmSelected .rmExpandLeft,
.RadMenu_Black_rtl .rmGroup a.rmExpanded .rmExpandLeft
{
    background-position: 0 -336px;
}

.RadMenu_Black_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft
{
    background-position: 0 -312px;
}


/* </rtl> */

/* </Submenu items> */

/* <Submenu offsets (Black - specific, overlapping submenus)> */

.RadMenu_Black .rmSlide
{
    margin: 0 0 0 -1px;
}

.RadMenu_Black .rmVertical .rmSlide,
.RadMenu_Black .rmSlide .rmSlide,
.RadMenu_Black_Context .rmGroup .rmSlide
{
    margin: 0 0 0 -5px;
}

.RadMenu_Black_rtl .rmSlide
{
    margin: 0 0 0 0;
}

.RadMenu_Black_rtl .rmFirst .rmSlide
{
    margin-left: 1px;
}

.RadMenu_Black_rtl .rmVertical .rmSlide,
.RadMenu_Black_rtl .rmSlide .rmSlide,
.RadMenu_Black_Context_rtl .rmGroup .rmSlide
{
    margin: 0 0 0 5px;
}

/* </Submenu offsets> */

/* <Scrolling arrows> */

.RadMenu_Black .rmLeftArrow,
.RadMenu_Black .rmRightArrow
{
    background-color: #4f4f4f;
}

.RadMenu_Black .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }
.RadMenu_Black .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

.RadMenu_Black .rmTopArrow,
.RadMenu_Black .rmBottomArrow,
.RadMenu_Black .rmGroup .rmLeftArrow,
.RadMenu_Black .rmGroup .rmRightArrow
{
    background-color: #4f4f4f;
}

.RadMenu_Black .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }
.RadMenu_Black .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

/* </Scrolling arrows> */

/* <Separators> */

.RadMenu_Black .rmHorizontal .rmSeparator .rmText,
.RadMenu_Black .rmVertical .rmHorizontal .rmSeparator .rmText
{
    height: 22px;
    margin: 1px 0 0;
    width: 1px;
    background-color: #000;
}

.RadMenu_Black_Context .rmSeparator .rmText,
.RadMenu_Black .rmHorizontal .rmGroup .rmSeparator .rmText,
.RadMenu_Black .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
{
    background-color: transparent;
    background-position: 0 -406px;
}

/* </Separators> */

/* </RadMenu / Black> */

Regards, Lev

[Magdalena]

Hello Lev,

The color of the background is set with the .RadMenu_Black a.rmLink selector in the stylesheet that you  provided. Please, make you sure that you had set the property NavigateUrl to make the element hyperlink. Otherwise you could modify the selector .RadMenu_Black a.rmLink to html .RadMenu_Black .rmLink.

If the issue persists, could you please provide a live URL or runnable project that I can test locally and assist you the most efficient way?

Regards,
Magdalena
Telerik

[Lev]

I put solution in drop box folder
https://dl.dropboxusercontent.com/u/55910835/MenuTest.zip

[Magdalena]

Hi Lev,

The skin Black uses an image for background gradient, so to replace it with a color it is necessary to use background instead of background-color. Please, add the following to your style sheet

html .RadMenu_Black .rmRootGroup {
    background:#5d646d;
}

Regards,
Magdalena
Telerik

[Lev]

That works, thanks.