How to set both RightLogo and LeftLogo for a menu item

Requirements
RadControls version	v4.x or Telerik.Web.UI v2007.3 1425
.NET version	2.0
Visual Studio version	2005
programming language	C#
browser support	all browsers supported by RadMenu

PROJECT DESCRIPTION

The ImageUrl property can be used to set a left logo for a menu item as suggested by the help topic on Control the positioning of the image (ImageUrl). How about setting a right logo to an item that has already used the ImageUrl property for a left logo? This can be achieved by applying a custom class which has the background attribute set to an appropriate image.



STEPS TO REPRODUCE THE SCENARIO:

For this example I use the WebBlue skin (assume that it is located in [ProjectFolder]/Skins/WebBlue).

1. Add the following classes in the head tag of the aspx page (<style> ...</style>). Alternatively, these classes can be included to the css file of the skin.

2. You also add the following to the rmLeftImage class to vertically center the left image. Here height should be set to the exact height of the image; margin-top should be adjusted in order to properly center the image (it may vary depending on the current skin).

3. Set the ImageUrl, CssClass, FocusedCssClass, and ExpandedCssClass properties like this:

STEPS TO REPRODUCE THE SCENARIO:

For this example I use the CssBlue skin.

1. Add the following classes to the css file of the skin. Alternatively, these files can be included in the head tag of the aspx page (<style> ...</style>).

.RadMenu_CssBlue .Custom

{

/*same as the original .link class + the following:*/

background:transparent url(img/groupImage.gif) rightright center no-repeat;

}

.RadMenu_CssBlue .Custom:hover

{

/*same as the original .link:hover class + the following:*/

background:transparent url(img/groupImage.gif) rightright center no-repeat

!important;

}

.RadMenu_CssBlue .CustomOtherStates

{

/*same as the original .expanded class + the following:*/

background:transparent url(img/groupImage.gif) rightright center no-repeat;

}

2. You also add the following to the leftImage class to vertically center the left image. Here height should be set to the exact height of the image; margin-top should be adjusted in order to properly center the image (it may vary depending on the current skin):

3. Set the ImageUrl, CssClass, FocusedCssClass, and ExpandedCssClass properties like this: