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
- Drag a RadMenu from the toolbox onto a new AJAX-enabled application Web form.
- 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>
|
- Set the EnableEmbeddedSkins property to False.
- In the Solution Explorer, create a new "Green" directory in your project.
- 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. |
- In the Solution Explorer, rename "Menu.Default.css" to "Menu.Green.css". The Solution Explorer should now look something like the following:
- Open Menu.Green.css and replace all instances of _Default with _Green. Then save the file:
- 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:
- Change the Skin property of your RadMenu control to "Green".
- Run the application. The new "Green" skin looks just like the Default skin:
Css classes for root items
- 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.
- Run your application: notice the new background on the root items:
- 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>
|
- 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;
}
|
- 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;
}
|
- 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;
}
|
- Run the application. The menu should now look as follows:
Css classes for child items
- 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>
...
|
- 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;
}
|
- 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; }
|
- 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;
}
|
- 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;
}
|
- Run the application to see the effect of these changes:
Advanced Skinning techniques
-
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; }
|
-
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;
}
|
- Run the application. Notice the result of these changes:
For more information about Cascading Style Sheets, see
See Also