Apply style to only one menu

[Brian]

Hi

I have created a user control (ascx) that contains a RadMenu comprised of images.  In order to remove the padding from around the images I use the following code (http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx):

<style type="text/css">

    

        div.RadMenu a.rmLink .rmLeftImage

        {

            position: relative;

        }

        

        div.RadMenu .rmItem .rmLink .rmLeftImage,

        div.RadMenu .rmItem .rmLink,

        div.RadMenu .rmLink .rmText

        {

            margin: 0;

            padding: 0;

        }

        

</style>

This works perfectly for the menu in my user control.  However, the user control is then embedded in a master page which contains its own RadMenu, and the above code also removes the padding from that menu, which I don't want to happen.

So basically I require that the style be applied only to the RadMenu that's in the user control and to not affect the RadMenu that's in the master page...

Thanks for any suggestions

[Yana]

Hi Brian,

I suggest you set CssClass property to the menu in the user control:

<telerik:RadMenu ID="RadMenu1" CssClass="imagesOnly" runat="server">
...

and use its value to apply the styles only to it:

div.imagesOnly a.rmLink .rmLeftImage
{
   position: relative;
}

div.imagesOnly .rmItem .rmLink .rmLeftImage,
div.imagesOnly .rmItem .rmLink,
div.imagesOnly .rmLink .rmText
{
   margin: 0;
   padding: 0;
}

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Brian]

Awesome that worked perfectly - thanks a lot for the very fast response

Brian

[DanHoughton]

Hi Yana,

This is helpful.  I need to have a menu where the menu item is an image and the sub menu items are text.  I've tried and tried and can't figure out how to accomplish this.  Any ideas?  Thanks.

Dan

[Yana]

Hi Dan,

Please modify the styles like this:

<style type="text/css">
    div.imagesOnly .rmRootGroup a.rmLink .rmLeftImage
    {
        position: relative;
    }
    div.imagesOnly .rmRootGroup .rmItem .rmLink .rmLeftImage,
    div.imagesOnly .rmRootGroup .rmItem .rmLink,
    div.imagesOnly .rmRootGroup .rmLink .rmText
    {
        margin: 0;
        padding: 0;
    }
    div.imagesOnly .rmGroup .rmLink .rmText
    {
        margin: 0 0 0 4px;
        padding: 0 54px 0 28px;
    }
</style>

"rmRootGroup" is for the root items, "rmGroup"  - for child items.


All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[DanHoughton]

Hi Yana,

Works perfect.  Thanks for you help.

Dan

[DanHoughton]

Hi Yana,

One more question - I have applied the style you suggested and that works great except when I have disabled menu items.

How do I change the background color for disabled items?

Thanks.

Dan

[Yana]

Hello Dan,

RadMenu renders "rmDIsabled" css class for the disabled items:

div.imagesOnly .rmItem .rmDisabled,
div.imagesOnly .rmDisabled .rmText
{
  background: red !important;
}

You can also set DisabledImageUrl property to set different image for them.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.