SharePoint 2007: Use CSS to 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. That article used JavaScript to make these changes while this one will use CSS. The CSS in this article is similar to the CSS needed for 2010 (see here), with one annoying difference… SharePoint 2010 has a CSS class defined for all web parts, s4-wpcell, that represents the main web part area. SharePoint 2007 does not have a class defined for the entire web part table. Instead it has a unique ID for each web part. That is why in the sample CSS below you will see  #MSOZoneCell_WebPartWPQ1 to #MSOZoneCell_WebPartWPQsomenumber . In theory you could have up to fifty web parts on a page, so I guess this could go as high as fifty.

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 CSS for web parts is quite complicated and may areas that can be changed.

 

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 for web parts is quite complicated and there are may areas that can be changed. The CSS below will create the example shown here. In your work you would add CSS for only the parts you want to change.

 

 

The CSS

As you play with the web part CSS, try one edit at a time. The order you define the CSS can impact the final result. The use of “!important” after the CSS can override existing inline styles.

Notes:

• You don’t need to use all of the CSS. Pick and choose as needed.
• Any area can be hidden by using:   display:none
• 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 needed 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.
• Anywhere there is a background property you can usually set a background image by using:
     background-image:url(' someimagepath ');
• Colors can be set using color names (“green”) and color numbers (“#00FF00”)

 

CSS to change all of the web parts on a page

To change all pages, add this CSS to your master page. To change a single page, add this CSS to a Content Editor Web Part or edit the page with SharePoint Designer and add the CSS just before the end tag for the PlaceHolderMain <asp:Content> tag. If using a Content Editor Web Part, it should be placed as the last web part on the page. This would usually be the last web part in the last column of the bottom most web part zone.

<style type="text/css">

/* CSS for web parts */


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

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

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



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

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

/* hide or change the gray line above "add new" link */    
.ms-partline
{
  /* display:none; */
  background-color:red;
}

/* "add new" area */
.ms-addnew
{
  background-color:gray !important;
}

/* There could be up to 50 web parts on a page */
/* Use your browser's View Source feature to check your zone names */
#MSOZoneCell_WebPartWPQ1,
#MSOZoneCell_WebPartWPQ2,
#MSOZoneCell_WebPartWPQ3,
#MSOZoneCell_WebPartWPQ4,
#MSOZoneCell_WebPartWPQ5,
#MSOZoneCell_WebPartWPQ6,
#MSOZoneCell_WebPartWPQ7,
#MSOZoneCell_WebPartWPQ8,
#MSOZoneCell_WebPartWPQ9,
#MSOZoneCell_WebPartWPQ10,
#MSOZoneCell_WebPartWPQ11,
#MSOZoneCell_WebPartWPQ12,
#MSOZoneCell_WebPartWPQ13,
#MSOZoneCell_WebPartWPQ14,
#MSOZoneCell_WebPartWPQ15,
#MSOZoneCell_WebPartWPQ16,
#MSOZoneCell_WebPartWPQ17,
#MSOZoneCell_WebPartWPQ18,
#MSOZoneCell_WebPartWPQ19,
#MSOZoneCell_WebPartWPQ20
{
  background-color:lightgreen;
}



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

/* color for sortable column headings */
/* there are many "diid" IDs, and this list is not complete */
.ms-vh2 .ms-vb, .ms-vh2 .ms-vb a,
#diidSortEditor, #diidSortAuthor, 
#diidSortCheckoutUser, #diidSortAssignedTo,
#diidSortTaskGroup, #diidSortLinkFilenameNoMenu, #diidSortCustomUrl,
th.ms-vh2-nograd
{
  color:red !important;
  font-size:12pt;
}




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

/* TD - item description text (for odd numbered rows) */
.ms-vb, 
.ms-vb2, 
.ms-vb a, 
.ms-vb2 a
{
  color:white !important;
  font-size:12pt;
}

/*  TR - background alternating (for even numbered rows) */
 .ms-alternating  
{
  background-color:navy;
}

/*  TD - text for alternating (for even numbered rows) */
.ms-alternating .ms-vb, 
.ms-alternating .ms-vb2, 
.ms-alternating .ms-vb a, 
.ms-alternating .ms-vb2 a
{
  color:red !important;
}

/* border (if enabled in the web part's properties */
.ms-WPBorder
{
  border-color:red;
  border-width:thick;
  border-style:dashed;
}



/* background and text for list web parts without column headings */
/* links list, calendar list... */
/* web parts with no items "There are currently no..." */
.ms-summarycustombody td,
.ms-summarycustombody td a
{
  background-color:yellow !important;
  color:red !important;
}


</style>

 

 

CSS to change a single web part

To select a single web part we will use the same CSS as above, but prefix each item with the ID of the web part. To find this ID, use your browser’s View Source feature and search for the name of your web part. Somewhere above this you will find a #MSOZoneCell_WebPartWPQsomenumber that represents your web part.

Here’s what you might find if looking for the “Airshow Pictures” web part:

 

CSS for web part #MSOZoneCell_WebPartWPQ17:

<style type="text/css">

/* CSS for web parts */


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

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

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



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

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

/* hide or change the gray line above "add new" link */    
#MSOZoneCell_WebPartWPQ17 .ms-partline
{
  /* display:none; */
  background-color:red;
}

/* "add new" area */
#MSOZoneCell_WebPartWPQ17 .ms-addnew
{
  background-color:gray !important;
}

/* There could be up to 50 web parts on a page */
/* Use your browser's View Source feature to check your zone names */
#MSOZoneCell_WebPartWPQ17
{
  background-color:lightgreen;
}



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

/* color for sortable column headings */
/* there are many "diid" IDs, and this list is not complete */
#MSOZoneCell_WebPartWPQ17 .ms-vh2 .ms-vb, #MSOZoneCell_WebPartWPQ17 .ms-vh2 .ms-vb a,
#MSOZoneCell_WebPartWPQ17 #diidSortEditor, #MSOZoneCell_WebPartWPQ17 #diidSortAuthor, 
#MSOZoneCell_WebPartWPQ17 #diidSortCheckoutUser, #MSOZoneCell_WebPartWPQ17 #diidSortAssignedTo,
#MSOZoneCell_WebPartWPQ17 #diidSortTaskGroup, #MSOZoneCell_WebPartWPQ17 #diidSortLinkFilenameNoMenu, 
#MSOZoneCell_WebPartWPQ17 #diidSortCustomUrl,
#MSOZoneCell_WebPartWPQ17 th.ms-vh2-nograd
{
  color:red !important;
  font-size:12pt;
}




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

/* TD - item description text (for odd numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-vb, 
#MSOZoneCell_WebPartWPQ17 .ms-vb2, 
#MSOZoneCell_WebPartWPQ17 .ms-vb a, 
#MSOZoneCell_WebPartWPQ17 .ms-vb2 a
{
  color:white !important;
  font-size:12pt;
}

/*  TR - background alternating (for even numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-alternating  
{
  background-color:navy;
}

/*  TD - text for alternating (for even numbered rows) */
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb2, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb a, 
#MSOZoneCell_WebPartWPQ17 .ms-alternating .ms-vb2 a
{
  color:red !important;
}

/* border (if enabled in the web part's properties */
#MSOZoneCell_WebPartWPQ17 .ms-WPBorder
{
  border-color:red;
  border-width:thick;
  border-style:dashed;
}



/* background and text for list web parts without column headings */
/* links list, calendar list... */
/* web parts with no items "There are currently no..." */
#MSOZoneCell_WebPartWPQ17 .ms-summarycustombody td,
#MSOZoneCell_WebPartWPQ17 .ms-summarycustombody td a
{
  background-color:yellow !important;
  color:red !important;
}


</style>

 

In closing…

There’s always more you can change! Use your browser’s “View Source” feature to explorer the HTML and CSS delivered by SharePoint to see what else you can do. You can also use the add in developer tool bars for Internet Explorer and FireFox to explore the CSS. Some of the cool CSS things you may want to do will probably not work in all browsers, especially Internet Explorer 6, so test, test test.

Also take a look at the CSS reference and branding blogs on the web like these:

http://www.heathersolomon.com/content/sp07cssreference.htm

http://weblogs.asp.net/bsimser/archive/2007/04/01/css-reference-chart-for-sharepoint-2007-pdf-version.aspx

 

.