+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / CSS Navigation (Horizontal with drop down menus)

CSS Navigation (Horizontal with drop down menus)

5 posts, 0 answered
  1. Stefano
    Stefano avatar
    29 posts
    Registered:
    14 Jun 2011
    28 Jun 2011
    Link to this post
    Hi,
    I can't change the color of the nanigation menu of sitefinity (not a radmenu). I tried with css class but it doesn't work. Also i change the parameter "backcolor" of the "advanced options" but nothing happens.What can i do?
    Is there an example or a tutorial to do that?

    Stefano
  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    28 Jun 2011
    Link to this post
    Hello Stefano,

    I have attached a short tutorial on how to customize the navigation in Sitefinity. There are 4 different types of controls behind the navigation but the customization method is the same. As it is shown on the attached file you should use the Wrapper CSS class (skin) property. If you are using RadTabStrip  for example and enter a value in this filed (for example Stefano) it will construct you a css selector RadTabStrip_Stefano. Then you customize it with CSS. For example:

    .RadTabStrip_Stefano .rtsUL .rtsLI .rtsLink {
    background-color: red;
    }


    Please let me know if you have any troubles with this.

    Greetings,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Stefano
    Stefano avatar
    29 posts
    Registered:
    14 Jun 2011
    28 Jun 2011
    Link to this post
    Thank you. I resolve the problem...=)
  4. Amy
    Amy avatar
    2 posts
    Registered:
    12 Jul 2011
    24 Jan 2012
    Link to this post
    Hi!
    I'm new to Sitefinity, and I'm trying to make a vertical menu.  I created an ascx file with a placeholder for the radmenu.  I then went into the Telerik Visual Style Builder and created the skin that I wanted for the display.  When I use the css file that the builder produces, I get a menu with a two tone gray on in the root menu.  When I mouse over an item that expands, I see a small whitish square on the right hand side of that menu item.  I even tried starting from scratch a few times, with the last one using only the gray color 0xcccccc.  I still see a darker gray on the root menu.  I also tried modifying the css file that was produced with the tool, and I couldn't stop this weird oddity from happening? 

    Would you please give help me out?

    Thanks,
    Amy
  5. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    30 Jan 2012
    Link to this post
    Hello Amy,

    To use a skin created through the Visual Style Builder inside Sitefinity, please follow these steps:

    1. Open Visual style builder http://stylebuilder.telerik.com/ 
    2. Choose the navigation type that you want to customize - Menu (RadMenu), TabStrip (RadTabStrip) etc.
    3. In the Name field enter the name of your skin, you'll need this later (for ex. Jordan)
    4. Customize the skin in your own way
    5. After exporting the customized skin place the generated CSS file and the images in your theme's folder
    6. Go to your Sitefinity template and after the navigation is dropped choose Edit
    7. In the designer expand the Wrapper CSS class (Skin) and enter the name that  you have entered earlier in the Visual Style builder (for ex. Jordan)
    The Visual Style Builder generates CSS classes based on the name that you have provided. In my example it will generate ".RadMenu_Jordan" as a main selector. When you enter the Wrapper CSS class in the navigation control it will search for the same selector - .RadMenu_Jordan.


     
    Kind regards,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
5 posts, 0 answered