This is a migrated thread and some comments may be shown as answers.

Radmenu Rounded Corners Border

1 Answer 34 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Allan
Top achievements
Rank 2
Allan asked on 02 Jun 2013, 10:58 PM

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

1 Answer, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 03 Jun 2013, 03:35 PM
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.
Tags
Menu
Asked by
Allan
Top achievements
Rank 2
Answers by
Kate
Telerik team
Share this question
or