Changing Skins of Top Nav Menu

5 posts, 0 answers
  1. spcrmcnst
    spcrmcnst avatar
    4 posts
    Member since:
    Sep 2009

    Posted 05 Sep 2009 Link to this post

    Using the IE developer tool to search for CSS classes for top nav menu (RadMenu), I see classes such as .RadMenu_Black .rmLink in WebResource.axd file.
    What is the suggested way to change the look and feel of these menu controls?

    I'm new to telerik controls, and i would really appreciate your advices.

    Thank you.
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 07 Sep 2009 Link to this post

    Hello there,

    You can create a new custom skin using one of the embedded skins as a base as it is demonstrated here.

    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

  3. spcrmcnst
    spcrmcnst avatar
    4 posts
    Member since:
    Sep 2009

    Posted 11 Sep 2009 Link to this post

    Thank you very much for your response.
    Since I am not hardcoding the navigation items (menu items), I am using C# to programmatically add child level items.
    I looked at your link, and I was able to change some appearance by making "TopNavMenu.EnableEmbeddedSkins = false;" and applying styles using inline code.
    However, this is very limited since it's hard to (if not impossible) to change the appearance of the flyout menu (only to certain extent) and i'm not sure where to apply the hover style.
    I've copied and pasted Menu.Black.css to solutions folder (with a new name) and tried to incorporate the CSS with the code, but I'm not sure how to do this. Could you give me some suggestions on this?
    I'll try to look into your link in more depth to figure it out, but just thought would be nice for some expert advise :).

    I really appreciate this.

    Thank you.
  4. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 Sep 2009 Link to this post

    Hi spcrmcnst,

    You can try our new Visual Style Builder control to make your custom skin. In addition, once you're done with skin you will have to register it as described in this help article.

    Kind regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. spcrmcnst
    spcrmcnst avatar
    4 posts
    Member since:
    Sep 2009

    Posted 18 Sep 2009 Link to this post

    Thank you for your response.
    I have created a custom skin using Visual Style Builder, but I can't figure out a way to register this skin to my project.
    I'm basically using RadMenu on MOSS Top Navigation control.
    I've tried setting EnableEmbeddedSkins to false and even adding the following lines of code.  
                HtmlLink link = new HtmlLink();
                link.Href = "~/_layouts/Styles/Menu.Custom.css";
                link.Attributes.Add("type", "text/css");
                link.Attributes.Add("rel", "stylesheet");
                Page.Header.Controls.Add(link);
    First I'm not sure where to put the css file.
    I've looked at the Registering Custom Skin page on Telerik site and I've tried adding css reference to the MasterPage and the C# file.
    Currently I have a C# project that creates the navigation control, and this is registered in the MasterPage along with the Telerik Tag Prefix.
    I can have one of the built-in skins come up as the menu in my SharePoint site, it's just that I cannot register the custom skin I created using Visual Style Builder.
    Could you possibly walk me through the basic steps of the following:
    1. Where to add the css file (and its image folder)
    2. What Iines I need to add in the C# project.
    3. If I need to make any changes in the MasterPage file.

    Please let me know if I need to make this more clear.
    Thank you so much for your help!
Back to Top