A Quick Way To Change The Look Of The Web Part Title Bars For Your Sharepoint Environment

By replacing a small handful of image files you can change the background look of the web part title bar and toolbar for portals and WSS sites.

First, design your new titlebar/toolbar, you will need it in two different heights, and replace the images files on the server with your modified files using the same file names. The images are used as a repeating background, so the width of the image can be very small. If you want light text on a dark background, you will have to additionally modify the CSS files to change the text color.

The image files are located here: 60TEMPLATEIMAGES

Web Part Title Bar and Toolbar Images

Portal or WSS Image Name Function Related CSS Class Image Height
Both partgrad.gif Web part title bar background .ms-WPHeader 17 pixels
WSS toolgrad.gif Background of toolbar on list and document library pages table.ms-toolbar
.UserToolbar
22 pixels
Portal toolgradp.gif Background of toolbar on list and document library pages table.ms-toolbar
.UserToolbar
22 pixels

For light or white text on a dark background web part title bar and/or toolbar, modify the following CSS classes. You can either edit the SharePoint CSS files or override them with your own specified CSS file.

Web Part Title Bar and Toolbar Text CSS Classes

Portal or WSS Class Name Function CSS File
Both .ms-WPTitle Header text in a web part title bar OWS.css
Both .ms-toolbar Toolbar on expanded view of a web part with Actions (Add New, Delete, etc.) OWS.css

If you are editing a custom created style sheet, copy these classes from 60TEMPLATELAYOUTS1033STYLESOWS.css:

  1. .ms-WPTitle {font-weight: bold; font-family: verdana, arial, helvetica, sans-serif;
    color: #003399;
    padding-left: 6px;
    padding-right: 7px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 8pt;
    }

 

  • .ms-WPTitle A:link, .ms-WPTitle A:visited
    {
    color:#003399;
    text-decoration:none;
    cursor:hand;
    }

 

 

  • .ms-WPTitle A:hover
    {
    color:red;
    text-decoration:underline;
    cursor:hand;
    }

 

  • .ms-toolbar {
    font-family: verdana;
    font-size: .68em;
    text-decoration: none;
    color: #003399;
    }
    Paste the classes into your custom style sheet. Change the font attributes to meet your needs.

    Add any additional attributes that you need, but RETAIN ALL THE ORIGINAL ATTRIBUTES. They can be modified to suit your needs, but do not delete the attribute. Your custom style sheet will only override class attributes located in the SharePoint CSS files– it will not replace the entire class. So if the copied class in your custom style sheet specifies a font size and you remove that attribute, the site will still use the OWS.css specified font size.

Dustin Miller and Heather Solomon from SharePoint Experts