Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories


  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com
Loading

This is part three in a multi-part series. The predecessor of this post is Part 2: Creating the Design in SharePoint.

Depending on the customization method you selected (CSS, Theme or Master Page), at this point you have probably managed to alter parts of your SharePoint site. This part of the article series will focus on how to change the look and feel of SharePoint components that you don't necessarily have direct or ultimate control over.

A lot of SharePoint functionality is created using server and user controls. In the master page, the bit of SharePoint functionality is created with a single tag. This tag has a matching page directive, and that directive specifies which source file should be used to create the meat behind the control.   A lot of these source files are locked down, you can't access them and modify their properties, functionality, and what we are concerned with, their user interface. Some examples of this is Search, Site Actions menu, Quick Launch and the Publishing Console. 
 
So instead you are left with taking what has been created for you, and adding style changes to alter the final look and feel. In some instances, you can also control and add some properties to the control tag itself. This article walks through some common SharePoint items and how you can alter their appearance using what has been given to you by SharePoint.
 

Web Parts

Web Parts are actually relatively easy to change. There are a few styles that control the header, and a few that control the body. Note that the web parts are rendered into tables, and usually nested tables. So you will be working with table rows and table cell tags and styles primarily.
 
See a more complete list of Web Part styles in the CSS Reference Chart.
 

The Web Part Title Bar

Relatively speaking, there are not a lot of styles used in a web part title bar. There is one style for the container (ms-WPHeader), and one style for the text (ms-WPTitle). Here are the default styles from Core.CSS. You can copy these styles and then make changes to modify the Web Part title bar look and feel.
 
