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

set background transparent for radmenu

10 Answers 599 Views
Menu
This is a migrated thread and some comments may be shown as answers.
niloofar
Top achievements
Rank 1
niloofar asked on 10 Jan 2011, 07:11 AM
hi
how can i set background=transparent ?
its not fire
thanks

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 10 Jan 2011, 11:43 AM
Hello Niloofar,

You can achieve this my modifying the preset CSS like below.
CSS:
.RadMenu_[SkinName].rmRootGroup
      {
          background: Transparent !important;
      }

Thanks,
Shinu.
0
niloofar
Top achievements
Rank 1
answered on 10 Jan 2011, 12:18 PM
thank you very much
0
Stuart
Top achievements
Rank 1
answered on 11 Jul 2012, 10:17 AM
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;
          
      }
0
Princy
Top achievements
Rank 2
answered on 11 Jul 2012, 11:11 AM
Hello,

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

Thanks,
Princy.
0
Stuart
Top achievements
Rank 1
answered on 11 Jul 2012, 01:25 PM
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
0
Princy
Top achievements
Rank 2
answered on 12 Jul 2012, 07:22 AM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 18 Jul 2012, 07:21 PM
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

0
Princy
Top achievements
Rank 2
answered on 19 Jul 2012, 05:49 AM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 19 Jul 2012, 11:22 AM
Thanks, that does it!
0
Anbu
Top achievements
Rank 1
answered on 23 Jan 2013, 11:35 PM
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.

Tags
Menu
Asked by
niloofar
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
niloofar
Top achievements
Rank 1
Stuart
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Martin Roussel
Top achievements
Rank 1
Anbu
Top achievements
Rank 1
Share this question
or