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.

16 thoughts on “A Quick Way To Change The Look Of The Web Part Title Bars For Your Sharepoint Environment”

  1. Good stuff. With modifications like this, I always suggest:

    a) use your own image files with unique names
    b) create your own stylesheet to overrride the SharePoint ones rather than replacing the existing ones in SPS.CSS or OWS.CSS

    Upgrades and supportability will be better this way.

  2. I have the same question, is there a way to only customize a single web part’s title bar without affecting others?Thanks,

  3. How can I change the list heading columns like ‘Title’ , ‘Type’ to be grayed out if there are no line items in the list and also gray out the text ‘There are no items…’

  4. Is it possible to remove the arrow on the right hand side of the web part title? At the moment the only option I have on the drop down is ‘help’ – which is not that useful as it brings up a standard sharepoint help file. I would really like to know how to remove these to clean everything up!

  5. Hello,I had previously written to you about the header area of a webpart. I am still stuck on the same problem in which i need to create a border for the entire header but the header TD class creates two cells in the header area.also now the bottom border of the webpart is not visible. it has some how been lost and now the webpart has only three borders..two on the side and one on the top…no bottom border….please help!!!Thank you.

  6. If we want to modify the title bar for only one web part, how can we do this using the CSS? Even if we create our own method class in the css file(i am guessing core.css here??), how can we map only that web part to use the particular class name present in the CSS file, without exporting the web part??

  7. Hi There,Nice website. I have a problem I hope you can help me with. I want to change the fontcolor for the weppart header. I do that with the code: .ms-WPTitle in my -css sheet. But some of the haeders has not changed color. I has figured out, that it is the webparts ehere the header is a link. ie the webpart announcements.How to I change those font colors as well?

  8. the problem with using the webpart id is that any webpart in that spot will assume that id, it’s not unique to that webpart’s instance, so if you put a different webpart there it will take on those styles which is not always the intended effect.

  9. Great idea. Was wondering, is there a easy way of changing the text on the “Add new” link. Say I wanted to change the text to say “Add New Action Plan” instead of “Add new discussion” (for a discussion list web part)

  10. The Big DaneNice website. I have a problem I hope you can help me with. I want to change the fontcolor for the weppart header. I do that with the code: .ms-WPTitle in my -css sheet.But some of the haeders has not changed color. I has figured out, that it is the webparts ehere the header is a link. ie the webpart announcements.How to I change those font colors as well? @The Big DaneYou can change the font color of the webpart title bar(with links) using the css class “.ms-WPTitle A:link,.ms-WPTitle A:visited.” You might also want to change the hover font color using the class “.ms-WPTitle A:hover.”

  11. Hi there, cheers for this. im trying to change the colour of the horizontal line directly underneath webpart title bars – i found out how to alter the line under the web part on your reference but cant for the life of me find how to change the line at the top – it seems like there’s info to change everything *but* this on the web and it’s doing my head in! any idea’s?Cheers,Matt

Comments are closed.