Forums

Home / Developer Network / Forums / Sitefinity: Designing & Styling > CSS Navigation (Horizontal with drop down menus)

• Stefano

  Posted on Jun 28, 2011 (permalink)

  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

  Reply

• Jordan Jordan

  Posted on Jun 28, 2011 (permalink)

  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

  Attached files

  • Custom-navigation.jpg

  Reply

• Stefano

  Posted on Jun 28, 2011 (permalink)

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

  Reply

• Amy

  Posted on Jan 24, 2012 (permalink)

  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
  

  Reply

• Jordan Jordan

  Posted on Jan 30, 2012 (permalink)

  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

  Reply

Home / Developer Network / Forums / Sitefinity: Designing & Styling > CSS Navigation (Horizontal with drop down menus)