RadControls for ASP.NET AJAX
Table of Contents
Tutorial: Creating A Custom Skin Send comments on this topic.
See Also
Controls > RadMenu > Appearance and Styling > Tutorial: Creating A Custom Skin

Glossary Item Box

The following tutorial demonstrates creating a custom RadMenu skin, using the default skin as a base. This new skin will take the appearance of the menu from its default look:

to the following:

See Understanding the Skin CSS File for more information on specific CSS file properties.

Prepare the Project

  1. Drag a RadMenu from the toolbox onto a new AJAX-enabled application Web form.
  2. Use the RadMenu Item Builder to add items to the menu, or add them in the HTML markup:
    [ASP.NET] RadMenu with items Copy Code
    <telerik:RadMenu id="RadMenu1" runat="server" Skin="Default">
    <    Items>
    <telerik:RadMenuItem Text="File">
         <Items>
          <telerik:RadMenuItem Text="New...">
           <Items>
            <telerik:RadMenuItem Text="File"></telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Folder"></telerik:RadMenuItem>
           </Items>
          </telerik:RadMenuItem>
          <telerik:RadMenuItem Text="Open"></telerik:RadMenuItem>
          <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
          <telerik:RadMenuItem Text="Exit"></telerik:RadMenuItem>
         </Items>
    </telerik :RadMenuItem>
    <telerik:RadMenuItem Text="Edit">
         <Items>
          <telerik:RadMenuItem Text="Cut"></telerik:RadMenuItem>
          <telerik:RadMenuItem Text="Copy"></telerik:RadMenuItem>
          <telerik:RadMenuItem Text="Paste"></telerik:RadMenuItem>
         </Items>
    </telerik :RadMenuItem>
    <telerik:RadMenuItem Text="Help" Enabled="false"></telerik:RadMenuItem>
    </    Items>
    </    telerik:RadMenu>
  3. Set the EnableEmbeddedSkins property to False.
  4. In the Solution Explorer, create a new "Green" directory in your project.
  5. Copy the default RadMenu skin files from the installation directory to the "Green" directory; copy both the \Menu directory that contains the images for this skin and the Menu.Default.css file that defines the skin styles.
    The file path will typically be similar to this example: \Program Files\Telerik\<Your Version of RadControls for ASPNET>\Skins\Default.
  6. In the Solution Explorer, rename "Menu.Default.css" to "Menu.Green.css". The Solution Explorer should now look something like the following:


  7. Open Menu.Green.css and replace all instances of _Default with _Green. Then save the file:


  8. Drag the "Menu.Green.Css" file from the Solution Explorer onto your Web page. This automatically adds a reference to the page "<head>" tag as a "<link>" to the new stylesheet:
  9. Change the Skin property of your RadMenu control to "Green".
  10. Run the application. The new "Green" skin looks just like the Default skin:
 

Css classes for root items

  1. In your favorite drawing tool, create a graphic that consists of a single light green rectangle. Save this graphic over the Menu|MenuBackGround.gif file.
  2. Run your application: notice the new background on the root items:
  3. The font on the items is too light for the new background. To fix this, we need to change the stylesheet. Before starting to modifying the style sheet, however, take a look at the DOM-tree of RadMenu:
    [HTML] Root Item from RadMenu DOM-tree  Copy Code
    <div id="RadMenu1" class="RadMenu RadMenu_Green ">
         <ul class="rmHorizontal rmRootGroup">
           <li class="rmItem rmFirst">
             <a href="#" class="rmLink ">
                <span class="rmText">File</span>
             </a>
             ...
            </li>
          </ul>
    </    div>
  4. The class that controls the font of the root items is .rmLink. In the "Menu.Green.Css" file, set the color to "green" and line-height to "26px":
    [CSS] .rmLink Copy Code
    .RadMenu_Green .rmLink
    {
         line-height: 26px;
         text-decoration: none;
         color: green;
         position: relative;
         display: inline-block !important;
    }  
  5. Change the border color to green, using the top-level .RadMenu_Green class:
    [CSS] border color Copy Code
    .RadMenu_Green
    {
          border: 1px solid green;
          background: #fff url(Menu/Menubackground.gif) repeat-x top left;
          text-align: left;
    }
  6. The hover state of menu items is natively achieved by the pseudo class hover. Change the background-color on that class to "green" and the color to "#aad199"
    [CSS] hover state Copy Code
    .RadMenu_Green .rmRootGroup .rmLink:hover,
    .RadMenu_Green .rmRootGroup .rmFocused,
    .RadMenu_Green .rmRootGroup .rmExpanded
    {
         background-color: green;
         color: #aad199;
    }
  7. Run the application. The menu should now look as follows:

