SharePoint Branding 101: Cascading Style Sheets

You've been tasked with updating the look and feel of your SharePoint site, but where do you begin? If you're new to SharePoint branding, this can be a daunting mission.

This article, the first in a series of branding articles, focuses on creating custom CSS to override out-of-the-box styles found in Corev4.css. The second article will focus on master pages, and the third article will focus on page layouts. In these articles I’ll help you understand different approaches you can take to brand SharePoint sites.

You can use SharePoint to create practically any look you want, but it all comes down to how much time is available for the project. Sometimes, you may not have enough time to implement a complex custom design. I’ll also help you understand which approaches can be done quickly and easily, and which approaches take more time.

Now, let’s walk through how to quickly implement a custom branded SharePoint site. Sometimes, branding requirements are simple. Other times, a project’s time line and budget restrict the amount of effort you can expend in creating a custom branded SharePoint site. The approach I outline in this article fits well in either case.

Whenever I begin a branding project, I start with a creative discovery phase to better understand the branding guidelines and limitations that the organization has already established. Areas for discovery include the following:

After I finish the creative discovery phase, I have a good idea of what the client is looking for and how I will create a custom branded SharePoint site to meet the client’s needs.

What Makes Up SharePoint Branding?

Strategies used to implement SharePoint branding include, but are not limited to, master pages, page layouts, and Cascading Style Sheets (CSS).

Master pages are used to identify the shared elements throughout your site. Examples of shared elements include logos, navigation menus, and footers. Master pages provide the consistency needed to create cohesiveness throughout all the pages in your site, in your site collections, or both.

Page layouts provide a powerful and flexible way to manage the overall look and feel of your site's pages. They also provide the control that you need to manage the type of subject matter that can be created on any given page while still giving users the freedom to create their own content. Page layouts are instrumental in providing content organization and consistent brand awareness.

CSS is used to control the overall display of page elements, including imagery, fonts, layouts, and page structure. To adjust the look and feel of your SharePoint site, SharePoint 2010 primarily uses CSS. In fact, SharePoint 2010 requires that designers understand CSS to a much greater degree than in earlier versions of SharePoint. My favorite CSS resource is CSS: The Missing Manual (O’Reilly Media) by David Sawyer McFarland. For a more general SharePoint 2010 resource, I recommend Professional SharePoint 2010 Branding and User Interface Design (Wrox Press). This book does a great job of explaining SharePoint branding concepts, including reasons for using certain techniques to brand SharePoint sites.

Let's Get Started

The fictitious site that we'll be using as an example throughout this article is The Playbook. The Playbook is an intranet site that was created for football coaches at a local high school. The coaches don't need an extensive amount of branding, but they want a look and feel that represents their high school’s color scheme.

This branding example is based on a SharePoint Server 2010 publishing site. The out-of-the-box Welcome Blank Web Part page layout was applied to the home page. Because we're not going to create a completely custom look and feel, the out-of-the-box master page and one of the out-of-the-box page layouts are sufficient for this project. Primarily, we need to change the logo and the color scheme. Figure 1 shows what the end result will look like.

To begin, let's apply the out-of-the-box master page that we're going to use for this project to the SharePoint site. To change the master page (as shown in Figure 2), follow these steps:

1.     On the Site Actions menu, click Site Settings.

2.     On the Site Settings page, in the Look and Feel section, click Master Page.

3.     In the Site Master Page section, click Specify a master page to be used by this site and all sites that inherit from it.

4.     In the list, click v4.master.

5.     Click OK.

Notes:

Select and Apply Themes

After we set the Master Page, we can move on to modifying the color scheme for the site. Typically, the first thing I do is decide which out-of-the-box theme looks the closest to the brand that I'm creating. Why spend time styling Web Parts and lists to match our color scheme when we can let SharePoint do this work for us? For our The Playbook intranet site, we decide that the Mission theme best matches our color scheme.

To change the theme, follow these steps:

1.     On the Site Actions menu, click Site Settings.

2.     On the Site Settings page, in the Look and Feel section, click Master Page.

3.     Select the Mission theme.

For this example, the out-of-the-box Mission theme is sufficient, as Figure 3 illustrates. However, in many cases, you must use a custom theme. I won't discuss how to create a custom theme in this article because my husband, Todd Baginski, has a great blog post that describes how to do it. See his topic, "HOW TO: Create a custom theme for SharePoint 2010."

After we apply the Mission theme to the SharePoint site, your site will look like what you see in Figure 4.

As I mentioned earlier, applying the Mission theme affects the style of all the lists, Web Parts, and administration pages on the SharePoint site. However, we still have work to do to completely brand the site and make it look the way the client wants.

Change the Logo

The next step is to change the site’s logo image. To do this, open SharePoint Designer 2010. We'll keep SharePoint Designer 2010 open for the remaining tasks in this article. To open SharePoint Designer 2010, click Start, click All Programs, click SharePoint, and then click Microsoft SharePoint Designer 2010.

