radMenu backcolor

3 posts, 0 answers
  1. Anthony
    Anthony avatar
    1 posts
    Member since:
    Jan 2015

    Posted 04 Feb 2015 Link to this post

    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.

  2. Aneliya Petkova
    Aneliya Petkova avatar
    207 posts

    Posted 05 Feb 2015 Link to this post

    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:

    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.

    Aneliya Petkova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. David
    David avatar
    17 posts
    Member since:
    Feb 2015

    Posted 05 Feb 2015 in reply to Aneliya Petkova Link to this post

    Awesome, that worked perfectly.
Back to Top