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:
<SharePoint:CSSRegistration Name="/Style Library/customfile1.css" After="corev4.css" runat="server"/>
Here is another example showing how customfile2.css loads after customfile1.css:
<SharePoint:CSSRegistration Name="/Style Library/customfile2.css" After="customfile1.css" runat="server"/>
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:
<SharePoint:CSSRegistration name=<% $SPUrl:~sitecollection/Style Library/customfile.css %>" 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:
<SharePoint:CSSRegistration name=<% $SPUrl:~site/Style Library/customfile.css %>" 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.
