Menu CSS help

7 posts, 0 answers
  1. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 28 Mar Link to this post

    I created css for RadMenu and it does some things right. However, some issues remain, such as selected tab css, and end of menu css. In addition separation between tabs looks a little incomplete. Can you please take a look? Code and Pic attached

    Thank you

     .RadMenu .rmItem
            {           
                font-family: 'Open Sans', sans-serif;
                font-size:13px;
                font-weight:bolder;
                text-decoration:none;
                text-align:center;
                position:relative;
                padding:5px;
                outline: none;
            
                background-image: linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
                background-image: -o-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
                background-image: -moz-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
                background-image: -webkit-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
                background-image: -ms-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
                background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7B1342),color-stop(1, #DB4D8D));

                -pie-background: linear-gradient(#DB4D8D, #7B1342);
                behavior: url(/styles/pie/PIE.htc);
         
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
        
                -webkit-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
                -moz-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
                -o-box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
                box-shadow: inset 0px 1px 0px #DB4D8D, 0px 5px 0px 0px #661A3C, 0px 10px 5px #999;
         
            }
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 31 Mar Link to this post

    Hello David,

    Below you will find some CSS selectors that may help you to enhance the look and feel of your custom RadMenu:
    /* Access menu items. Style their border (separation line) */
    html .RadMenu .rmRootGroup .rmItem {
        border-color: yellow;
    }
     
    /* Access menu items links. Style their appearance on hover  */
    html .RadMenu .rmRootGroup .rmRootLink:hover {
        background-color: yellow;
        background-image: none;
    }
     
    /* Access menu root group. Style its background */
    html .RadMenu .rmRootGroup {
        background-image: linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
        background-image: -o-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
        background-image: -moz-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
        background-image: -webkit-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
        background-image: -ms-linear-gradient(bottom, #7B1342 0%, #DB4D8D 100%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7B1342),color-stop(1, #DB4D8D));
    }

    The following Documentation article might help you understand better the structure of the RadMenu DOM object and the possible use of CSS selectors for applying custom styles to it.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 31 Mar in reply to Veselin Tsvetanov Link to this post

    Hi Veselin,

         This is very helpful. Can you also please help with changing of highlight color (greenish color on top)? Also, selected tab menu colors

    Thank you

    David

       

  5. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 05 Apr Link to this post

    Hi David,

    You could do that by using the following rules:
    /* Style Selected / Expanded state */
    html .RadMenu_Silk .rmRootGroup .rmSelected > .rmRootLink,
    html .RadMenu_Silk .rmRootGroup .rmExpanded > .rmRootLink {
        background-image: none;
        background-color: green;
    }
     
    /* Style Hover state */
    html .RadMenu_Silk .rmRootGroup.rmHorizontal .rmItem > .rmRootLink:hover,
    html .RadMenu_Silk .rmRootGroup.rmHorizontal .rmItem > .rmRootLink:hover {
            border-top: 4px solid black;
    }

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  6. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 05 Apr in reply to Veselin Tsvetanov Link to this post

    Veselin,

         Style Hover works perfectly, however Style Selected made no difference

         Any idea?

    Thank you

  7. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 08 Apr Link to this post

    Hi David,

    In case your RadMenu is in Lightweight RenderMode, you should apply the following styles for selected state:
    html .RadMenu_Silk .rmRootLink.rmFocused,
    html .RadMenu_Silk .rmRootLink.rmSelected,
    html .RadMenu_Silk .rmRootLink.rmExpanded {
        background-image: none;
        background-color: green;
    }

    You may find it useful to consult the following article on RenderModes.

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 08 Apr in reply to Veselin Tsvetanov Link to this post

    That was it!!!

    Thank you very much

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017