This is a migrated thread and some comments may be shown as answers.

Apply style to only one menu

7 Answers 58 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 1
Brian asked on 09 Apr 2010, 03:31 PM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Yana
Telerik team
answered on 09 Apr 2010, 03:39 PM
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.
0
Brian
Top achievements
Rank 1
answered on 09 Apr 2010, 03:45 PM
Awesome that worked perfectly - thanks a lot for the very fast response

Brian
0
DanHoughton
Top achievements
Rank 1
answered on 10 Apr 2010, 07:43 PM
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
0
Yana
Telerik team
answered on 13 Apr 2010, 03:33 PM
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.
0
DanHoughton
Top achievements
Rank 1
answered on 13 Apr 2010, 03:39 PM
Hi Yana,

Works perfect.  Thanks for you help.

Dan
0
DanHoughton
Top achievements
Rank 1
answered on 18 May 2010, 05:42 AM
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
0
Yana
Telerik team
answered on 20 May 2010, 01:22 PM
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.
Tags
Menu
Asked by
Brian
Top achievements
Rank 1
Answers by
Yana
Telerik team
Brian
Top achievements
Rank 1
DanHoughton
Top achievements
Rank 1
Share this question
or