15 Helpful SharePoint Branding Tips

SharePoint 2007 and 2010 have numerous differences. When I first started branding for SharePoint 2010, I began making a list of branding tips to share with the students in my branding courses. In this article, I’ll share some of the tips that my students and I have found most useful.

SharePoint Designer Tips

If you spent any time at all working with SharePoint Designer 2007 and then moved on to SharePoint Designer 2010, you noticed right away how radically different the 2010 interface is. These SharePoint Designer tips will help simplify your work with SharePoint Designer 2010.

Tip 1:  Change the content type of your master page to Publishing Master Page. My first SharePoint 2010 branding project included importing a master page and making a few edits. I noticed right away that when I imported my master page in 2010 it wasn't in the master page folder. Here’s what was happening:

In SharePoint Designer 2007, both the master pages and the page layouts are stored in the masterpage folder located in the _catalogs folder. However, in SharePoint Designer 2010 there are separate files, one for master pages and another for page layouts. If you open SharePoint in a web browser and click Site Actions, click Site Settings, and then click “Master pages and page layouts” in the Galleries section, you'll see that your master page was uploaded successfully. You'll also notice that the icon next to the file name indicates that it's a master page file. But why is it not showing up in the master page folder in SharePoint Designer 2010?

If you choose Edit Properties for the master page file, you'll see that the Content Type titled Page Layout was selected by default when the master page was uploaded. As a result, the master page that you recently uploaded is in the Page Layout folder, not in the Master Pages folder. To change this, simply change the content type of your master page to Publishing Master Page as shown in Figure 1. In SharePoint Designer 2010, refresh the Master Pages folder by pressing f5 and you'll see your imported master page in SharePoint Designer's Master Pages folder.

Tip 2: Pin a gallery. In SharePoint Designer 2007, I was used to developing with the Folder List always visible on the left side. Fortunately, in 2010 we are able to pin a gallery so that a mini-gallery is always visible below the navigation pane as shown in Figure 2. To pin a gallery, first hover over the link that you want to pin, and then click the pin icon when it appears. This gallery will continue to be displayed even if you browse to another gallery.

Tip 3: Use Ctrl + click to jump to the code of a class. Both SharePoint Designer 2007 and 2010 provide a helpful feature that lets you click an underlined class name while holding down the Ctrl key. Do this in your master page or page layout and you will go directly to that piece of code. For example, if you click class="ms-TurnOffAcc" in your master page, the corev4.css file (where that class is located) will open. Additionally, you'll be taken directly to that piece of code within that file. Figure 3 shows this feature in action.

Tip 4: Access the Toolbox easily. I've received several questions regarding opening the Toolbox in SharePoint Designer 2010. After you have opened an editable 2010 file, such as a master page or a .css file, the View tab will appear on the ribbon. Just click the Task Panes drop-down list from the ribbon, and then click Toolbox. (See Figure 4.)

Tip 5: Know the difference between Page fields and Content fields. In the Toolbox, you'll find a list of Page fields and Content fields. Why are these site columns categorized differently? The Page Fields category contains site columns that are inherited from the parent content type from which the page layout was created. The Content Fields category contains site columns that are specific to the content type that the page layout was created from. Figure 5 shows a list of Page fields and Content fields.

Master Page Tips

These master page branding tips are needed for almost every branding project.

Tip 6: Use the After property to force a .css file to load after another. When you reference a .css file in your master page, the After property is helpful. The After property is new to SharePoint 2010 and is used to force a .css file to load one after the other. For example, if you reference a custom .css file in your master page and the After property reads After="corev4.css", your custom .css file will load after the out-of-the-box corev4.css file. You can use this After property more than once to specify that an entire list of .css files should load one after the other. In the following example, customfile1.css loads after corev4.css:

Here is another example showing how customfile2.css loads after customfile1.css:

Tip 7: Use the $SPUrl token to reference a .css file.If you need to make a reference to your .css file and specify that it's located at either the root of a site collection or at the root of a subsite site, you can use a $SPUrl token.

Here's an example of how to reference a .css file that's located at the root of a site collection:

" after="corev4.css" runat="server"/>

And here's an example of how to reference a .css file that's located at the root of a subsite site:

" after="corev4.css" runat="server"/>

Tip 8: Apply master pages to publishing sites. To apply master pages to publishing sites in SharePoint, click Site Actions, click Site Settings, and then click Master Page under Look and Feel. You'll see two sections (Site Master Page and System Master Page) that include drop-down lists.

