RadMenu for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The following tutorial demonstrates how you can create a custom RadMenu skin (change the background color of the RadMenu), using the Default skin as a base.

One way would be to use our Visual Style Builder to create your customized skin. However, the limitations of this approach are that the nicely shaped rounded corners of the RadMenu control will be lost as well as the different effects that are usually applied when using a sprite image. The second approach is when using some of the predefined Telerik skins. Since our skins are based on sprite images, in order to change the background color and at the same time preserve the nicely shaped rounded corners, one will need to change the whole sprite image of the control. Below is a full explanation of how this could be achieved and what the various elements of the RadMenu sprite are used for.

Prepare the Project

  1. Create a new Web site using Visual Studio.

  2. Drag and drop a RadMenu control.

    Create RadMenu

  3. Add RadScriptManager.

  4. Build RadMenu control.

    Build RadMenu

Prepare the External Skin and Image Folder

  1. Create a new folder called MySkin

  2. Copy the Menu folder that contains the sprite images of the RadMenu control and paste it to the Myskin folder.

  3. Copy the Menu.Default.css style sheet file and place it in the MySkin folder.

    Note

    With the default installation of the ASP.NET AJAX control the file path will typically be similar to this example: \Program Files\Telerik\<Your Version of RadControls for ASPNET>\Skins\ Default.

  4. Change the name of the file Menu.Default.css file to Menu.MySkin.css.

  5. Drag and drop the Menu.MySkin.css file from the Solution Explorer onto your Web page.

    Drag and drop the css file

  6. Set the EnableEmbeddedSkins property of the RadMenu control to False.

  7. Change the Skin property of your RadMenu control to "MySkin".

  8. Open the Menu.Default.css and replace all of the RadMenu_ Default instances with RadMenu_MySkin and save the file.

    Ffind and replace css class name

  9. Run the application. The new "MySkin" skin looks just like the Default skin:

    Default RadMenu look

Getting Straight to the Point - Altering the Sprite Image and Changing the Background of the RadMenu

Now that we have an external skin of our own, we can start changing it to fit our needs. Get the rmSprite.png image and alter it as desired. For example since you will simply need to change the background color of the RadMenu control, using Photoshop you can just place an additional layer over the existing sprite image and easily create the new appearance. Here is how your new sprite image looks like:

RadMenu Sprite

Here is a descriptive explanation of the sprite image that is used for the RadMenu control. In general all of the sprites for the RadMenu follow a very similar pattern therefore no matter which sprite image we will take the states will very similar if not identical to the image below.

RadMenu Sprite Description

Now that we are done with the sprite images, a relatively easy part remains. Simply get the modified image and replace the current one that is located in the MySkin\Menu folder. Now run the page and here you have the new skin of the RadMenu control done.

New Sprite Image Applied

Specificity Wars (some advanced techniques)

Q: How to change the white color when a RootItem is clicked or hovered?

A: Locate the following css selector(s) and simply change the background-color as desired:

CopyCSS
 /* applied when the RootItem is expanded */
    .RadMenu_MySkin a.rmExpanded,
    .RadMenu_MySkin a.rmExpanded:hover {
                background-color: red;
        }

/* applied when the RootItem is focused, selected or hovered */ 
    .RadMenu_MySkin a.rmLink:hover,
    .RadMenu_MySkin a.rmFocused,
     .RadMenu_MySkin a.rmSelected {
               background-color: blue;
        }

See Also