​​​Branding Common Elements in SharePoint 2013
 
 
Part 1: Top Navigation
By Ryan Keller


Scenario
There are a lot of things to consider when implementing a brand for your SharePoint site.  Who is your audience? What will the design look like? What is the purpose of the site? Once you've nailed down these important questions it's time to actually start implementing the look and feel you've chosen into SharePoint. Perhaps you've already built an HTML mockup and are looking to transfer that into SharePoint? Or maybe you've only built a creative comp in Photoshop and will be building the design directly into a master page?

No matter how you begin, one thing you'll run into as you build your design in SharePoint is a need to override many of the out-of-the-box (OOTB) styles you're given. This article is the first in a series that will guide readers through the process of overriding commonly styled elements of a SharePoint 2013 site.

There are some elements that are fairly standard on nearly every website, whether the site is used for consuming information or collaborating, such as the top navigation, left navigation, and search box. As such, it's pretty likely that you'll need to spend some time styling these elements. Even if you have a CSS file for a pure HTML mockup that styles your top navigation for example, the navigation that SharePoint automatically builds out likely differs from yours. It also applies very specific styling to its own top navigation HTML that you'll have to override in order to apply your custom styles. This is also true for other elements of a SharePoint, including the left navigation and search box which we'll discuss in future articles.

Instead of spending hours of time trying to override these styles by yourself, we've put together this handy guide to speed up the process and have included some sample CSS that will help you get started.

Structure of the Top Navigation

As one of the most-used elements on any site, a top navigation needs to not only function well, but look and feel 'right' so your users are enticed to actually use it. While SharePoint uses a specific control on the master page for the navigation, the HTML it renders is actually pretty simple. Let's look at the basic structure of the navigation - it's actually just a simple unordered list wrapped in a couple <div> tags:

<div>
   <div>
      <div>
         <ul>
            <li>
               <a>
                  <span>Link1</span>
               </a>
            </li>
            <li>
               <a>
                 <span>Link2</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>

That's the most basic structure of the navigation: a few div tags wrapping an unordered list. Within each list item is an anchor (or 'link') tag, and within that is a span tag that holds the link text.


 

If your navigation is designed to have dropdowns, things get a bit more complicated, but not too much.  Each dropdown is just another unordered list nested within the list item tags. Here's an example:

<div>
   <div>
      <div>
         <ul>
            <li>
              <a>
                <span>Header1</span>
              </a>
              <ul>
                 <li>
                    <a>
                       <span>
                          <span>Link</span>
                       <span>
                    </a>
                 </li>
                 <li>
                   <a>
                     <span>
                        <span>Link2</span>
                     </span>
                   </a>
                 </li>
              </ul>
           </li>
           <li>
              <a>
                 <span>
                    <span>Header2</span>
                 </span>
              </a>
            </li>
          </ul>
       </div>
   </div>
</div>
In this example, the first header has a dropdown underneath it. As you can see, it's just another list within a list item. When you are styling your SharePoint navigation, you are essentially creating styles and applying them to HTML lists.

Understanding the CSS
Now let's go ahead and see exactly how this knowledge can be applied. If you look at the HTML source of a SharePoint page and find the navigation, you might notice it looks more complicated at first glance than the examples above. This is because Microsoft has applied several CSS classes to each tag. And because you're going to be giving the navigation custom styling, it's important to know which of these classes you will be overriding with your custom styles.

