Monday, January 5, 2009

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!

16 comments:

Kris said...

I was looking forward to this working! Unfortunately even after carefully following the post several times it didn't work for me. Not sure what went wrong.

rreid said...

I also ran into problems with it working. I tried it several times with no such luck.

Ian said...

Did anyone get this working?

Ian said...

Did anyone get this working?

Joe K said...

Yes, I did get this to work. Make sure you include the style tags around your css. Just what I was looking for!

Jassem Shakil said...

I wasted one whole day just to change the color of header font of a single web part. This morning, I read this article and did it in 10mins. Thanks alot!

Paul Goldy said...

Yes, I got thi working, but you have to make a slight change to the code provided. The code sample has two lines which show:

# MSOZoneCell_WebPartWPQ2 .ms-wpheader td{

Note the SPACE between the pund/hash sign (#) and the text: MSOZoneCell. Remove the space and the sample works. The line should look like this:

#MSOZoneCell_WebPartWPQ2 .ms-wpheader td{

Remember there are two lines from the sample with this problem.

Thanks again for the sample/concept. Very helpful.

PaulG

Anonymous said...

Hi Guys,

Here is working code to change background color and border of a webpart using content query webpart.


.ms-WPBody#WebPartWPQ7 {
BACKGROUND-COLOR: #ffeca5 !important
}
.ms-WPBorder #WebPartWPQ8 {
border-color: #00ff00 !important;
border-width: 1px !important;
border-style: solid !important;
}

eranga said...

Is this works with sp 2010?

Anonymous said...

Is there a way to get this customization to work if you choose the "Border Only" option under Chrome Type? When I choose this I seem to lose any customization.

Anonymous said...

I could get this to work just fine on list web parts. It does not work on another Content Editor Web Part on the same page.

Used generic for the lists / used unique for the other Content Editor Web Part. Text remains microsoft blue, although the background is black.

INF4WEB said...

Can you please tell me, how i can target particular webpart based on it's title thanks

aparna john said...

Hi,The case, maybe a pair of ski boots, paint for the house or a bicycle for a youngster. Web Design Cochin on the cheap can cost me dearly. We all have been there. It hurts to part with the hard earned cash so we cut corners.Thanks....

changeparts said...

Thanks for sharing such a nice information, its helpful for me. I have you bookmarked to check out new stuff you post. Keep sharing.Change Parts

Elizabeth J. Neal said...

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. Web Design

Fiverr Work said...

Likes greatly improve the level of recognition of your respective respective web site and together with the accurate quantity count; several of us will most likely be serious about your account. The firms that provide these companies, will present you with non-automated or robotic likes and provide you with real Instagram likes. cheap instagram likes The nice thing about this is definitely the incontrovertible fact that they're promptly sent towards your account this implies you usually do not need to have to wait that noticeably. And when you are a group, escalating your Instagram likes will probably be useful.