Adding rounded corners to web part header for SharePoint 2010

I wanted to add rounded corners to the out-of-the-box web part header in a SharePoint 2010 site. Looking around in Google’s initial results, I found a couple references to Heather Solomon’s article about adding rounded corners to a web part header in a 2007 site, but I didn’t especially love that the rounded corner didn’t go all the way to the right edge:

At this point, I have to admit that I didn’t dive much further into Google results, but decided to have a go at it on my own. If I had spent a little bit of extra time, I might have found Rich Whitworth’s article about using jQuery to add classes to the table cells of the web part header which would then give you an easy way to hook in the CSS. Or I might have seen Kyle Schaeffer’s article on using CSS and images to add rounded corners, which is pretty close to what I ended up doing. … But I didn’t, so here’s what I ended up doing on my own.

I’m going to go through a couple different examples:

  • A gradient rounded header bar using images and CSS
  • A rounded header bar using CSS3

These will all be based on the same general principle, but perhaps the slight differences and examples will be helpful.

The basic idea

Here is the HTML for the table that holds the web part header. As you can see, the row has a class of .ms-WPHeader. Then, there are up to five table cells involved:

  • td.ms-wpTdSpace – the first spacer cell on the left
  • td.ms-WPHeaderTd – the cell that holds the title
  • td.ms-WPHeaderTdMenu – the cell with the dropdown arrow; only shows if you have editing privileges
  • td.ms-WPHeaderTdSelection – the cell with the select checkbox; only shows if you have editing privileges and if it’s available
  • td.ms-wpTdSpace – the last spacer cell on the right

In order to attach a background image or color, I’ll apply styles to all the table cells by using .ms-WPHeader td. To add on the rounded corners, I’ll apply styles to td.ms-wpTdSpace – the spacer cells on the left and right – and use the :first-child pseudo-class to target the left spacer cell and modify it as much as I need to. Finally, I’ll work with .ms-WPHeaderTdMenu, which has some border styles applied by the default core CSS and a hover background effect, so that it doesn’t clash with my new header bar styles.

Ready? Let’s go!

A gradient rounded header bar using images and CSS

Let’s start with a gradient rounded header bar using images and CSS, which will compatible across most browsers, including IE7 and 8. Here are the two images I’ll be using – “bg-bar.png” for the repeated background, and “bg-barcorners.png” for the left and right corners.

Now, let’s add the CSS. I’ll start with applying the repeated background image to all the table cells:

.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important;  }

Here’s what it looks like:

That little gap on the right has to do with some of the border settings on the .ms-WPHeaderTdMenu cell — we’ll deal with that later.

For now, let’s apply the rounded corners to the left and right table cells. I’ll apply the background image to any table cell with .ms-wpTdSpace and position it to show the top right, then use the :first-child pseudoclass to move the background image to the top left so that the corner shows up properly.

.ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; }
.ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; }

Wasn’t that easy?

The rest of this is just fine-tuning. I’m going to change the color of the title text to be white (both the normal title text and any linked title text) and remove the border from .ms-WPHeaderTdMenu to get rid of that gap. I’ll also add some styling to the .ms-WPHeaderTdMenu hover state so that the hover effect goes more with my color scheme.

.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Here’s how it looks now:

Here’s the complete CSS code for those of you who like to just copy and paste:

