CSS Navigation (Horizontal with drop down menus)

Posted by Community Admin on 05-Aug-2018 07:35

CSS Navigation (Horizontal with drop down menus)

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 28-Jun-2011 00:00

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

Posted by Community Admin on 28-Jun-2011 00:00

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

Posted by Community Admin on 28-Jun-2011 00:00

Thank you. I resolve the problem...=)

Posted by Community Admin on 24-Jan-2012 00:00

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

Posted by Community Admin on 30-Jan-2012 00:00

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

This thread is closed