radMenu backcolor

[Anthony]

I am new to Telerik and trying to learn about the controls. Specifically right now I am using the radMenu control.
I have selected the MetroTouch skin because I like the height and thickness but I dont care for the colors of
it on my web page. So I wanted to start with the color of the whole bar. I tried creating a cssclass called mainmenu
and then set a property of background-color: #3145CE; This did not change the color of the menu bar. So I tried to do
it in aspx and on my <telerik:RadMenu ID="RadMenu1" tag I added backcolor="#3145ce". This also did not work.
Then I found some users asking a different question about changing color of selected menu items and I saw
someone post css coding with:

.RadMenu_Default a.rmSelected
{
    background-color: Red !important;
}

So I thought well maybe if I try this but delete off the a.rmSelected part it will only change the menubar color. No dice!! 
So I am here to get some help on changing the color of the entire bar but still keep the other characteristics of the MetroTouch 
skin or am I just thinking in the wrong way and I have to create some custom skin (uggh please don't tell me that). I am hoping there is a simple way to do this. Thanks! Also where can I find all the documentation about available built in css class names and properties like rmselected and such.

[Aneliya Petkova]

Hello Anthony,

You can use the following CSS to overwrite the build in styles of the RadMenu in MetroTouch skin:

html .RadMenu_MetroTouch .rmRootGroup {
    background-color: green;
}

html .RadMenu_MetroTouch .rmRootLink {
    border: 1px solid green;
}

Here you may find a video showing the result of this change.

More information on all CSS class names for RadMenu you may find in our documentation:
http://www.telerik.com/help/aspnet-ajax/menu-appearance-css-selectors.html

If you need to perform more changes on the skin, I think that the most simple way is to use Telerik Visual Style Builder. It provides an interactive UI that helps in customizing the appearance of the skin. More information for this tool you can also find in our documentation. Using this tool, you can just modify the chosen skin and export it. Then you must set the EnableEmbeddedSkins property of the RadMenu to False and insert a link to this style-sheet in the head section of the page(http://www.telerik.com/help/aspnet-ajax/menu-appearance-creating-custom-skins.html). I made you a short video showing how you can create a skin based on one of our build in skins.

Hope this will be helpful.

Regards,
Aneliya Petkova
Telerik

 

 

[David]

Awesome, that worked perfectly.