.ms-WPHeader td { background: url('../images/bg-bar.png') repeat-x; border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { background: url('../images/bg-barcorners.png') top right; }
.ms-WPHeader td:first-child.ms-wpTdSpace { background-position: top left; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

A rounded header bar using CSS3

For an even quicker solution that doesn’t involve using images, you can use CSS3 to add rounded corners to the header bar. This solution won’t work in IE7 or IE8 but should work in IE9, Firefox, Safari, and Chrome.

If you look at the code below, I used a background color in place of a background image, then rounded the corners using CSS3 properties.

.ms-WPHeader td { background: #7bb42d; border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Here’s what it looks like:

You can even use CSS3 to add a background gradient to duplicate the look from my first example.

.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }

Just for an extra variation and a slightly different look, you can add rounded corners to the bottom edges of the web part header by using more border-radius properties. Notice that I also added .ms-WPBorder { border: none; } to remove the border from any web parts that might have the border showing.

.ms-WPHeader td { background: #7bb42d; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(124,180,45)), color-stop(1, rgb(176,210,128))); background-image: -moz-linear-gradient( center bottom, rgb(124,180,45) 0%, rgb(176,210,128) 100%); border-bottom: none !important;  }
.ms-WPHeader td.ms-wpTdSpace { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; }
.ms-WPHeader td:first-child.ms-wpTdSpace { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; }
.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #c3e298; }
.ms-WPBorder { border: none; }

Hope you find this helpful!

References and additional resources

About these ads

19 Comments

  1. Posted March 11, 2011 at 8:51 am | Permalink

    This is a fantastic article. So many times I see this get massive quotes of time and expense to re-invent the same implementation. Thanks for sharing :)

    • Posted March 11, 2011 at 9:18 am | Permalink

      Thanks for commenting, Wes! If you choose to quote massive amounts of time and expense for this effect, I won’t tell… ;)

  2. Posted April 26, 2011 at 1:45 pm | Permalink

    Nice! Much appreciated!

  3. Ree
    Posted May 12, 2011 at 5:04 am | Permalink

    Hi there, thanks so much for sharing! i am new to sharepoint, just started working on it. Could you please tell me which css file to modify? and its path? thanks once again!

  4. Srinivas
    Posted June 15, 2011 at 9:47 am | Permalink

    Hi..Corrie..Thanks a lot for this bit. Just perfect.

    Regards
    Srini

  5. Hamish
    Posted August 16, 2011 at 6:54 pm | Permalink

    Nice article and thanks for that. I was just wondering if it can be used for SharePoint 2007 as well?

    Thanks,
    Hamish

  6. Posted August 19, 2011 at 11:10 am | Permalink

    So I’ve looked in the Found in:
    LAYOUTS\1033\STYLES\mysitelayout.css
    and
    LAYOUTS\1033\STYLES\COREV4.CSS
    folders and I am unclear where to paste the code you’ve implemented.

    Also the two .png files need to go in what location in sharepoint to be referenced?

    Could you help clarify this as I cannot find any other articles concerning this issue.

    Thanks

  7. Bob
    Posted August 30, 2011 at 6:52 am | Permalink

    this does not seem to work for ie8, the corners are squared. If I use firefox it looks perfect. Is there a different format to write the commands for IE?

  8. Posted March 27, 2012 at 6:23 am | Permalink

    Nice article and thanks for that.

  9. Posted July 8, 2012 at 1:46 am | Permalink

    Thanks for this. I was pulling my hair out trying to get the td.ms-wpTdSpace to work.
    Much appreciated :)

  10. Luis
    Posted September 12, 2012 at 6:54 am | Permalink

    I’ve tried this code verbatim,including the graphics, and the corners do not show up. I am using IE8. Is there an issue with IE* that it does not show the corners? Is there a workaround for it?

    • Posted October 1, 2012 at 2:26 pm | Permalink

      Have you checked in other browsers? Most likely there’s a problem with the image reference – check the path of the image relative to your stylesheet and pages.

  11. Ad
    Posted September 27, 2012 at 1:13 pm | Permalink

    Works like a charm!

    Thanks Man!

  12. Fatma
    Posted September 30, 2012 at 2:01 am | Permalink

    where the photos should be saved ? am saving it under style library and its not working !!

    • Posted October 1, 2012 at 2:25 pm | Permalink

      I keep my images in a subfolder under Style Library. My CSS file is in that same folder. You’ll just want to check your references carefully!

  13. Luis
    Posted November 5, 2012 at 10:43 am | Permalink

    Thank you for this article. Of all the ones I read, it seems the easiest to implement. I tried this verbatim, including the graphics, and it worked just fine. The only question I have is where or how did you make the icons? I would like to have a different color. Do you have the URL for this rounded corner?

  14. Posted December 4, 2012 at 6:57 pm | Permalink

    I have tried this by inputting the code into the html editor in 2010 when I hit ok it looks awesome however when I save and get out of edit mode it vanishes.

  15. Thakhi
    Posted July 11, 2013 at 12:58 pm | Permalink

    Very nice article.But I am looking for bottom borders css ,which also needs rounded corners .Please help me out…thanks


One Trackback/Pingback

  1. [...] http://corriehaffly.wordpress.com/2011/03/10/adding-rounded-corners-to-web-part-header-for-sharepoin… [...]

Post a Comment

Required fields are marked *
*
*

Follow

Get every new post delivered to your Inbox.

Join 51 other followers

%d bloggers like this: