+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Skinning the Sitefinity Navigation

by Grigori Karanikolov


Ever seen a website with no navigation? I certainly haven’t.  It’s an essential element in every website and there’s a golden rule that the navigation has to be visually appealing and has to really do the job of helping your visitors find their way through your website easily. Sitefinity helps you create your website navigation easily and quickly thanks to the Navigation Widget, which actually wraps around several of the well known Telerik ASP.NET AJAX RadControls - specifically the RadMenu, RadPanelBar, RadTreeView, RadTabStrip and RadSiteMap.
Changing the appearance of these controls is quite easy and as the numerous developers and designers who use them worldwide know, only sky is the limit for what appearance you can achieve with them. There are several approaches that one can take.

Changing the appearance of the Sitefinity Navigation using the embedded skins

The navigation controls, that are wrapped in the Sitefinity Navigation widget, being a part of the Telerik ASP.NET AJAX RadControls Suite, have their own documentation, samples and demos. There are plenty of resources that illustrate how you can customize and skin them, as well as give detailed information about the different skins that are embedded into each control:

image


“Embedded” means that those skins ship out of the box with the controls and consequently with Sitefinity, so you can switch to and between them right away. Doing so is pretty easy:


Step 1. Drag and drop your Sitefinity Navigation widget on your page or page template
image


Step 2. Click on the Edit button and select the desired behavior of the widget: image


By now your widget would look something like this:

image

Now, you can open the Design settings, visible on the screenshot of the widget designer above, and add the name of the desired embedded skin in the field “Wrapper CSS Class”. As mentioned, listing of the skins and their names can be obtained in the demo or documentation pages of the RadControls:

image


The result:

Horizontal Navigation:

image

Horizontal navigation with dropdown menus:
image

Horizontal navigation with tabs:
image

Want to go even further? Create a custom skin using the Visual Style Builder!


The Telerik Visual Style Builder is an absolutely free-to-use tool that you can use to create custom skins from scratch or based on one of the existing embedded ones without touching a single line of CSS. Todd Anglin demonstrates how to use it in a video here. It is easy to use and it lets you customize different RadControls in the same time.

Step1. Set a skin name (that is an important step that will be used shortly afterwards)

Step 2. Choose which controls you would like to skin

image


Step 3. Click Create

Here, in accordance with the explanations that you got from Todd’s video, you can change base colors, change hue, saturations and fine tune all the elements of your controls. Here are my own variations of the Forest base skin:
image

We are nearly there! Now we can click on the download button and will get a ZIP file which contains our Navigation Widget templates:

image

These are the cascading style sheets that would skin our navigation and the folders contain any images that the skins use (depends on what you created with the Visual Style Builder). You can just copy all of these in the Global folder of your website theme, or if you would like to make your theme consistent with the recommended practices from the designer guide, you can move the images to the Images folder and correct the path to them from within the CSS files:

image

That’s it! As you might have noticed above, the skin name that we set in Step 1 now exists in our CSS as part of the CSS classes (i.e. RadMenu_Autumn). For Sitefinity, this is actually a wrapper CSS class, so we can easily just put Autumn in the Wrapper CSS class field and start using the skin we just created:
image

Geeks-R-Us

Those of you who strive for maximum perfection are always welcome to make final adjustments directly in the CSS files. You can always refer to the ASP.NET AJAX controls documentation to find out about the CSS classes the controls use. I personally find it really convenient to use browser features like Mozilla’s Firebug add-on to experiment and fine tune my styles and then introduce the changes into my CSS:
image

And there you have it! A streamlined way to professionally create a sleek navigation skin with minimum effort!

5 comments

Leave a comment
  1. John Aug 05, 2011

    Hi

    How can we have navigation like on the left on this page http://www.gordonramsay.com/thesavoygrill/theatre/Pre_theatre where navigation items have different attributes even when they are not selected or hovered over?

    Thanks

    Regards

  2. Grisha 'Greg' Karanikolov Aug 09, 2011
    Hey John,

    As far as I noticed on the website you pointed to above, they have a vertical navigation, where the menu items inside the active parent node are colored in one color and the inactive nodes are colored differently, they have styling for the active and hovered items. They have achieved this by implementing a custom menu through definition lists where each element has its own CSS selector. You can achieve that with several RadControls or a combination of these. With RadMenu for example, you would be able to have this functionality if you create a custom ascx template where you can assign multiple CSS selectors to each element.
    I contacted the ASP.NET AJAX team that is responsible for these, they have ideas for several different approaches here. If you have an account you might want to contact them directly via a ticket or post that in the ASP.NET AJAX controls forums here:
    http://www.telerik.com/community/forums/aspnet-ajax/menu.aspx
    Hope that helps!
  3. Chris May 15, 2013
    Hi,

    Could I please ask if I need to use "tabs" for do a menu like this http://www.crescentpointenergy.com/ ?

    Thanks,
    Chris



  4. Grisha 'Greg' Karanikolov May 16, 2013
    Hi Chris,
    If you'd like to create a menu like the one you showed above - I think it's RadMenu or Kendo UI menu that you should use. Don't be confused by the fact that the dropdown menu spreads through the whole width of the page - it's still a dropdown.
    The TabStrip would work for a bit different scenario - where clicking on a tab would expand a second level menu. It's another option, but it's not dropdown. Check this out for an example of what I'm talking about.

    Hope that helps!
    Greg
  5. Chris May 17, 2013
    Hi,

    Could I please ask if I need to use "tabs" for do a menu like this http://www.crescentpointenergy.com/ ?

    Thanks,
    Chris



    Leave a comment