Skip to main content

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!

Comments

Anonymous 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;
}
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
Unknown 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....
Unknown 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
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
Eliaz Beth 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.

Popular posts from this blog

How To: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class. I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover. Ribbon Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