More in this section

Forums / Developing with Sitefinity / How to apply different styling on SiteMenu items

How to apply different styling on SiteMenu items

9 posts, 0 answered
  1. Rama Krishna
    Rama Krishna avatar
    14 posts
    Registered:
    20 Nov 2008
    12 Dec 2008
    Link to this post
    Hi,

    I am new to Sitefinity.  I want to apply different styling on item of SiteMenu  when mouse over event occurs.   Please assist me.

    Thanks in advance.

    - RK
      
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    12 Dec 2008
    Link to this post
    Hi Rama,

    I would suggest you modify Sitefinity Site Menu control (~/Sitefinity/UserControls/Navigation35/SiteMenu.ascx) to achieve the required functionality. Here is an example on how to set yellow color on mouse over:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SiteMenu.ascx.cs" Inherits="UserControls_SitemapMenu" %> 
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
     
     
    <style type="text/css"
    .rmLink:hover 
      background-color: yellow; 
    </style>  
     
    <asp:SiteMapDataSource ID="SitemapDataSource1" runat="server" ShowStartingNode="false" /> 
    <telerik:RadMenu ID="RadMenu1" runat="server" Visible="true" DataSourceID="SitemapDataSource1" OnItemDataBound="RadMenu1_ItemDataBound"
    </telerik:RadMenu> 

    I hope this helps.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Rama Krishna
    Rama Krishna avatar
    14 posts
    Registered:
    20 Nov 2008
    17 Dec 2008
    Link to this post

    Thanks! This works great. The other question I have now is in the menu control can I apply one style (font/colour..) for parent nodes and different style for child nodes.

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    17 Dec 2008
    Link to this post
    Hello Rama Krishna,

    Try adding the following class to the code I sent you:

    .rmLevel1 
        background-color:green !important; 

    .rmLevel[n] applies to item containers at the respective level. (Does not apply to the root item group.)

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    06 Feb 2009
    Link to this post
    Could someone let me know if something has changed with this? I'm running version 3.5.1747.2

    If I add a .rmLink style I can change the color but neither .rmLevelx or .rmLink:hover seems to work.

    I can turn the main menu any color I like but on mouse over, it turns white with black letters and the drop down menu is whatever color I set the main menu to with the .rmLink style
  6. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    06 Feb 2009
    Link to this post
    Also, we are a standard edition client. I'm not sure if I should post this question in a different forum. Is this one for community users?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    09 Feb 2009
    Link to this post
    Hi Sharon,

    Thank you for using our services.

    .rmLink:hover {background-color: } should work and change the style of a menu item. Could you paste or attach your css file and tell us which items you want to change on hover. Here is a link to RadMenu css classes description http://www.telerik.com/help/aspnet-ajax/menu_appearancecssselectors.html

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Sharon
    Sharon avatar
    28 posts
    Registered:
    29 Jul 2008
    10 Feb 2009
    Link to this post
    I hadn't tried it in my css file yet. I modified ~/Sitefinity/UserControls/Navigation35/Sitemenu.ascx

    Here's what I did:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SiteMenu.ascx.cs" Inherits="UserControls_Nav_SiteMenu" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

    <style type="text/css">
    .rmLink
    {
      background-color: Aqua; 

    .rmLink:hover

      background-color: Yellow; 

    .rmLevel2

      background-color: Yellow; 
    }
    </style> 

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    <telerik:RadMenu ID="RadMenu1" runat="server" DataSourceID="SitemapDataSource1" OnItemDataBound="RadMenu1_ItemDataBound" style="width: 100%">
    </telerik:RadMenu>

    With this I get an aqua menu that on hover has a white background with black letters and the drop down levels are also aqua.

    I just tried putting it in my css file as well and it didn't help either.

    Thanks for helping me with this.

    Sharon

  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    11 Feb 2009
    Link to this post
    Hello Sharon,

    You could check whether one of the themes you use or default skins do not apply its classes. You can disable default skins setting EnableEmbeddedSkins property of RadMenu to false. However, I do not experience problems with the example you have. I modified it and made some comments you may find below. The example is basic and shows using of classes. If you want to style your menu in a better way, you should have complex classes.

    <style type="text/css"
    .rmLink 
      background-color: Aqua;  
    /* this will changed the color of the text to green instead of black */  
    .rmText 
        color:Green; 
    /* this will change the color on hover, applies to the anchor if there is one*/ 
    .rmLink:hover 
    {  
      background-color: Yellow;  
    }  
     
    /* apply to the second level of pages - root pages
    - (Home)
     - (subHome level1)
        -(sub2Home level2)*/ 
    .rmLevel2 
    {  
      background-color: Yellow !important;  
    </style>  

    An example of RadMenu classes could be found at your ~/App_Themes/Blue with right sidebar/Menu folder. You can use the file there(styless.css) instead of starting from scratch.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Register for webinar
9 posts, 0 answered