More in this section

Forums / Developing with Sitefinity / Difficulties with Menu CSS

Difficulties with Menu CSS

2 posts, 0 answered
  1. Andrew
    Andrew avatar
    29 posts
    24 Jun 2009
    03 Aug 2009
    Link to this post
    Good Day,

    I'm having a WORLD of trouble getting Sitefinity Menu's to accept common formatting.  I have tried using the Telerik Style Designer, and attached the resulting image as seen in the designer as Telerik-Designer.jpg.  The actual result is Menu-Adjustments.jog which as you can see if really different.

    As seen in Menu-Adjustments.jpg, I need to accomplish the following:

    1.  Menu should be on 1 line, 811px wide, need to remove extra padding to correct this.

    2.  Menu background is showing grey except over hovered and expanded items.  Hovered and Expanded should be using:
    background-image: url('menu/img/selectedback.jpg'); the rest of the menu should display back.jpg which can be seen currently as the background of the expanded menu.

    3.  There is a mysterious grey bar appearing on selected items, although this doesn't show in the designer.

    4.  Ideally I would like the seperator to be an image, if not it should be color code #663541

    I've tried every which way to correctly adjust the CSS, without much luck.  I have attached the entire theme folder as a zip.

    ANY assistance would be greatly appreciated.

  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    01 Feb 2016
    04 Aug 2009
    Link to this post
    Hello Andrew,

    Thank you for contacting Telerik Support.

    I have taken a look at the theme you have sent. Almost everything looked fine. However you were missing a couple of things. First of all you should have a file called in the root of your theme. In this skin file you should tell the RadMenu which skin to use. In this way your when you have a page or template using this theme the SiteMenu control knows that it has to load your custom skin. The skin file should look like this:
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
        Skin="DebbieCoon" EnableEmbeddedSkins="false" 

    Now after you have specified which skin to use for your custom theme you have to create a folder called Menu in which you will place the styles for this skin and necessary resources. I have played a little with your theme - created the skin file, moved all styles and images for the menu in Menu folder, and resolved the URLs for images. Please take a look at the attached image to see how the menu looks like on my end.

    As for the separator. You can take a look at the RadMenu Separators to see how to use them in your menus. After that the CSS class that you will have to use to define its style should be something like this:
    .RadMenu_DebieCoon li.rmSeparator 
        color:#663541 !important; 

    Take e look at the attached theme and see if it will satisfy your requirements. If you have more questions, please feel free to contact us.

    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
2 posts, 0 answered