SharePoint 2010: Add Colors, Borders and Fonts to Web Parts

In October of last year I wrote an article on changing the color, borders and fonts for SharePoint 2007 web parts. Here (finally) I will do the same for SharePoint 2010 web parts. The previous article used JavaScript to make these changes while this one will use CSS.

A 2007 version of this article is here.

Do you want to change all web parts in all pages, all web parts in a single page or just one web part? Each of these will require a slightly different approach.

• All web parts in all pages?
    Add the CSS to the master page, either inline or linked to a file
• All web parts in a single page?
    Add the CSS to the page using SharePoint Designer or a Content Editor Web Part
    (If using a CEWP, add the web part below the web parts to change, i.e. last zone, last web part)
• Just one web part?
    Add the CSS as for a single page, but prefix all of the CSS entries with the ID of the web part to change

The example CSS below is for a single web part example. It will only impact a web part with an ID of “#MSOZoneCell_WebPartWPQ5”. To find this ID, visit the web part page, use the browser’s “View Source” option and search for your web part’s name (“Shared Documents”) and browse up to find the ID, or search for “#MSOZoneCell_WebPartWPQ” and browse down to find your web part’s name. Be aware that this ID may change if you rearrange the web parts on the page!

To use the sample CSS below for all web parts, remove all of the “#MSOZoneCell_WebPartWPQ5” references.

 

A Web Part

Here is a terribly abused web part :-) that has an exaggerated set of colors and fonts to make each area stand out.

 

The CSS

Notes:

• You don’t need to use all of the CSS. Pick and choose as needed.
• This is not a complete list of what you can change in a web part. Search the HTML source of your web part page for ideas, or do a web search to see what others are doing.
• “#MSOZoneCell_WebPartWPQ5” is the ID of a single web part to change. This is only need when changing a single web part on a single page. Your web part will have a similar ID, but with a different number.
• The number in the web part ID may change if the web part is moved on the page.
• “#MSOZoneCell_WebPartWPQ5.ms…”  vs “#MSOZoneCell_WebPartWPQ5<space>.ms…”
  The space is used to indicate a parent-child relationship. With the space, CSS looks for an element with an ID of “#MSOZoneCell_WebPartWPQ5” and then looks for a child element with a class name of “ms…”. Without the space, CSS looks for single element that has both the ID and the class name.
• Anywhere there is a background property you can also set a background image by using:
     background-image:url(' someimagepath ');
• Colors can be set using color names (“green”) and color numbers (“#00FF00”)
• The .ms-wpTdSpace class name is used to identify the corners or ends of the web part’s title area. If you don’t define anything for these they stay hidden. See the links at the end of this article for ideas for taking advantage of these corner areas. (How about rounded tab-like corners!)

 

<style type="text/css">

/* === Title bar CSS === */

/* TR - title bar for web part */
#MSOZoneCell_WebPartWPQ5 .ms-WPHeader 
{
  background-color:green;
}

/*  H3 - Text in title bar of web part */
#MSOZoneCell_WebPartWPQ5 .ms-WPTitle a    
{
  color:white;
  font-family:"Comic Sans MS";
  font-size:24pt;
}

/* TD - far left and far right (corner) cells of title bar - useful for round corner tricks */
#MSOZoneCell_WebPartWPQ5 .ms-wpTdSpace
{
  /* background-image:url(' someimagepath '); */
  width:30px !important;
  background-color:red;
}

/* web part check box */
#MSOZoneCell_WebPartWPQ5 .ms-WPHeaderCbxHidden  
{
  display:none;    
}


/* === Web part background CSS === */

/*  TD - background for all but title bar of web part */
#MSOZoneCell_WebPartWPQ5.s4-wpcell  
{
  background-color:lightgreen;
  /* border-style:dashed; */
  border-style:dashed;
  border-width:5px;
}

/* TD - paging area (i.e. 1 - 5) */
#MSOZoneCell_WebPartWPQ5 .ms-bottompaging td
{
    background-color:yellow !important;
}    

/* hide the gray line above "add new" link */    
#MSOZoneCell_WebPartWPQ5 .ms-partline
{
  display:none;
}

/* selected (clicked) web part background */    
#MSOZoneCell_WebPartWPQ5.s4-wpActive
{
  background-color:fuchsia;
  border-color:red;
    /* border-style:dotted; */
}    


/* === Column headings === */

/* color for sortable column headings */
#MSOZoneCell_WebPartWPQ5 .ms-vh-div a 
{
  color:red !important;
}
/* color for non-sortable column headings */
#MSOZoneCell_WebPartWPQ5 .ms-vh-div 
{
  color:red !important;
}


/* === List text CSS === */

/* item description text */
#MSOZoneCell_WebPartWPQ5 .ms-vb2, 
#MSOZoneCell_WebPartWPQ5 .ms-vb-user a, 
#MSOZoneCell_WebPartWPQ5 .ms-vb-title a
{
  color:yellow !important;
  font-size:12pt;
}

/*  TR - alternating (#2,#4,#6...) row of web part */
#MSOZoneCell_WebPartWPQ5 .ms-alternating  
{
  background-color:navy;
}

</style>

 

 

Want rounded corners on your web parts?

See this article from Kyle Schaeffer: http://www.endusersharepoint.com/2010/11/29/web-part-style-in-sharepoint-2010/ and this article from Becky Bertram: http://blog.beckybertram.com/Lists/Posts/Post.aspx?ID=123

 

.