Site Master Page is used by publishing content pages and is defined by the dynamic token ~masterurl/custom.master in the content page directive. To apply Site Master Page using SharePoint Designer, right-click a master page file, and click “Set as Custom Master Page,” as shown in Figure 6.

System Master Page is used by non-publishing sites, publishing site subpages (such as list views, libraries, and forms), dialog pop-up windows, and application pages. System Master Page is defined by the dynamic token ~masterurl/default.master in the content page directive. To apply System Master Page using SharePoint Designer, right-click a master page file, and click “Set as Default Master Page.”

Tip 9: Hide content placeholders not used by SharePoint 2010. A handful of content placeholders are not required for your SharePoint 2010 master page, but they are required for backward compatibility. If you know that your master page will be used only for SharePoint 2010, you can hide the backward-compatible content placeholders in your master page to reduce the amount of HTML that is rendered when the page loads. Note that you cannot delete the unused content placeholders because you'll receive an error message saying that SharePoint is looking for that particular content placeholder. The proper thing to do is to hide them.

The out-of-the-box v4.master file uses CSS to override these content placeholders. (Search for the s4-die class, and you'll see several instances of this class.) However, placing these content placeholders in a non-visible panel instead of hiding them through CSS is a more efficient option that will help your page to load faster. Figure 7 shows nine non-required content placeholders in a non-visible panel.

Tip 10: Get to know the master pages. Four out-of-the-box master pages are often used for branding in SharePoint 2010. The default.master page, also known as v3 master, is equivalent to the default master page in SharePoint 2007. If you apply this master page to your SharePoint 2010 site, you'll notice that the ribbon is stripped out and the Site Actions menu is located to the right of the global navigation container. This is the master page that is used when SharePoint 2007 is upgraded to 2010. It can be used only when SharePoint 2010 is in SharePoint 2007 mode via Visual Upgrade.

The v4.master page is the default team site master page and can be used for both publishing and non-publishing sites, whereas the nightandday.master page is used only for publishing sites. The nightandday.master page is similar to the Blueband master page that came with SharePoint 2007.

At first glance, the minimal.master page appears to be a starter master page, but it is not. This master page is used for sites that have their own navigation control or that need additional space to display content. For example, the search center and Office Web Applications use the minimal.master master page.

Tip 11: Implement a fixed-width design. Most custom SharePoint branding projects require a fixed-width site design. If this is the case for your project, there is more than one approach to suit your needs. When you are deciding which option is best for your project, it's important to understand how the ribbon, although invaluable, can create complexity when creating a fixed-width site.

SharePoint's ribbon positioning method causes the ribbon to remain positioned at the top of the page. It also replaces the browser's traditional scrolling method by using JavaScript to analyze the size of the page and inserts a custom scroll bar underneath the ribbon. Following are several approaches that you can take to implement a fixed-width design. As you will see, each approach has its pros and cons. The following tips are not targeted to anonymous access enabled sites.

The quickest and most straightforward approach is to simply modify a few default CSS classes to make both the ribbon's contents and the site design a fixed width. This method makes the site a fixed width, and the width of the ribbon's contents matches the width of the site design. Because only the ribbon's contents are a fixed width, the ribbon container remains the full width of the browser. However, this approach may conflict with your design. Add the CSS code in Figure 8 below to your master page or style sheet:

/*This creates a fixed-width site design. Applying the fixed-width to #s4-bodyContainer keeps the scroll bar to the far right side of the site.*/#s4-bodyContainer {width: 960px !important;margin:auto;}/* This makes the contents of the ribbon a fixed-width*/.ms-cui-ribbonTopBars, ms-cui-tabBody {width:960px;margin:auto;}/*This removes a white line that's underneath the ribbon and looks out of place when the ribbon's contents are a fixed-width*/.ms-cui-ribbonTopBars div {border-bottom:1px solid transparent;}

Figure 9 illustrates this approach.

The second option is to fix the width of the body area and the entire ribbon. This approach works well if your design looks best when the entire ribbon is a fixed width. However, there will be unused space that the background of the ribbon used to fill at the top of the scroll bar. Add the CSS code in Figure 10 below to your master page or style sheet:

/*Scroll bar is added if overflow is clipped.*/body.v4master {overflow:auto;}/*This creates a fixed-width site design. Applying the fixed-width to #s4-bodyContainer keeps the scroll bar to the far right side of the site.*/#s4-bodyContainer {width: 960px !important;margin:auto;}/*This makes the entire ribbon a fixed width.*/#s4-ribbonrow {width:960px;margin:auto;}

The results will appear as shown in Figure 11.

You can remove the extra white space where the background of the ribbon used to be by completely reverting back to the browser's traditional scroll bar. To do this, the ribbon positioning method needs to be turned off or removed. The ribbon positioning method can be removed when the ID s4-workspace is deleted from the master page. Please note that there are consequences to removing this ID from the master page. One known consequence is that the Gantt view of a project list no longer appears. To use this approach, search for id="s4-workspace" and remove it from the

container in your master page. Figure 12 shows SharePoint using traditional scroll bars:

The last option is to add inline styles to your master page to set a fixed width to the ribbon and the main workspace. Then, turn off the ribbon positioning method to revert to the browser's standard scrolling system. This topic was covered in part two of the article “SharePoint Branding 101: Customizing Your SharePoint Site.”

To center the ribbon and make it a fixed width, perform a search for id="s4-ribbonrow". Add a width style of 960px to the

tag, and set the margins to auto, as follows:

To center the main workspace and make it a fixed width, perform a search for id="s4-workspace". Add the class s4-nosetwidth to the

tag, add a width style of 960px, and set the margins to auto, as follows:

Note that the class s4-nosetwidth tells SharePoint not to override our fixed width with inline styling when the page loads in the browser. To revert to the browser's standard scrolling method, search for id="s4-workspace" and remove it from the

container in your master page.

Tip 12: Manage the code that provides error messages to legacy browsers.Toward the bottom of an out-of-the-box master page, a line of code has been inserted to provide an error message for users who are viewing SharePoint 2010 in an unsupported browser. You can insert this line of code in your own custom master pages as well. If you don't want this warning to be presented to all users, simply remove the following line of code from the master page:

Tip 13: Add a traditional breadcrumb. SharePoint 2010 doesn't come with the same traditional breadcrumb that SharePoint 2007 offered. Instead, it uses a pop-out hierarchical global breadcrumb found on the ribbon and a combination of site title and current page title (or list title) in the header area that can also serve as a type of breadcrumb. However, a lot of clients definitely miss (and will ask for) a traditional breadcrumb. Thank goodness it’s simple enough to add.

To add the traditional SharePoint 2007 breadcrumb to your new SharePoint 2010 master page, just add the following line of code:

You might want to add some styling around it as well so that it matches your brand.

Tip 14: Get familiar with the CSS class s4-notdlg. As you're probably already aware, there are many new CSS classes that are unique to SharePoint 2010. In addition to the s4-nosetwidth class, which was already discussed in the master page section of this article, here is another CSS tip that is often needed when branding in SharePoint 2010.

I mentioned in Tip 8 that the master page identified as System Master Page will be applied to dialog pop-up windows. You'll notice several instances of the s4-notdlg class within out-of-the-box SharePoint 2010 master pages. This class tells SharePoint not to apply the particular element that the class wraps around to the dialog box. For example, if you create a custom master page with a custom header and apply the s4-notdlg class to that element, the header will not appear in the dialog pop-up window. If you do not apply the class s4-notdlg, the header will appear in the dialog pop-up window.

Tip 15: Turn on full error messages. This tip isn't actually new to SharePoint 2010, but it's still definitely helpful. By default, SharePoint turns custom errors on so that users see a more friendly error message. However, the custom error messages do not provide any help for designers trying to troubleshoot an issue. Turning off custom error messaging is simple. Perform the following steps on the development web server to turn off custom errors:

1. Navigate to the following site directory:

:inetpubwwwrootwssVirtualDirectories[sub directory with port number of your SharePoint site]

2. Locate the web.config file, and make a copy of it as a backup.

3. In Notepad, open the web.config file.

4. Search for "CallStack." You will find the following:

5. Change the value of the CallStack and AllowPageLevelTrace attributes to true.

6. Search for "CustomErrors," and then change the CustomErrors mode to Off.

7. Save and close the file.

The cache for the website for which you changed the web.config file is invalidated and reloaded. Now the site will display the ASP.NET error page, which displays the full error message and the exception stack trace.

More Helpful Tips to Come

The list of tips in this article pertains to SharePoint Designer, master pages, page layouts, and CSS. I know they’ll prove useful to you when branding your SharePoint 2010 sites. Stay tuned for next month's article when we'll discuss three different ways to manage how and when the Quick Launch control appears on your pages. You'll be able to reuse this technique for many other elements as well.

For more information on branding SharePoint, see Dan Holme's article "Branded a Fool."