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…
Nice article. I have also tried to achieve the same but using a bit different approach as discussed here.
http://sharepointtechie.blogspot.com/2009/05/rounded-corner-footers-in-sharepoint.html
Thanks for the article. It was a lot of help in getting a rounded web part in SP2010. I’m having a strange problem though. The JQuery is adding the div tags in the correct spots within the web parts but is also for some reason adding it around my searchbox as well. Have you encountered this issue? And anything that I might be able to add to the jquery to get around this?
It’s normal since the jQuery function ” $(“.s4-wpTopTable”).each(function ()” will return all elements with the “s4-wpTopTable” class defined.
You can narrow the selection down by adding more ‘jQuery selectors’ to the function. Example:
$(“#leftColumn .s4-wpTopTable”).each(…)
This will only select the elements with cssclass ‘s4-wpTopTable’ that are inside the element with the ID ‘leftColumn’.
See the jQuery website for more info about selectors.
If needed you can of course add extra HTML elements (and cssclass / ID definitions) by editing the master page or the layout pages in SharePoint.
[...] How to add rounded corners to your SharePoint web parts by Wouter Laureys – Uses jQuery to add extra divs around the entire web part that you can then style. [...]
I believe the top-right and bottom-right images CSS are missing from your code, no ?
Normally, the “.box-wp-dialog .top span” and the “.box-wp-dialog .bottom span” take care of these.
I took the screenshot while creating the code so everything should be in there.
Excellent post!!!
Got a question though, Did Robin find the correct filter to remove rounded corners from Search Web Part. I tried with one you mentioned
$(“#leftColumn .s4-wpTopTable”).each(…)
but it did not work….
Any help will be highly appreciated!!
Alshah
Alshah,
I ended up using
$(“.s4-wpcell .s4-wpTopTable”)
in order to get around the Search Web Part issue. It works for the most part but there were one or two webparts that it didn’t completely style. I think one of them was the Excel Web Access web parts. But even with only the top being rounded, we decided to use it because we liked the way it looked. Hope that helps.
-Robin
Hi,
Thanks for sharing this article, i am confused with the images you have mentioned, the top ,bottom, left, right images are curvy at ends or just single line.i would be great if you provide the screenshot of images
I used this website to generate my corners.
http://www.generateit.net/rounded-corner/
They are ‘curvy’ images with a specific height (depending on how large your rounding of the corner is).
Some images are rather wide to be flexible with the width of the ‘box’
Hi Wout,
Have you tested the check out functionality with this solution? If a user clicks ‘Check Out’ in the ribbon, the item is actually checked out twice – causing an error.
Do you see the same issue?
Any ideas?
Thanks,
Nick
Most confusing article ever read, What is
l.png (left image) = Top Left?.
r.png (right image)= Top Right?.
t.png (top image)=
b.png (bottom image)
tl.png (top left image)
bl.png (bottom left image) ?..
This is a list of the image files I used.
png files are a specific image file format.
Hi,
I am able to apply this on only some web parts. on a content editor web part, for some reason it is applying three vertical lines on the web part and also closing vertical line is not quite aligning correctly. Any where we have to mention the width of the web part zone with in these css/js files? plese let me know.
Thanks
It’s very difficult to give you some advise remotely. Check if you have the correct html syntax no items with the same ID. etc….
I was able to fix the issue for Content editor web part and now when i try to use the same logic on a different site collection, when it is used on a List view web part, the right side of the box is missing. The same one works absolutely fine with all different oob as well as custom web parts. The issue occurs only wiht list/library view web part. Any suggestions?
How to add rounded corners on the main content area?