Hover RootGroup Only? Custom Skin

2 posts, 0 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Aug 2008

    Posted 13 Aug 2008 Link to this post

    Firstly, thanks for anyone reading this.

    Re: Custom Skinning

    I'm sure this is possible, but the code is eluding me. I have a background image (BackgroundTab.gif) set as the background of each of the RootGroup items. When I hover over it, I would like another image to replace the tab (BackgroundTab2.gif). However, thus far I have only been able to apply Background2.gif to any item I hover over, including child items. Any ideas on how to do this?

    Thank you so much


    Menu.ABMenu.css source

    .RadMenu_ABMenu *  
    {  
        padding: 0;  
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup  
    {  
        float: left;  
        height: 15px;     
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem  
    {  
        background: transparent url('Menu/BackgroundTab.gif') no-repeat;  
    }  
     
    .imgTab  
    {  
        width: 100%;  
        position: relative;  
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmFirst  
    {  
        /*background-position: -750px 0;  
        background: transparent url('Menu/BackgroundFirst.gif') no-repeat;  
        height: 15px;  
        width: 20px;*/  
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmLast  
    {  
        /*background-position: 100% 0;  
        background: transparent url('Menu/BackgroundLast.gif') no-repeat;  
        height: 15px;*/  
    }  
     
    .RadMenu_ABMenu .rmVertical.rmRootGroup  
    {  
          
        border: 1px solid #00FF00;  
        float: left;  
        padding: 0 5px;  
    }  
     
    /*Any item that links somewhere*/  
    .RadMenu_ABMenu .rmLink  
    {  
        font: 11px/15px Arial,verdana,sans-serif;  
        margin: 3px 0;  
        color: #BB0000;  
        text-decoration: none;    
    }  
     
    .RadMenu_ABMenu .rmLeftImage  
    {  
        margin: 0 2px;  
    }  
     
    .RadMenu_ABMenu .rmText  
    {  
        margin: 0 0 0 13px;  
        padding: 0 13px 0 0;  
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem:hover  
    {  
        background: transparent url('Menu/BackgroundTab2.gif') no-repeat;  
    }  
     
    .RadMenu_ABMenu .rmLink:hover,  
    .RadMenu_ABMenu .rmExpanded,  
    .RadMenu_ABMenu .rmFocused  
    {  
        color: #fff;  
        border-bottom: solid 1px #fff;  
    }  
     
    .RadMenu_ABMenu .rmLink:hover .rmText,  
    .RadMenu_ABMenu .rmExpanded .rmText,  
    .RadMenu_ABMenu .rmFocused .rmText  
    {  
            /*background: #333;*/  
    }  
     
    /* submenus */  
     
    .RadMenu_ABMenu .rmRootGroup .rmGroup  
    {  
        background: transparent url('Common/inoxHeader.jpg') repeat 0 0;  
    }  
     
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmItem  
    {  
        background: none;  
        padding: 1px 5px;  
    }  
     
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink  
    {  
        line-height: 17px;  
        color: #0000DD;  
    }  
     
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmLeftImage  
    {  
        margin: 0 3px;  
    }  
     
    /*Items below the RootGroup*/  
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover,  
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded,  
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused  
    {  
        color: #171717;  
        background: transparent url('Menu/separatorTab.gif') no-repeat;  
        background-position: 80px 0px;  
    }  
     
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmLink:hover .rmText,  
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmExpanded .rmText,  
    .RadMenu_ABMenu .rmRootGroup .rmGroup .rmFocused .rmText  
    {  
        background: transparent url('Menu/ItemBgLight.gif') no-repeat 100% 0;  
    }  
     
    /* separators */  
    .RadMenu_ABMenu .rmVertical.rmRootGroup .rmItem.rmSeparator  
    {  
        background: #CCC;  
        height: 1px;  
        font-size: 0;  
        line-height: 0;  
        border-bottom: 3px solid #fff;  
    }  
     
    /*Affects any Item whose isSeparator field is set to true*/  
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmItem.rmSeparator  
    {  
        background: transparent url('Menu/separatorTab.gif') no-repeat;  
        width: 45px;  
        height: 15px;  
    }  
     
    .RadMenu_ABMenu .rmHorizontal.rmRootGroup .rmVertical .rmItem.rmSeparator,  
    .RadMenu_ABMenu .rmVertical.rmRootGroup .rmVertical .rmItem.rmSeparator  
    {  
        padding: 0;  
        height: 1px;  
        margin-left: 5px;  
        border-bottom: 0;  
    }  
     
    /* disabled items */  
     
    .RadMenu_ABMenu .rmDisabled,  
    .RadMenu_ABMenu .rmDisabled:hover  
    {  
        color: #666;  
        background: none;  
    }  
     
    .RadMenu_ABMenu .rmDisabled:hover .rmText  
    {  
        background: none;  
    }  
     
    .RadMenu_ABMenu .rmTopArrow,  
    .RadMenu_ABMenu .rmBottomArrow  
    {  
        height: 10px;  
        width: 100%;  
        background: #000 url(Menu/ArrowScrollUpDown.gif) no-repeat top center;  
    }  
     
    .RadMenu_ABMenu .rmBottomArrow  
    {  
        background-position: center -18px;  
    }  
     
    .RadMenu_ABMenu .rmLeftArrow,  
    .RadMenu_ABMenu .rmRightArrow  
    {  
        width: 10px;  
        height: 100%;  
        background: #000 url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;  
    }  
     
    .RadMenu_ABMenu .rmRightArrow  
    {  
        background-position: -18px center;  
  2. Yana
    Admin
    Yana avatar
    4993 posts

    Posted 15 Aug 2008 Link to this post

    Hi Michael,

    Please add the following style to set the hover image of root items:

    .RadMenu_ABMenu .rmRootGroup .rmLink:hover   {     
       backgroundtransparent url('Menu/BackgroundTab2.gif'no-repeat;     
    }  

    I hope this helps.

    Best wishes,
    Yana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top