Stylize Individual Web Parts with a CEWP

The following instructions describe how to change the title bar, background color, and webpart title for one or more web parts on a specific page or site.

1) Navigate to the page or site that requires the styling

2) View the browser’s source code for the page: Page > View Source (IE7) or Use IE developer Toolbar DOM Explorer

• Search the source using the title of the web part that requires separate styling (i.e. “News”, "Links" etc.)
• From the “td” tag that contains the web part “title”, select the “id” from the grandparent “td” tag. For example, see the web part “title” and corresponding web part “id” highlighted below:

<td id="MSOZoneCell_WebPartWPQ2" vAlign="top">
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="ms-WPHeader">
<td title="News" id="WebPartTitleWPQ2" style="width:100%;">

• In this case, the “id” for the “News” web part is “MSOZoneCell_WebPartWPQ2”
• Copy the “id” value

3) In the browser, edit the page: Site Actions > Edit Page

4) In one of the web part zones, add a new content editor web part. (It does not matter what zone this is added to since the web part will be hidden once editing is complete.)

• In the “Edit” menu of the new content editor web part, select “Modify shared web part”, and then select “Source Editor”
• In the pop-up window that appears, paste the following code, which includes the “id” value from the source code (here we use the example value in italics):

<Style>

/* Webpart Header Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpheader td{
background-color: #006699;
}

/* Webpart Border Color */
# MSOZoneCell_WebPartWPQ2 .ms-wpborder{
border: 1px #FFCC00 solid;
background-color: #006699;
}

/* Webpart Title Text Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:link{
color:#FFFFFF;
}

/* Webpart Title Text Visited Color */
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A:visited{
color:#FFFFFF;
}

</Style>

• Click “Save” in the pop-up window to save the changes
• Expand the “Layout” section in the editing pane that appears on the right-side of the browser window
• Select the check box labeled “Hidden” to ensure that the content editor web part will not be visible to users
• Click “OK” in the editing pane to complete editing the web part

5) Determine the web part that is to be differentiated using this new styling

• Under the “Edit” menu of this web part, select “Modify Shared Web part”
• Expand the “Appearance” section of the web part editing pane
• Scroll-down to the “Chrome Type” drop-down list and select “Title and Border”
• Click “OK” in the editing pane to save the new settings for the web part

6) Repeat step 2 and add to step 4 for any additional web parts that require this styling

7) Click “Exit edit mode” in the top right of the browser to return

8) Refresh the browser to see the styling changes made to the selected web part(s)

Note: This solution only effects the current page, and if the web part changes position in its current zone, or is moved to another zone, the custom branding will follow the web part to its new position on the page. SharePoint assigns these webpart ID's as you add each webpart to the page, so if the webpart is removed and then added back to the page the styling you might get some unexpected results.

This can be considered a quick and dirty method. There are other options that will span all pages using a particular page layout by adding a div tag with a particular class around a webpart zone for which you can set a style per webpart zone area and not the webpart itself.

Thanks and happy styling!