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

Custom RadMenu Skin

4 Answers 40 Views
Visual Style Builder
This is a migrated thread and some comments may be shown as answers.
Lev
Top achievements
Rank 1
Iron
Lev asked on 27 Nov 2013, 07:41 PM
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

4 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 02 Dec 2013, 11:18 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Lev
Top achievements
Rank 1
Iron
answered on 02 Dec 2013, 09:34 PM
I put solution in drop box folder
https://dl.dropboxusercontent.com/u/55910835/MenuTest.zip
0
Magdalena
Telerik team
answered on 03 Dec 2013, 11:12 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Lev
Top achievements
Rank 1
Iron
answered on 03 Dec 2013, 12:32 PM
That works, thanks.
Tags
Visual Style Builder
Asked by
Lev
Top achievements
Rank 1
Iron
Answers by
Magdalena
Telerik team
Lev
Top achievements
Rank 1
Iron
Share this question
or