Rounded Corner Footers in SharePoint Web Part

Last post I talked about rounding corners of header in SharePoint Web Part. In this post I will try to cover the rounding corners of Web Part footer.

Let's analyze how SharePoint render the HTML for each Web Part.

Below is the skeleton /structure of the HTML rendered by SharePoint.
<table>
<tbody>
<tr> --> Header TR
<td>
----- Table for Header Starts here ----
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="ms-WPHeader">
HTML for Web Part Header goes in here
</tr>
</tbody>
</table>
----- Table for Header End here ----
</td>
</tr>
<tr> -- > Body TR
<td valign="top" class="ms-WPBorder">
HTML for Web Part body goes in here
</td>
</tr>
</tbody>
</table>

As we can see, SharePoint render "TR" for header and body but it does not render third "TR" for footer of Web Part. So we need to add third "TR" for footer of web part to render our rounded corner footer.

To accomplish it I decided to use Javascript which will be added to the Master Page. To add "TR" we have to get reference of the "tbody" node/tag of root table and then append "TR" node to "tbody". But how we will identify whether the tbody we are referring is the one we need? If we analyze the HTML the header "tr" is applied a css class "ms-WPHeader". If we get hold of this "TR" we can go up to the "tbody" of the table and then add "TR" along with all the design element as required to make rounded footers.

Before we go ahead we require left bottom image, middle image and right bottom image which will represent bottom corner, middle and right bottom corner of web part respectively. The middle image will be repeated horizontally, hence the width of middle image will be 1px and height as required .

Below is the javascript for adding rounded footer to SharePoint Web Part. It also includes the script for adjusting the header which I talked in the previous post.

function cssHeader()
{
var trElement = document.getElementsByTagName("tr");
for (i = 0;i<trElement.length;i++)
{
if(trElement[i].className == "ms-WPHeader")
{
var arr = trElement[i].getElementsByTagName("td");
if(arr.length == 1)
{
trElement[i].className = "ms-WPHeader-new";
}
var tbody = trElement[i];
var tbodyCount = 0;
while(tbody.nodeName != "TBODY" || tbodyCount != 2)
{
tbody = tbody.parentNode;
if (tbody.nodeName == "TBODY")
{
tbodyCount++;
}}
createHTML(tbody);
}} } }


function createHTML(tbody)
{
var row1 = tbody.insertRow();
var col1 = row1.insertCell();
var myTable = document.createElement('table');
myTable.border = 0;
myTable.cellPadding = 0;
myTable.cellSpacing = 0;
myTable.width = "100%";
var row2 = myTable.insertRow();
var col2 = row2.insertCell();
col2.style.width = "5px";
col2.style.height = 15;
col2.className = "leftTdStyle";
var col3 = row2.insertCell();
col3.style.width = "98%";
col3.style.height = 15;
col3.className = "centreTdStyle";
col3.style.align = "right";
var col4 = row2.insertCell();
col4.style.width = "5px";
col4.style.height = 15;
col4.className = "rightTdStyle";
col1.appendChild(myTable);
}

Below are css styles which I added to the master page or alternatively you can add it to the alternate css file.

<style type="text/css">
/*footer*/
.leftTdStyle
{
background-color:#344646;
background-image: url("Your left bottom image URL");
background-repeat: no-repeat;
background-position:left top;
}

.centreTdStyle
{
background-color:#344646;
background-image: url("Your middle image URL");
background-repeat: repeat-x;
background-position:center top;


}

.rightTdStyle
{
background-image: url("Your right bottom image URL");
background-repeat: no-repeat;
background-position:right top;

}
</style>

That's all the modification we need to do. Save the master page and CSS class and see the result in the browser.

Known issue:

The above approach does not work in Firefox browser. May be method used to add cells are not supported by Firefox. We could replace it with suitable alternate methods.

Suggestions to improve are welcome.

Below are the sites and blogs which also discuss about rounding corners and suggest alternate solutions.

• http://www.heathersolomon.com/blog/articles/brandsppart3a.aspx

• http://madalina.blog.com/2705257/

• http://maghansson.blogspot.com/2008/03/aspnet-moss-web-parts-with-rounded.html

• http://www.whitworth.org/2009/03/09/rounded-corners-in-sharepoint

• http://tomblog.insomniacminds.com/2007/11/09/sharepoint-branding-issues-web-part