set background transparent for radmenu

11 posts, 0 answers
  1. niloofar
    niloofar avatar
    58 posts
    Member since:
    Aug 2010

    Posted 10 Jan 2011 Link to this post

    hi
    how can i set background=transparent ?
    its not fire
    thanks
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Jan 2011 Link to this post

    Hello Niloofar,

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

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. niloofar
    niloofar avatar
    58 posts
    Member since:
    Aug 2010

    Posted 10 Jan 2011 Link to this post

    thank you very much
  5. Stuart
    Stuart avatar
    21 posts
    Member since:
    Jan 2011

    Posted 11 Jul 2012 Link to this post

    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;
              
          }
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 11 Jul 2012 Link to this post

    Hello,

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

    Thanks,
    Princy.
  7. Stuart
    Stuart avatar
    21 posts
    Member since:
    Jan 2011

    Posted 11 Jul 2012 Link to this post

    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
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jul 2012 Link to this post

    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.
  9. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 18 Jul 2012 Link to this post

    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

  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2012 Link to this post

    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.
  11. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 19 Jul 2012 Link to this post

    Thanks, that does it!
  12. Anbu
    Anbu avatar
    1 posts
    Member since:
    Feb 2011

    Posted 23 Jan 2013 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017