Css classes for child items

  1. Before changing the child menus, take another look at the DOM-tree for RadMenu, this time focusing on the child menus:
    [HTML] child items  Copy Code
    ...
    <ul class="rmVertical rmGroup rmLevel1">
         <li class="rmItem rmFirst">
           <a href="#" class="rmLink ">
             <span class="rmText">New...</span>
           </a>
           ...
         </li>
    </    ul>
    ...
  2. The class that controls the overall visual appearance of child items is the rmGroup class. Use this class to change the border around all the child items to green:
    [CSS] .rmGroup Copy Code
    .RadMenu_Green .rmGroup
    {
         border: 1px solid green;
         background-color: #fff;
    }
  3. Individual child items are controlled by the .rmHorizontal or .rmVertical class, depending on their flow. Use these classes to give items a green border:
    [CSS] .rmVertical .rmItem Copy Code
    .RadMenu_Green .rmHorizontal .rmItem { border-right: 1px solid green; }
    .RadMenu_Green .rmVertical .rmItem { border-bottom: 1px solid green; }
  4. The hover state for child menu items is controlled by the pseudo class hover. Use this to change the background color when the mouse is over child items:
    [CSS] .rmGroup hover state Copy Code
    .RadMenu_Green .rmGroup .rmLink:hover,
    .RadMenu_Green .rmGroup .rmFocused,
    .RadMenu_Green .rmGroup .rmExpanded
    {
         color: #fff;
         background: #aad199;
    }
  5. The separator item is handled by a different class, .rmSeparator. Use this to change the color and margin of the separator:
    [CSS] .rmSeparator Copy Code
    .RadMenu_Green .rmHorizontal .rmSeparator
    {
         height: 20px;
         width: 1px;
         line-height: 20px;
         background-color : #aad199;
         border: 0;
    }
    .RadMenu_Green .rmVertical .rmSeparator
    {
         height: 1px;
         margin: 2px 0;
         border: 0;
         background-color: #aad199;
         line-height: 1px;
    }
  6. Run the application to see the effect of these changes:

Advanced Skinning techniques

  1. RadMenu uses two auxiliary classes, .rmFirst and .rmLast, that increase it’s skinning capabilities. The .rmFirst class is applied to every first .rmItem class on a level, and the .rmLast class is applied to the last .rmItem on a level. The Inox and Office2007 skins make heavy use of these two classes for skinning the first and last items of the group. Create a new entry to use the .rmFirst class to add a bar to the top of the first item in a vertical list:

    [CSS] .rmFirst Copy Code
    .RadMenu_Green .rmVertical .rmFirst { border-top: 3px solid #aad199; }

  2. In order for disabled items to have a distinct appearance from ordinary menu items, the .rmItem class has a .rmDisabled class. Use this to italicize the text on disabled items:

    [HTML] .rmDisabled Copy Code
    .RadMenu_Green .rmRootGroup .rmItem .rmDisabled .rmText,
    .RadMenu_Green .rmGroup .rmItem .rmDisabled .rmText
    {
    color: #999;
    font-style:italic;
    }
  3. Run the application. Notice the result of these changes:

See Also