If this is the first time that you have opened SharePoint Designer 2010, you won't see any sites listed in the Recent Sites section (Figure 5). If this is the case, click Open Site, and then type the URL of the SharePoint site in the Site Name box.

The Site Settings page opens, and you see the navigation pane on the left side. The new logo is located in the SiteCollectionImages folder. This folder was created via the Publishing feature, and it is a common folder for storing images that you want to use throughout your site collection. To open the SiteCollectionImages folder, click All Files, and then click SiteCollectionImages in the navigation pane (as shown in Figure 6).

On the Ribbon, click Import Files (as shown in Figure 7), and then upload your new logo.

Note: A helpful feature is the ability to pin a gallery. This opens up a mini-gallery below the navigation pane. To pin a gallery, move the mouse pointer over the link that you want to pin. In this example, move the pointer over the All Files link. Then, when the pin icon appears, click it. This gallery will be displayed even if you browse to another gallery (as in Figure 8).

After the logo image is uploaded to the SharePoint site, configure the site to display the new logo (as shown in Figure 9). To do this, follow these steps:

1.     On the Site Actions menu, click Site Settings.

2.     On the Site Settings page, in the Look and Feel section, click Title, description, and icon.

3.     In the Logo URL field, type /sitecollectionimages/youLogo.png.

If you decide to store your logo on the server’s file system instead of in the content database, the URL location is /_layouts/images/logo.png.

Create and Apply CSS

We'll use CSS to complete the look and feel of the site. It's never a good idea to edit the styles in the Corev4.css file. Instead, override the default SharePoint styles by using a custom CSS file and ensure that this file is loaded after the core CSS. There are two ways that we can do this; we can specify a custom CSS file via the master page, or we can use the Alternate CSS option. Because this is a simple branding project and we're not modifying master pages, we'll use the Alternate CSS option.

The Alternate CSS option lets you apply custom CSS to a site and its subsites. This option is available only from the SharePoint web user interface within a SharePoint server publishing site. The Alternate CSS option also ensures that this CSS file will load last, which prevents the Corev4.css from overriding it.

First, let's create our custom CSS file in SharePoint Designer. To do this, follow these steps:

1.     In the navigation pane, click All Files, click Style Library, right-click the Style Library folder, click New, and then click Folder.

2.     Name your folder Playbook.

3.     Right-click the Playbook folder, click New, and then click CSS.

4.     Right-click your new CSS file, and then rename it as “playbook.css.” Figure 10 shows the result.

To use the Alternate CSS option, follow these steps:

1.     In SharePoint, on the Site Actions menu, click Site Settings.

2.     On the Site Settings page, in the Look and Feel section, click Master Page.

3.     Click the Specify a CSS file to be used by this publishing site and all sites that inherit from it option.

4.     In the text box, type /Style Library/playbook/playbook.css (as Figure 11 shows).

Now we're ready to start modifying our CSS file. There are two tools that I often use to find SharePoint classes to override: Internet Explorer 8 (IE 8) Developer Tools and Firebug for Firefox. These are two must-haves that will make your experience with branding SharePoint so much easier! When I begin any SharePoint project, I always make sure that IE, Firefox, and their corresponding tools are open and ready to use.

Notes:

So far (see Figure 12), we have added only the Mission theme and our custom logo to the site. Now we're going to go back to the custom CSS file created in SharePoint Designer and start adding our CSS.

To edit the Playbook.css file, follow these steps:

1.     In the navigation pane, expand Style Library, and then expand Playbook.

2.     Right-click playbook.css, and then click Edit File in Advanced Mode (as Figure 13 shows). If the file is not already checked out, you will be prompted to check out the file before editing.

Your blank CSS file is now open and ready for editing. I personally prefer to begin editing my CSS from the top down, so we'll use that method here. It's also a best practice to comment your code beginning with /* and ending with */.

Follow these steps to edit the CSS file:

1.     The background color of the Ribbon isn’t what we want, so let's change that first. Apply the following CSS class to modify the background color of the Ribbon. After you apply the following CSS class, the background changes to a green color instead of the brownish color that was applied by the Mission theme.
 

body #s4-Ribbonrow {background-color:#283A10;}

2.     We could use a repeating background image to change out the header, but let's use CSS instead to change the height of the header and to create a gradient visual filter. Apply the following CSS class to set a vertical gradient that starts with a light green and ends with a darker green:
 