Let's start at the top and work our way through each item in the nav structure.  Note that if you view the source of the page you will see that some of the tags have additional classes or IDs applied, but the ones listed below are the ones you're most interested in from a branding standpoint:
  • <div class="ms-breadcrumb-top"> - this div is the outer wrapping div that spans the width of the navigation area in the OOTB seattle.master. In a custom branding scenario, you probably will use your own wrapping div instead of this one.
  • <div class="ms-core-navigation"> - This tag is the wrapping div of the top navigation link area. Not much going on here for styling purposes.
  • <div class= "ms-core-listMenu-horizontalBox" > - Second wrapping div sets the display of the nav to render inline-block.
  • <ul class="root ms-core-listMenu-root static"> - top level of the list. The "root" class provides an easy way to identify the root of your navigation and apply any nedessary styles, while the "static" class is applied to any element of the navigation that doesn't dynamically appear (e.g., dropdown navigation).  The .ms-core-listMenu-root class sets the margin to zero.
  • <li class="static"> - an item in the navigation list. Again the "static" tag is applied to the top level navigation items because they are static and don't dynamically appear/disappear based on interaction.
  • <a class="static menu-item"> - the "menu-item" class denotes that this is one of the actual links in the navigation. Styles that affect the actual link are generally applied at this level of the navigation structure.
  • <span class="additional-background"> - this span gives you an extra layer to apply additional styling if necessary.
  • <span class="menu-item-text"> - the span that holds the actual text. Generally, you probably won't need to do much with this, as most styles for the navigation links actually take place on the "menu-item" class applied at the <a> tag level.
If your navigation has any dropdown items underneath it, there will be an extra <ul> tag with additional link items within the <li class="static"> tag. These tags are as follows:
  • <ul class="dynamic"> - the "dynamic" class is applied to all items that appear dynamically on mouse-over of the parent item.
  • <li class="dynamic"> - same as the <ul> tag above; the fact that the "dynamic" class is applied at both the <ul> and <li> levels allows you to specifically target the dropdown container and the list items themselves with styles.
  • <a class="dynamic menu-item ms-core-listMenu-item"> - same principles apply to the dynamic link as to the static link in the navigation. The only difference here is that using the "dynamic" tag, your dropdown links can have distinct styling too.
Finally, you may also notice a class of "selected" being applied to the <li> tag and <a> tag that holds the link to the current page or site. This allows you to apply different styles to the selected navigation item, which can provide a visual indicator of where in the site a visitor is currently.

Styling the Navigation (with an ugly example)

View a copy of the CSS used in this example.
Let's look at an actual example of this.   For this example, specific background colors have been applied to the various elements of the navigation to help you see what is being styled more easily. The table below gives a specific rundown of the elements that the colors are applied to. (Yes, the colors are garish, and under no circumstances should you use this color palate on your site unless you want to burn the retinas of your site's visitors.)

Default Navigation State:

Change Top Navigation Menu Branding SharePoint 2013 1
 


Hover state for top nav root item:

SharePoint Navigation Menu Branding Part 1 Picture 2
 

Hover state for top nav dropdown item:
SharePoint Branding Tutorial Part 1 Picture 3
Color Applied to Notes
Orange.ms-breadcrumb-top
In a custom branding scenario you might not be using this class, and instead wrapping the navigation in a <div> tag with your own custom class
Lime
.ms-core-listMenu-horizontalBox
In the screenshot above a height of 25px has been applied to make it easier to see the lime color underneath the rest of the colors (but you probably wouldn't need the extra padding in a custom branding scenario)
DarkCyan
.ms-core-listMenu-horizontalBox li.static
The static <li> tags that contain the links
Yellow
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item
The actual link tag
Pink
.ms-core-listMenu-horizontalBox li.selected a.selected
Selected link tag
Aqua
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover
Hover state for the links in the nav
Red
.ms-core-listMenu-horizontalBox ul.dynamic
The container for any dropdown nav items
Violet
ul.dynamic .ms-core-listMenu-item
Link tag in dropdown navigation
PaleGreen
ul.dynamic .ms-core-listMenu-item:hover
Hover state for link in dropdown nav







 

Hopefully this gives you a good starting point for styling your navigation. At first glance the structure and CSS of the navigation may seem complicated, but once you break the navigation down into individual components and see how the styles are applied, it's not so difficult to work with. You can also download a copy of the CSS that was used to create this example to help you get started with styling your navigation at the link below!


Click here to view a copy of the CSS used to create the above example.

BONUS TIP: For a fun way to visually see the layers that make up the navigation (or any other area of your site for that matter), you can use Firefox's 3D mode. With the site open in Firefox, right-click on the page and select Inspect Element (Q). Click on the 3D View icon near the upper right of the Inspect console, and you can click and drag to see the various layers of your site in 3D - without 3D glasses even!

-Ryan Keller

 

 


 

Powered by SharePoint 2013 © 2016 Rackspace, US Inc.