Sitefinity CSS classes for basic vertical navigation with sub-pages

Question

I am having such a difficult time trying to figure out how to style my basic vertical navigation with drop-down sub-pages in Sitefinity. I cannot find a simple tutorial or explanation for what CSS classes I need to target in order to change the style of my navigation, the documentation provided is SO UNCLEAR, and I haven't found much help in the forums. All I can find so far is that I need to create a main.css file which I use to create a customized skin, but I can't get a straightforward answer about what to target for this specific look.

Any help would be much appreciated from this Sitefinity newcomer!

Answer 1

The Navigation Widget is using the Telerik RadControls to generate the menu's. This could be:

• RadMenu
• RadPanelBar
• RadTreeView
• ...

Based on the Navigation mode you choose, one of these is rendered. Probably you are using the Simple Vertical Menu?

You could override the classes that are generated, or define a Skin.

• Goto the designer of your Navigation Widget
• Add a name (e.g. CustomSKin) into the 'Wrapper CSS' field.
• Check your markup using e.g. Firebug or Chrome Extensions. You will see this prefix added to the markup of your navigation section.

Then you can declare the classes you want to style like this:

.RadPanelBar_CustomSkin .rpRootGroup {
   // Your css
}

You could always take a look at the documentation of the RadControls that Telerik offers: http://www.telerik.com/help/aspnet-ajax/panelbar-appearance-css-selectors.html

Kind regards, Daniel Plomp

Answer 2

The easiest way to me seems to go to the Sitefinity Template builder, then follow the steps bellow:

1. Go to the http://templatebuilder.sitefinity.com
2. Go to Navigation and drag a vertical menu.
3. Go to appearance, choose a skin for the navigation from the Navigation Skin dropdown.
4. Export the template (save it to your had disk).
5. Unzip it and go to the \css folder.
6. Now change the Menu.SkinName.css.

Hope this helps. I guess the folks at Telerik didn't put more info on styling menus as there is a template builder that gets some of the work done.