.s4-title {height:125px;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#C3D6AA', endColorstr='#283A10'); /* for IE */background: -moz-linear-gradient(top, #C3D6AA, #283A10); /* for firefox 3.6+ */}

3.     We need to change the breadcrumb in the title area. The breadcrumb (shown in Figure 14) includes site and page titles as well as the names of list views. Apply the following CSS class to change the color value, the font-variant value, and the font-weight value of the site title in the header area (the first title breadcrumb):
 

.s4-title h1 a {color:#1E4620;font-variant:small-caps;font-weight:bold;}

4.     Change the color of the page title in the header area (the second title breadcrumb). To do this, apply the following CSS class:
 

.s4-title h2 a {color:#383838;}/* Team Site*/.ms-WikiPageNameEditor-Display {color:#383838;}/*Blog Site*/.s4-titletext h2 {color:#383838;}

5.     The following CSS class changes the color of the list view name that follows the page title in the header area (the third-level breadcrumb).
 

.ms-ltviewselectormenuheader .ms-viewselector a,.ms-ltviewselectormenuheader .ms-viewselectorhover a {color:#383838;}

Note: To see a sample of a list view name, click the title of a Web Part. (Figure 15 shows the All Documents view in the breadcrumb, and Figure 16 shows the list view name.)

6.     On the Site Actions menu, click View All Site Content. You'll notice some descriptive text underneath the breadcrumb, which Figure 17 shows. This color was dictated by the theme, but it's too hard to read. We’ll apply the following CSS class to change it:
 

.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription {color:#CCCCCC;}

7.     The social icons don't match the brand, so we'll apply the following CSS class to change the horizontal border that appears to the left of the social icons, font, and rollovers. Figure 18 shows the social icons after the custom CSS is applied.
 

.ms-socialNotif-groupSeparator {border-right:1px solid #146835;border-left:1px solid #1E4620;}.ms-socialNotif-text {color:#19361A;}.ms-socialNotif:hover {border:1px solid #1B9747;background-color:#4BB749;}

8.     The top navigation (also referred to as global navigation) must match our brand. Therefore, we'll apply the following CSS class to add padding on the top and bottom of the links. By doing this, we create a new look and we format the text links.
 

body #s4-topheader2 {min-height:35px;border-bottom:5px solid #E9EFE1;}.s4-toplinks a {margin-top:5px;}.s4-toplinks .s4-tn a.selected {border-color:#8EA86C;border-top-color:#C3D6AA;background:none;background-color:#ECF2E4;margin:5px 5px; /* Added Margin Top Only */}.s4-toplinks .s4-tn a.selected:hover {color:#003759;}.s4-toplinks .s4-tn a {color:#003759 !important;}

9.     We need to modify the search area to line up with the new formatting of the top navigation. To do this, apply the following CSS class:
 

.s4-search {margin-top:5px;}

10.  Out of the box, SharePoint displays a publishing status bar on a yellow background, which you can see in Figure 19. For this project, I chose to remove it. We could remove it from the master page, but because we're not editing master pages, we can apply the following CSS class to remove it.
 

#s4-statusbarcontainer {display:none;}

11.  We have to style the Quick Launch (also known as left navigation) to match our overall look and feel. We'll apply the CSS class that is shown in Listing 1 to change the background color, the containing borders, and the individual formatting of the links.

Note: To decrease download time, it's a best practice to combine styles instead of listing them individually. For example, the following CSS class shows the individually-listed styles:
 

body #s4-leftpanel-content {background-color:#F2F7EB;border:solid #E9EFE1;border-right-width:5px;border-bottom-width:5px;border-left-width:5px;}

To combine the styles, we’ll use the following CSS class:
 

body #s4-leftpanel-content {background-color:#F2F7EB;border:solid #E9EFE1 0 5px 5px 5px;}

However, if you don’t like the result, write out the styles exactly the way SharePoint had listed them to begin with.

12.  Out-of-the-box, the Quick Launch displays the View All Site Content and Recycle Bin links below the Quick Launch links. Clients often ask me to remove these two links, so I've decided to remove them on this project. Note: We could remove these links by using a custom master page, but because we're not customizing a master page, we'll apply the following CSS class:
 

.s4-specialNavLinkList {display:none;}

13.  Lastly, we'll change the formatting of the Web Part title text by applying the following CSS class:
 

.ms-WPTitle, .ms-WPTitle a, .ms-WPTitle a:visited, .ms-WPHeader a:active {color:#297939;font-weight:bold;}

Now that you've finished editing your CSS file, be sure to check it in and publish it as a major version so everyone else can see your changes. After you check in and publish your changes, you can refresh the web browser and see that your site looks just like Figure 1.

Looking Forward

As you have now seen, you can easily create a custom look just by adding one image, making a few CSS changes, and applying an out-of-the-box theme. As you click through the site, you'll notice that all the elements in the site are branded consistently, including the Site Actions drop-down menu rollovers, the Web Parts, and the administration pages. Using the out-of-the-box theme saves a lot of time and effort with branding many of these elements in the SharePoint site. To locate all of the CSS styles I modified in this project, I used the IE 8 Developer Tools and Firebug. In my next article, we'll talk about custom branded master pages.

Listing 1: Styling the Quick Launch

body #s4-leftpanel-content {    background-color:#F2F7EB;      border:solid #E9EFE1;    border-right-width:5px;    border-bottom-width:5px;    border-left-width:5px;}.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {    color:#1E4620;    font-variant:small-caps;    font-weight:bold;}.s4-ql ul.root ul > li > a {    color:#3B4F65;}.s4-ql ul.root ul > li > a:hover {    color:#3B4F65;}.s4-ql a.selected {    background:none;    background-color:#E0EAD0;}