set background transparent for radmenu

[niloofar]

hi
how can i set background=transparent ?
its not fire
thanks

[Shinu]

Hello Niloofar,

You can achieve this my modifying the preset CSS like below.
CSS:

.RadMenu_[SkinName].rmRootGroup
      {
          background: Transparent !important;
      }

Thanks,
Shinu.

[niloofar]

thank you very much

[Stuart]

Hi 

How do I actually use(call) this overwrite css? I have attempted the code below, but it is still black. Thanks

<telerik:RadMenu Runat="server" Width="100%" ID="radMenu" Skin="Black" class="RadMenu RadMenu_Black" >
 </telerik:RadMenu>

.RadMenu_Black.rmRootGroup
      {
          background-color:White!important;

      }

[Princy]

Hello,

Try setting the following CSS.
CSS:

<style type="text/css">
 .rmItem
 {
  background-color: White!important;
 }
</style>

Thanks,
Princy.

[Stuart]

Thanks this works, can I ask another tip

How do you change the colour of the hover on a RadMenuItem on a Preset Skin i tried

.RadMenu_Default .rmLink:hover,
.RadMenu_Default .rmFocused, .rmLink
.RadMenu_Default .rmSelected
{
    background-color: red !important;
    background-image: none !important;
    background-position: 0px 0px !important;
}

This does colour the menu but the Skin Colour i.e Black is still ontop of the selection when hovered on it.

Thanks

[Princy]

Hi Stuart,

Try overriding the default CSS as follows to achieve your scenario.

CSS:

.RadMenu_Black a.rmLink
 {
  background-color: red !important;
  background-image: none !important;
 }

Thanks,
Princy.

[Martin Roussel]

Princy,

I have the same question (last one asked in here). I tried your solution and it doesnt seem to work. My menu uses the Default skin (Iooks like not specifying any skin uses the "Default" one). I try to remove the sprite background image (dark gray bar) appearing when hovering the items in submenu (for root menu, im alright). Tried numerous CSS combinations without success. Screenshot in attachment. Here is the code:

<telerik:RadMenu ID="RadMenu2" runat="server" CssClass="menu3" OnItemClick="RadMenu2_ItemClick" EnableImageSprites="true" BorderStyle="None" Flow="Vertical">
</telerik:RadMenu>

RadMenuItem MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "List";
MenuItem.Value = "List.aspx";
MenuItem.CssClass = "ListItem";


//sub-menu
RadMenuItem MenuItem4 = new RadMenuItem();
MenuItem.Items.Add(MenuItem4);
MenuItem4.Text = "Test2";
MenuItem4.Value = "Test.aspx";
MenuItem4.CssClass = "TestItem";

MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "Test";
MenuItem.Value = "Test.aspx";
MenuItem.CssClass = "TestItem";


MenuItem = new RadMenuItem();
RadMenu2.Items.Add(MenuItem);
MenuItem.Text = "Signage Request Long Text Test Very Very Very Very Very Long";
MenuItem.Value = "";
MenuItem.CssClass = "OtherItem";

.menu3 .rmGroup
{
    background-color: #f3f5f5 !important; /*#f3f5f5*/
    background-image: none !important;
}


.RadMenu_Default rmGroup:hover
 {
  background-color: red !important;
  background-image: none !important;
  background-position: 0px 0px !important;
 }


.menu3 .rmGroup:hover
{
    background-color: white !important;
    background-image: none !important;
    background-position: 0px 0px !important;
}

div.menu3
{
    width:90%;
    padding: 20px 10px;
    z-index:1;
    white-space: normal;
}

.menu3 span.rmText
{
    margin: 5px 0px 0px 15px;
}

.menu3 span
{
    width: 150px;
    max-width: 150px;
}


div.menu3 span.rmLeftImage
{
    height: 24px;
    width: 24px;
}


.menu3 .rmLeftImage
{
    background: transparent url("/Images/qsfLayout-Q2-2012.png") no-repeat 0 0;
    margin: 0;
    padding: 0;
}

.ListItem
{
    height:auto;
    /*min-height:50px; */
}

.ListItem .rmLeftImage
{
      background-position: -180px -200px;
}

.TestItem
{
    height:auto;
    /*min-height:50px; */
}

.TestItem .rmLeftImage
{
    background-position: -240px -200px
}

.OtherItem
{
    height:auto;
    /*min-height:50px; */
}

.OtherItem .rmLeftImage
{
    background-position: -270px -200px;
}

One extra question btw, how can I set the margin for the text in my submenu? I succeeded this for the root menu with ".menu3 span.rmText"

TIA


[Princy]

Hi,

Try overriding the default css as follows to achieve your scenario.

CSS:

.RadMenu_Default .rmVertical .rmText,.RadMenu_Default a.rmLink
{
 background-image: none !important;
}
.rmSlide .rmItem .rmText
{
 margin-left:30px !important;
}

Hope this helps.

Thanks,
Princy.

[Martin Roussel]

Thanks, that does it!

[Anbu]

for me, nothing worked. so i set EnableEmbeddedSkins="false" with no Skin property for RadMenu.
then i use the below css to format,
.RadMenu a.rmLink
{
color: White !important;
padding-left: 20px;
text-align: justify;
font-size: 14px;
 }

that's it. Now menu has the Transparent background.

I hope, this may help some others...

Thanks.