A web part title bar with scripted rounded corners that can be displayed with or without a border.

Background

I wanted to create Sharepoint web part title bars with curved corners, and my search of the web led me to a couple of really good articles that got me started. Heather Solomon’s Post on Branding Sharepoint discusses how you can use gif files of the rounded corners to do this. I knew I did not want to use images since there are plenty of scripting solutions out there for creating rounded corners on the fly, but Heather’s post was invaluable in knowing which styles I would need to modify. As I am sure you have heard, Sharepoint is a horrible mix of tables, css styles, and inline styles, so it was great that someone had already waded through this problem and documented it.

I had been following Paul Grenier’s series about JQuery for Sharepoint at the EndUserSharepoint site, so I started searching for a way to do rounded corners with JQuery. I found a JQuery Plugin for Corner’s that is documented here.

I did not want to get into editing master pages, or creating custom style sheets for my solution, I wanted to keep it a simple solution that could be added on a page in a content editor web part, and would only affect the rendering of that page. Obviously, if you are interested in having curved web part corners on every page of your site, then you could adapt this solution for that. But for demo purposes, my solution has the following guidelines:

1. The jquery script libraries are stored as two files in a document library on the site.
2. A content editor web part contains a reference to the two script libraries.
3. The content editor web part also has a couple of styles defined that override the styles inherited by the site
4. The content editor web part has all of the scripts.

So, while this is not the best solution for a site wide change, it is perfect for testing and getting a feel for what you can do.

Solution

1. Pick a document library on your site to store the two jquery library files. Upload these two files to the document library
   1. jquery-1.3.1.js – This is version 1.3.1 of the jquery.js library
   2. jquery.corner.js – This is a rounded corner plug-in for jquery.
2. Edit the page you want the rounded corner’s to appear on, and add a Content Editor Webpart. Edit the web part, choose Source Editor, and paste the following code into the web part, without the line numbers. Be sure to adjust the line where the script libraries are referenced to point to the document library you used for step 1.

<style type="text/css">

.ms-WPHeader TD h3 {
margin: 0;
padding: 3px 0px 2px 5px;
height:24px;
}

.ms-HoverCellInActive {
margin: 0;
padding: 3px 0px 3px 0px;
height: 10px;
//}

.ms-WPBorder {
border-color: #85B2ED;
border-width: 1px;
}

</style>

<script type="text/javascript" src="<a href="http://site/Documents/jquery-1.3.1.js%22%3E%3C/script">http://site/Documents/jquery-1.3.1.js"></script</a>>
<script type="text/javascript" src="<a href="http://site/Documents/jquery.corner.js%22%3E%3C/script">http://site/Documents/jquery.corner.js"></script</a>>

<script type="text/javascript">
//Change these variables
var backColor = "#85B2ED"
var textColor = "white"

AddWebPartCorners();

function AddWebPartCorners(){
    $(".ms-WPHeader TD h3").css("color",textColor);
    $(".ms-WPHeader TD h3 a:link, .ms-WPHeader TD h3 a:visited").css("color",textColor);
    $(".ms-WPHeader TD h3").css("background-color",backColor).corner("tl 7px");
    $(".ms-WPHeader td").css("padding-right","0px");
    $(".ms-WPHeader td").css("border-bottom","0px");
    $(".ms-HoverCellInActive").css("background-color",backColor).corner("tr 7px");
}
</script>

How Does it Work?

Lines 1-20 provide overrides for a couple of styles that are set by Sharepoint in the Core.css file. There are 3 classes we are concerned with here, .ms-WPHeader TD h3, .ms-HoverCellInActive, and .ms-WPBorder.

Above is a sample of the table that is used for the Web Part Header. It consists of one row and two columns. Here is an overview of each style.

1. .ms-WPHeader TD h3 – This is the style for the the web part title column. I is  I use it to hard code a height and control the padding. I tried finding a way around this, but, the problem is that the .ms-HoverCellInActive tag is a div, and from what I have researched, you can’t set the height of a div to fully fill a table cell unless that table cell has a height.
2. .ms-HoverCellInActive – This is the style for the second column in the header. It is the portion of the web part where the menu selector is placed. It is also the place where we need to have the second rounded corner. Again, I am hard coding a height here, and setting the padding so that this div lines up with the first column.
3. .ms-WPBorder – This is the style that controls the border of the content portion of the web part. I wanted to be able to match the border with the color I use for the web part title bar, so I just copied the style for it into here. You need to set this color manually to match whatever color you choose for the web part title bar.
4. .ms-WPHeader td – This style is not labeled above, but it controls the style for each column in addition to the styles above. I am handling the styling of the .ms-WPHeader td with script, so it is not defined in the style section. But basically it is used to remove the bottom border of the web part title bar and more importantly to remove the right padding for the HoverCell. If this right padding is not removed, the web part title bar does not cleanly line up with the border on the right side.

Lines 22-23 add a reference to our two script libraries. Remember to point these to the location where you downloaded them. It could be a relevant site link, but for my purposes I didn’t want to have to change the line based on which level of the site it was placed at.

Lines 25-40 are where the actual rounding work is done. This is a script block.

Line 27 and 28 are variables used to hold the background color of the Webpart title bar and the text color. If you are using a dark background color you will most likely want to change the text color to a light color.

Line 30 is just a call to the function defined in Lines 32-38

As for the function, most of the code should be self-explanatory. Lines 33 and 34 just set the color of the text.

Line 35 sets the background color of the first column, and then calls the actual corner function of our library. Because this is the first column, I am only rounding the top-left corner (tl) with a radius of 7px.

In lines 36 and 37, I am changing the style for .ms-WPHeader td. This is used to remove the padding for the HoverCell column, and to remove the bottom border of both columns.

And finally, line 38 sets the background of the HoverCell column and rounds the top right corner of it

What I have and have not Tested

Working with stylesheets requires that you take into account different browsers that might access your site. In my case, this is an internal intranet site where the browser is controlled. So, I have only verified this with IE 7. I did test in Firefox, and it did not work, but Sharepoint has other problems with Firefox anyway. I have tested on both a MOSS site and a WSS team site. On a WSS team site, the Links web part does not appear to be styled the same as others, so I will have to research that further. There may be other web parts that do not use the same styles. If you run across others, let me know. I tested using the default theme, and also with a theme we had customized internally.

Where to go from here?

I’m not sure how much more work I will put into this, as it accomplishes the goal I set out to achieve. But others may want to build on this or may have a better way to handle the css. Jan Tielens has written a Feature for Sharepoint that will include the JQuery library for you (though I’m not sure that it will include the jquery.corner plugin), and I plan to investigate that. As stated above, Paul Grenier has a huge collection of cool things you can do with JQuery and Sharepoint. If you want to round the corners of the quick launch bar, there is an article at Share The Learning for that. I had a few problems getting it to work, but it was a great resource for this project. And finally, if you want to include any of this site wide, Heather Solomon is the place to go for customization tips.