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

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

Popular posts from this blog

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 RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…