Change background color of part of a RadMenu item?

3 posts, 1 answers
  1. Mike
    Mike avatar
    6 posts
    Member since:
    Jun 2012

    Posted 14 Sep 2008 Link to this post

    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. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 15 Sep 2008 Link to this post

    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.
  3. Mike
    Mike avatar
    6 posts
    Member since:
    Jun 2012

    Posted 15 Sep 2008 Link to this post

    That worked - thank you very much Alex.

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

    Mike
Back to Top