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: \60\TEMPLATE\IMAGES
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 \60\TEMPLATE\LAYOUTS\1033\STYLES\OWS.css:
- .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.