Radmenu Rounded Corners Border

2 posts, 0 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 02 Jun 2013 Link to this post

    I have very basic Radmenu

    I would like to remove all boarders form all parts of the menu including root, vertical etc.

    I know if I set the css for root to border:none !important all borders are removed.

    However, once I apply

    EnableRoundedCorners="True"

    A 1px upper and lower border are also applied to the sub menu containers.

    Is there anyway to remove ALL border when rounded corners is enabled

    Here is my CSS

    /* <RadMenu / ETP> */
     
    .RadMenu_ETPZ2 .rmRootGroup, .RadMenu_ETPZ2 a.rmLink, .RadMenu_ETPZ2 .rmText
    {
        border:none !important;
        font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
        line-height: 22px;
    }
     
    .RadMenu_ETPZ2 .rmRootGroup
    {
        border:none !important;
        background-repeat: repeat-x;
        background-color: transparent;
        margin: 0 !important;
        padding: 0 !important;
    }
     
    .RadMenu_ETPZ2 .rmVertical
    {
        border:none !important;
        background-color: #FDF4B9;
        background-image: url('../images/back_menu.jpg');
    }
     
    .RadMenu_ETPZ2 .rmSlide > ul.rmVertical
    {
            border: 1px solid #4265ac;
    }
     
    /* <Root items> */
     
     
    .RadMenu_ETPZ2, .RadMenu_ETPZ2 a.rmLink, .RadMenu_ETPZ2 .rmRootLink
    {
        color: #000000;
        font-size: 14px;
    }
     
    .RadMenu_ETPZ2 .rmItem, .RadMenu_ETPZ2 a.rmFocused, .RadMenu_ETPZ2 a.rmSelected
    {
        background-position: 0;
        background-color: transparent; /* Selected menu*/
    }
     
    .RadMenu_ETPZ2 .rmLast a.rmExpanded .rmText
    {
        background-repeat: no-repeat;
    }
     
    .RadMenu_ETPZ2 a.rmDisabled, .RadMenu_ETPZ2 a.rmDisabled:hover
    {
        color: #7d7d7d;
        background-position: 0 500px;
    }
     
    .RadMenu_ETPZ2 .rmVertical .rmLink, .RadMenu_ETPZ2 .rmHorizontal .rmLink
    {
        margin-right: 0px; /* Distance between menu items*/
    }
     
     
    /* Separators */
     
    .RadMenu_ETPZ2 .rmSeparator
    {
        padding: 1px;
        background-color: #4265ac !important;
    }
     
    .RadMenu_ETPZ2 .rmSeparator .rmText
    {
        background-color: #4265ac !important;
    }
     
     
    /* Containers */
     
    DIV.RadMenu_ETPZ2 .rmItem .rmLink:hover
    {
        border:none !important;
        color: #CC0000;
        background-color: transparent;
    }
     
    DIV.RadMenu_ETPZ2 .rmGroup .rmItem .rmLink .rmText
    {
        padding-left: 10px;
        padding-right: 53px;
        margin-left: 4px;
        margin-right: 0px;
        width: 100px;
    }
     
    DIV.RadMenu_ETPZ2 .rmGroup
    {
        padding-bottom: 10px !important;
    }


    Thank you.

    Allan

  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Jun 2013 Link to this post

    Hi Allan,

    To remove all of the borders of the RadMenu control you will need to get the correct css class selector and override it (this can be achieved by increasing the specificity of the selector as explained here). For his purpose I would suggest that you use the FireBug tool (used in FireFox) that would be very helpful in locating the desired selectors. I would also recommend that you refer to this help article where you can get more information on the different css classes that are currently applied to the RadMenu control.

    Regards,
    Kate
    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 their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top