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

How to style the Sitefinity Navigation Widget

by Gabe Sumner

Sitefinity’s built-in navigation widget is used to quickly create page links.  These links are based on your web site’s sitemap and automatically updated when pages are added or removed.  However, by default this navigation might not be styled to match your web site. 

Restyled Sitefinity navigation control

This post will explore how to style Sitefinity’s navigation widget.

Select the desired navigation type

Sitefinity’s navigation widget has 8 selectable styles:

Different selectable navigation styles

Each of these styles renders different HTML markup and uses different embedded stylesheets.  Select the navigation style that most closely resembles the desired result.

Select a Skin for the Navigation Widget

The styling applied to the navigation widget is controlled by a skin.  By default, Sitefinity supports all of RadControl’s Skins.  These built-in skins can be added to the Design Settings to quickly restyle the navigation:

Using the included Sunset RadControls skin in Sitefinity's navigation widget

However, if none of these built-in skins are applicable to your web site, then a new skin can be created by typing a unique Wrapper CSS class (Skin) name:

Setting a custom skin for the Sitefinity navigation control

In this example, a new Skin is being defined and Sitefinity’s built-in skins will not be used.   

However, regardless of which skin is being used, Sitefinity loads a basic set of styles.  In the case of custom skins, these default styles might need overridden to produce the desired result.

Become familiar with the rendered HTML

Before restyling the navigation it’s important to become familiar with the markup being rendered by this widget.  The navigation types (horizontal, tabbed, etc.) utilize different underlying RadControls (RadMenu, RadTabstrip, etc.).  The RadControls documentation (example) can be used to understand this markup.

Alternately, tools like Firebug or the built-in developer tools in Chrome or IE can be used to explore the markup produced by the navigation widget.

Custom Skin class applied to the HTML rendered by the Sitefinity Navigation control

(Click the image above to zoom)

In this example, the important part is the RadMenu_mainnavigation class.  This is the custom skin that was created above.  This navigation can be restyled through your own custom CSS.

Create the CSS stylesheets

By examining the HTML rendered by the navigation widget and working through the custom class (Radmenu_mainnavigation) new CSS styles can be added to your web site’s existing theme.  Through these styles the navigation styling can be reshaped to fit your web site’s unique design.

Below is the CSS associated with the navigation screenshot shown above:

.RadMenu_mainnavigation {
    position:relative;
    float:left;
    width: 100%;
    margin-top: 50px;
    background-color: white;
}

.RadMenu_mainnavigation .rmLink {
    font-size: 18px;
    letter-spacing: -1px;
    font-weight: bold;
    color: #666;
    padding: 5px 10px;
    border-top-left-radius: 5px;     
    border-top-right-radius: 5px;     
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

.RadMenu_mainnavigation .rmLink:hover {
    color: #888;
}

.RadMenu_mainnavigation .rmLink.rmSelected{
    background-color: #333;
    color: #fff;
}

.RadMenu_mainnavigation .rmSlide .rmLink{
    border-top-left-radius: 0px;     
    border-top-right-radius: 0px;     
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
}

.RadMenu_mainnavigation .rmLink.rmExpanded {
    background-color: #1973a7;
    color: white;
}

.RadMenu_mainnavigation .rmSlide .rmLink {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0px;
    background-color: #1973a7;
    border-bottom: 1px solid #166694;
    border-top: 1px solid #2b89bf;
    line-height: 35px;
    width: 180px;
    color: #cce8f8;
    font-weight: bold;
    font-size: 12px;
}

.RadMenu_mainnavigation .rmSlide .rmItem.rmFirst .rmLink {
    border-top: 0px;
}

.RadMenu_mainnavigation .rmSlide .rmLink .rmText {
    padding: 0px;
    padding-left: 10px;
}
.RadMenu_mainnavigation .rmSlide .rmLink:hover {
    background-color: #15608b;
    color: white;
    cursor: pointer;
}

.RadMenu_mainnavigation .rmSlide .rmLink.rmExpanded {
    background-color: #15608b;
    color: #fff;
}


.RadMenu_mainnavigation .rmSlide .rmSlide .rmLink {
    background-color: #15608b;
    font-size: 11px;
    border: 0px;
    font-weight: normal;
    color: #fff;
}

.RadMenu_mainnavigation .rmSlide .rmSlide .rmLink:hover {
    background-color: #0d4c71;
}

Occasionally it might be required to use the !important attribute to override some of the styling that Sitefinity is applying to the navigation.

Other options…

It’s also possible to supply a custom Sitefinity template for the Navigation Widget:

image

Examples of custom Navigation templates can be found in the forums.  This technique creates a bit more complexity, but potentially yields more control over the rendered markup.

Update:  This topic was previously explored in another blog post by Grisha Karanikolov.  Please check out this other blog post for additional information.

3 comments

Leave a comment
  1. disgruntled Mar 12, 2012
    "Examples of custom Navigation templates can be found in the forums."

    <anonymous rant>
    I must say this is terribly annoying.. surely there must be somewhere that a simple list of available variables can be found in the template, some code-behind of existing templates.. something more useful than a search results page in the forums.

    I don't understand how you can charge people so much to use this CMS, and then you don't bother to document it properly.  Relying on Forum documentation makes it extremely difficult to find information relevant to the version of the CMS that you are using.

    And don't try to point out that the forums are sorted by version.. sure they are if you want to browse through hundreds of forum posts, the search results mix versions...
    </anonymous rant>
  2. disgruntled Mar 12, 2012
    Aside from version problems in searching... I've been searching "the forms" for close to an hour now, and I can only find unanswered questions about how the custom template is supposed to work with the options set in the control designer...  So it seems that examples of Navigation templates can't really be found in the forums :(
  3. Sitefinity 4 is really really annoying Apr 10, 2012
    How do you just disable all this junk?

    It generates so much bull and forces you to use crazy css

    Its shocking

    At least this is better for anyone looking for some less insane markup: http://www.sitefinity.com/marketplace/modules/cleannav-control.aspx

    Leave a comment