Adding a box or rounded corners around a SharePoint web part can be challenging due to the way that SharePoint renders it’s web parts in a <table> layout. This article explains how to add extra <div> elements around the SharePoint web parts. Then by using the ‘sliding doors’ css technique we can add a flexible box arround the SharePoint web part and even include rounded corners.
This tutorial already assumes that you know what SharePoint master pages are and how to work with css and JavaScript files.
Problem.
The HTML code of a SharePoint web part is made out of tables. Depending on the web part options you selected extra tables and css classes can be added, removed or nested.
The basic HTML markup of a SharePoint web part looks like this
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="s4-wpTopTable">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr class="ms-WPHeader">
<!-- web part title and menu goes here -->
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<!-- actual web part content goes here -->
</tr>
</tbody>
</table>
This table layout does not leave much room to add a flexible box layout.
The solution.
By using jQuery we can add extra <div> elements to each web part on the SharePoint page. We will use these extra <div> elements to create a box arround the web part.
For simplicity sake I have put all the needed files together in a folder “boxdemo”. I simply copied these files to the ‘_layouts\styles\’ folder of my SharePoint hive.
Note: putting your files in a folder on the SharePoint server harddrive is not best practice! But for tutorial purposes this will do :-). Always use a SharePoint feature when deploying files to a SharePoint server.
The actual box around the web part will be created by simple images. You can use this website to generate the desired images.
For this solution we will need 6 images
- l.png (left image)
- r.png (right image)
- t.png (top image)
- b.png (bottom image)
- tl.png (top left image)
- bl.png (bottom left image)
And also 2 extra files. A stylesheet and a javascript file. you can already create these and leave them empty for now.
- style.css
- boxing.js
We will add code to these empty files later on.
Adjust your master page
In order to make the boxing work we need to add 3 links to our master page. These links points to the jQuery library, our styling file and our JavaScript file.
Open your master page and add the following links to the <HEAD> section of your master page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/_layouts/Styles/boxdemo/boxing.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/_layouts/Styles/boxdemo/style.css" media="screen" />
I use the jQuery hosted at googleapis.com. In corporate environments this domain is sometimes blocked. If this is the case you should download the jQuery library and put it in the _layouts\styles folder together with the other files.
Javascript
To dynamically add the extra <div> elements arround your webparts we will need a piece of javascript.
Open the (empty) boxing.js file you created earlier and add the following code
/* Add extra div arround webparts so they can be styled with a box. */
$(document).ready(
function RoundWebPartHeader() {
$(".s4-wpTopTable").each(function () {
$(this).addClass("wp-head-round")
.wrap('<div class=\"box-wp-dialog\">')
.wrap('<div class=\"box-wp-content\">')
.wrap(' <div class=\"innerbox\">')
.parents("div:first").parents("div:first").parents("div:first").prepend('<div class=\"top\"><span> </span></div>')
.append('<div class=\"bottom\"><span> </span></div>')
});
}
);
This JavaScript uses jQuery to find all HTML elements with the css class “s4-wpTopTable”. By default this css class is assigned to every web part on the page by SharePoint.
For each HTML element with css class “s4-wpTopTable” the code does the following :
- adds a css class “wp-head-round”
- wraps the web part in a <div> with class “box-wp-dialog”
- wraps the web part again with a <div> with class “box-wp-content”
- inside the <div> with class “box-wp-dialog”, a new <div class”top”> is added
- inside the <div> with class “box-wp-dialog”, a new <div class”bottom”> is added
When this is done the SharePoint web part will be encapsulated by various <div> elements.
And the HTML will look like this
<div class="box-wp-dialog">
<div class="top">
<span> </span>
</div>
<div class="box-wp-content">
<div class="innerbox">
<! -- The webpart table HTML is included here -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="s4-wpTopTable">
</table>
</div>
</div>
<div class="bottom">
<span> </span>
</div>
</div>
Go ahead and try it out. Visually there will be no changes (yet). But the extra <div> should be there in the HTML. Keep in mind that the extra HTML elements are added dynamically on the client side. You will not see these new HTML elements in the source of the page. You need to inspect the HTML with FireBug or with the “Internet Explorer Developer Tools” (F12)
Styling
So now that you have the (extra) <div> elements in our HTML, we can focus on actually styling and creating the box. The last step in our tutorial.
Open the (empty) style.css file and add the following css code.
.box-wp-dialog .top
{
background-image:url(/_layouts/Styles/boxdemo/tl.png);
background-repeat: no-repeat;
background-position: left top;
height: 12px;padding: 0px 0px 0px 10px;
}
.box-wp-dialog .top span
{
background-image:url(/_layouts/Styles/boxdemo/t.png);
background-repeat: no-repeat;
background-position: right top;
width: 100%;height: 12px;float: left;
}
.box-wp-dialog .bottom
{
background:url(/_layouts/Styles/boxdemo/bl.png) no-repeat left bottom;
height: 10px;
padding-left:15px;
}
.box-wp-dialog .bottom span
{
background:url(/_layouts/Styles/boxdemo/b.png) no-repeat right bottom;
height: 10px;
display:block;
}
.box-wp-dialog .box-wp-content
{
background: url(/_layouts/Styles/boxdemo/l.png) repeat-y top left;
padding-left: 2px;
}
.box-wp-dialog .box-wp-content .innerbox
{
background: url(/_layouts/Styles/boxdemo/r.png) repeat-y top right;
background-color: #FFFFFF;
padding: 5px 5px 0px 10px;
}
This CSS code simply defines the correct background images on our web part to create the illusion of a box. Save the file and reload your page. Make sure your browser is not using a cached copy.
You should see something similar to this
You can change the images to the desired color. Play around with the height, padding, etc…
Happy coding…
