Custom RadMenu Skin

5 posts, 0 answers
  1. Lev
    Lev avatar
    6 posts
    Member since:
    May 2013

    Posted 27 Nov 2013 Link to this post

    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
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 02 Dec 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lev
    Lev avatar
    6 posts
    Member since:
    May 2013

    Posted 02 Dec 2013 Link to this post

    I put solution in drop box folder
    https://dl.dropboxusercontent.com/u/55910835/MenuTest.zip
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 03 Dec 2013 Link to this post

    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.
  6. Lev
    Lev avatar
    6 posts
    Member since:
    May 2013

    Posted 03 Dec 2013 Link to this post

    That works, thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017