.ms-WPHeader TD {
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
 
.ms-WPTitle {
font-weight:bold;
color:#4c4c4c;
padding-left:3px;
padding-right:7px;
padding-top:2px;
padding-bottom:2px;
font-size:10pt;
}
.ms-WPTitle A:link,.ms-WPTitle A:visited {
color:#4c4c4c;
text-decoration:none;
cursor:pointer;
}
.ms-WPTitle A:hover {
color:#000000;
text-decoration:underline;
cursor:pointer;
}
 
If you want to use an image in your header bar, add a background property to ms-WPHeader, such as:
.ms-WPHeader TD {
Background: rgb(226,139,169) url("/images/myimage.gif") repeat-x;
}
 
If you want to alter the title text, be sure to update ms-WPTitle, and the following instance that includes hyperlinks. Not all web part titles are links (and vice versa) so you will need to edit both styles, or do it in a single style like this:
.ms-WPTitle, .ms-WPTitle A:link,.ms-WPTitle A:visited {
Color: black;
Font-size: 1.5em
}
 
 

Rounded Corners in the Web Part Title Bar

A common request is to create rounded corners for the web part title bar. You can do this using the CSS sliding doors technique. You will need to create 2-3 images, depending on what your design looks like. If you want a solid background, then you only need two images. If you have a gradated background or some other type of image, then you will need three images.
 
Different image requirements for web part backgrounds
 
The sliding doors technique applies one image of a rounded corner to the far right of the background of a parent container, then one image of a rounded corner to the far left of a child container within the parent.
 
When you look at the rendered code of a web part, the web part uses a table and several nested tags to create the title bar:
 
<td>
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
             <tr class="ms-WPHeader">
<td title="I need to... - Displays tasks and tools from a list" id="WebPartTitleWPQ3" style="width:100%;"><h3 class="ms-standardheader ms-WPTitle"><nobr><span>I need to...</span><span id="WebPartCaptionWPQ3"></span></nobr></h3></td> 
<td align="right" style="padding-right:2px"><div style="cursor: pointer" class="ms-HoverCellInActive" onmouseout="this.className='ms-HoverCellInActive'" onmouseover="this.className='ms-HoverCellActiveDark'"><nobr><a onclick="MSOWebPartPage_OpenMenu(MSOMenu_WebPartMenu, this, WebPartWPQ3,&#39;False&#39;);return false;" id="WebPartWPQ3_MenuLink" onkeydown="MSOMenu_KeyboardClick(WebPartWPQ3_MenuLink, 13, 40)" href="#"><img src="/_layouts/images/Menu1.gif" border="0" align="absmiddle" title="I need to... Web Part Menu" alt="I need to... Web Part Menu" style="padding-left:2px;" /></a></nobr></div></td>
                </tr>
        </table>
</td>
 
 
For SharePoint, the table cell will be the parent, and the H3 tag inside the table cell will be the child. We will use the table row class as a selector to target these changes to web parts, and not all tables in the site. Here is the CSS for a solid bar. Notice the right image in the first style and the left image in the second style.
 
.ms-WPHeader td {
background: rgb(242,181,15) url('/images/wpright.gif') no-repeat top right;
margin: 0;
padding: 0;
height: 31px
}
.ms-WPHeader TD h3 {
background: url('/images/wpleft.gif') no-repeat top left;
margin: 0;
padding: 7px 7px 0px 25px;
height: 24px;
font-size: 1.2em;
color: white
}
.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {
color: white
}
 
And here is the result:
 
Sample of CSS result in web browser
 
As you can see, there is still a problem with the edit menu to the far right. The CSS can be adjusted to specify that only the first table cell should have the background by adding a first-child pseudo-class:
 
.ms-WPHeader td:first-child {
background: rgb(242,181,15) url('/images/wpright.gif') no-repeat top right;
margin: 0;
padding: 0;
height: 31px
}
 
Note, the first-child pseudo-class will not work in IE unless a DOCTYPE tag has been included in the master page file, which does not come by default with default.master. Check out DOCTYPE info here. When everything is in place, the arrow menu will drop the background, and the web part title bar will look like this:
 
Sample of CSS after first child has been applied
 
Please remember that details such as padding and height will more than likely appear differently in IE than in Firefox, and you will have to make adjustments accordingly.
 
If you want to create a web part title bar with three images, some of the CSS will have to get flipped around, and a new style will be added. In the below example, the parent table cell container is set to have the repeating background that makes up the middle of the bar, the child H3 tag was switched to contain the far right image instead of the far left, and a new child using the span tag was added setting the image to the far left.
 
.ms-WPHeader td:first-child {
background: rgb(242,181,15) url('/images/wpgradmiddle.gif') repeat-x;
margin: 0;
padding: 0;
height: 31px
}
.ms-WPHeader TD h3 {
background: url('/images/wpgradright.gif') no-repeat top right;
margin: 0;
padding: 7px 7px 0px 0px;
height: 24px;
font-size: 1.2em;
color: black
}
.ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited {
color: black
}
.ms-WPHeader TD span:first-child {
background: url('/images/wpgradleft.gif') no-repeat top left;
padding-top: 7px;
padding-left: 25px
}
 
And the result looks like this:
 
Sample with gradated images for the web part title bar
 
 

The Web Part Body

The body area can get a bit trickier. There are a lot of web parts that come with SharePoint, and within all of those web parts, a lot of different things that can be displayed. Plus there are custom web parts you or your team may be developing or using. When making modifications to the body area, you first need to identify what you want to change.
 

The Text

If you are just looking to alter the font used in web parts, check out the styles in the CSS Reference chart to find various styles used for the various areas of web parts. Copy the styles to your custom CSS file and make modifications from there.
 

The Background

This one is two fold. Do you want to modify the web part body background, or add a background that wraps the entire web part? Modifying the web part body background will only create changes for the web part under the title bar, and above any footer links. Wrapping the entire web part is actually not editing a web part, but instead that is editing the content page that contains the web part zone. The below diagram shows the difference.
 
Web part body vs. wrapping a web part with a background
 
There are several styles that affect areas inside the web part body, such as table rows and headers, and other styles that alter the text, footer, and the container table cell as a whole. Check out the styles in the CSS Reference chart to find various styles used for the body areas of web parts. To affect several of the web parts, use the ms-WPBody style. This style will alter non-table web parts, as shown below when I change the style background color to red:
 
Sample ms-wpbody change
 
To affect table based web parts, change the ms-WPBorder style, as shown below when I change the style background to lime:
 
Sample ms-wpborder
 
If you are looking to create a background color or image or style behind an entire web part, then you need to edit the content page (a.k.a. page layout for publishing sites) to include a container around the web part, or the web part zone. Note that this works really well to style web parts in an area of your page, but it will not style individual web parts, such as always make an event web part green no matter where it is on the page. Instead, any web part added inside the container will pick up the styles. You can lock down some of the properties of a web part zone or web part however, such as disallowing users from removing the web part.
 
In the content page, add a wrapping container around the web part zone or web part, such as a DIV tag:
 
<div class="CustomZone">
<WebPartPages:WebPartZone id="g_BBA6F2B950A54C5CB97AF4243E7926BF" runat="server" title="Top Zone"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</div>
 
Then in your style sheet, specify properties for the container: 
 
.CustomZone {
padding: 10px;
background: aqua
}
 
The result will be an area of the page for web parts that looks different:
 
Sample wrap around a web part
 
This is a simple example, but this method can be used to create a variety of different web parts or web part zones in a single page. You can use contextual selectors to affect the web parts styles within as well, as shown in the below sample where I specify that the web part header for the web part in the container looks different than the other web parts:
 
.CustomZone .ms-WPTitle, .CustomZone .ms-WPTitle a:link, .CustomZone .ms-WPTitle a:visited {
font-weight:bold;
color:navy;
padding-left:10px;
padding-top:10px;
font-size:14pt;
}
.CustomZone .ms-WPHeader TD{
background: white
}
 
Sample wrap around a web part, version 2
The next installment of this series will cover how to customize the SharePoint navigation systems.  Coming soon....
 
posted on Tuesday, July 08, 2008 2:42 PM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon

VIEW COURSE SCHEDULE