Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution
Guest Author: Brandon Anderson
Introduction
During the course of a customization and branding effort in SharePoint you are likely to find that you want to style web parts to look different from (Dare I say better than?) the stylistic treatment default to SharePoint.
In my quest for finding a way to improve the look of web parts, I discovered Microsoft’s markup for web parts does not allow for much web part style manipulation, as there are not enough CSS hooks. Nor could I modify the HTML inside a web part zone in order to wrap web parts with <div> tags for styling purposes—you can’t edit the contents of web part zone directly. So I had to settle with wrapping <div> tags with classes around web part zones, which got me where I wanted to go somewhat, but it failed to allow me to apply treatments like background colors, borders, rounded corners, and drop shadows to individual web parts—I could only apply them to the wrapper around the web part zone.
So I wrote some jQuery to inject into the DOM <div> tags and classes for web parts that I could then use as hooks in my CSS.
On March 17, 2010, EndUserSharePoint.com published a post I wrote about wrapping web parts with jQuery that included the necessary JavaScript function, but not much else. I apologize my post did not include the other assets needed, like the CSS and images. Moreover, with that post I had taken the approach of creating a custom master page from which my function would be called (my usual approach for SharePoint customization efforts). Several commenters noted they were looking for an encapsulated solution they could drop on the page via a Content Editor Web Part rather than a solution that would require them to modify master pages or page layouts. While I advocate referencing the solution from the master page or page layout, I understand that is not possible in all situations and that EndUserSharePoint.com leans towards solutions easily implemented by content contributors and site administrators.
The following is that solution, all packaged up, ready for you to plug-and-play.
Solution
This solution will work for WSS 2007 and MOSS 2007, and it makes use of Mark Miller’s Scripting Resource Center. Please follow Mark’s instructions so you have the proper libraries to follow along below. My code includes paths to these libraries and references them by name, so it is important to have your Scripting Resource Center at the root of your site collection and that you use the filenames as given below. The script, CSS, HTML, and images for this solution will be stored in your Scripting Resource Center library, to which you will reference from a Content Editor Web Part you drop on your page. I am also supplying the pre-configured Content Editor Web Part as a .dwp that you can add to your web par gallery or import onto the page.
Step 1. Create the Scripting Resource Center libraries.
See http://www.endusersharepoint.com/2010/01/05/build-a-sharepoint-scripting-resource-center/. I assume you have created your Scripting Resource Center at the root of your site collection and assigned it the path /ScriptingResourceCenter (any deviations will require adjustments to the solution’s HTML file).
Step 2. Upload the jQuery library into the “Resources-jQuery” library of your Scripting Resource Center.
You may or may not have a jQuery library already.
- If you already have your jQuery library version of choice, upload it into your “Resources-jQuery” library.
- If you do not currently have a copy of the jQuery library, go to http://jquery.com and click the “download(jQuery);” button. Upload this file into your “Resources-jQuery” library.
Note: In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2, and that the file is named jquery-1.4.2.min.js. If you are using a different version or file name, you will need to update the solution’s HTML file (wrapwebparts2007.html) to use the correct file name.
Step 3. Upload the JavaScript, CSS, and HTML files into the “Resources-Scripts” library of your Scripting Resource Center.
Download the following files from my Box.net folder and upload to /ScriptingResourceCenter/ResourcesScripts:
Note: The script in wrapwebparts2007.html that tests for and writes the reference to the jQuery library is borrowed from Christina Wheeler’s post “Transparent Overlays for SharePoint Interface Enhancement.”
Step 4. Upload the images into the “Resources-Images” library of your Scripting Resource Center.
Download the following images from my SharePoint Putty blog and upload to /ScriptingResourceCenter/ResourcesImages:
- standard_inner_wptitle_lightgrey_bg.gif
- wpcorners_f0f3f5_tl.png
- wpcorners_f0f3f5_tr.png
- wpcorners_ffffff_bl.png
- wpcorners_ffffff_br.png
Step 5. Upload my Content Editor Web Part into your site collection’s web part gallery and add it to your page.
Download the following web part from my Box.net folder and upload into your site collection’s web part gallery (located at /_catalogs/wp/Forms/AllItems.aspx). The web part’s name will be “jQuery Wrap Web Parts 2007.”
On the page you wish to use this script, add the “jQuery Wrap Web Parts 2007” web part. If for any reason you need to change the path to the solution’s HTML file, edit that web part and change the Content Link property. In our example, we’re using the Content Link field value “/ScriptingResourceCenter/ResourcesScripts/wrapwebparts2007.html”.

Step 6. Bask in the glory of your new web-part-modifying jQuery friend.
If you use this solution and the implementation is viewable by the public, please leave a link in the comments. I’d love to see how it’s being used.
Notes
- You may experience a delay between time the web part is written to the page and when the solution’s stylistic treatment is applied. This is due to the loading of the jQuery library and the solution’s script file.
- This solution will only work for WSS 2007 and MOSS 2007. I will work on a 2010 version and let you know when it’s ready.
- This solution was tested in IE 7, IE 8, and Firefox 3.6.
- Any deviations from the paths and filenames used the solution will require adjustments to either the solution’s HTML file, the web part’s Content Link path, or both.
- In the code provided, I assume you have uploaded the latest jQuery library version as of the time of this post, which is v1.4.2 and that the file is named jquery-1.4.2.min.js. If you are using a different version or file name, you will need to update the solution’s HTML file (wrapwebparts2007.html) to use the correct file name.
- If you do not want to make this web part available in the gallery, you have the option to import the web part onto the page on which you wish to use it using the standard web part import process.
- The CSS makes use of the “!important” property attribute in order to force the override of certain SharePoint 2007 default styles. While it is not necessary for every CSS property I write, I do it anyways out of habit and consistency. If you prefer not to use the “!important,” feel free to remove it.
Guest Author: Brandon Anderson
Brandon Anderson is a SharePoint user interface and look-and-feel specialist. He brings over 10 years experience with front-end web development to SharePoint implementations requiring customized branding. For the past 3 years, Brandon has worked extensively with the UI customization of SharePoint properties, both public and restricted-access, for clients of various sizes and industries. Brandon is the lead Microsoft SharePoint front-end developer for Ironworks Consulting (www.ironworks.com) and hosts the blog SharePoint Putty (sharepointputty.com), where he writes about the user interface customization of SharePoint.
- SharePoint: Using jQuery to Wrap Web Parts and Achieve the Unachievable
- Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution
- Collapsible Web Parts in a Zone Using jQuery for SharePoint 2007
- Collapsible Web Parts in a Zone Using jQuery for SharePoint 2007
Thanks for sticking with this Brandon. You can tell how excited folks are by the number of comments on the first post!
Thanks again-
Charlie Epes
Hi Brandon,
That’s what I call a really nice follow up!
Have to say that – even more so that the ‘technical’ aspect of the solution, truly appreciate the polished look of the wrappers, corners and that slight shadow at the bottom.
Count me in on the forthcoming ‘Make in not look like Sharepoint series’ ride!http://spuiguy.wordpress.com/2010/03/10/make-it-not-look-like-sharepoint/
Thanks for sharing your knowledge
Greg
Great work. My webpart seems to have extra space immediately above the title of the webpart however, as the graphics for each top corner do not connect to the border of the webpart – their is white space. Any ideas?
Charlie and Greg, thanks for the compliments.
Ben,
It’s hard to say without being able to see your site. If it’s publicly-accessible, feel free to send me (@spuiguy) the URL and I can take a quick look. If I had to guess, I’d say it might be the -3px top margin on the h3.ms-WPTitle; zero that out as a try.
Ben,
I was able to recreate what I think you are seeing when reverted the site back to using default.master as the master page. What happens is that default.master does not include a doctype, which in IE throws the page into quirks mode (another reason to use a custom master page).
To fix, add the property “margin-top:-8px !important;” to wrapwebparts2007.css at line 62 (in the .wpCornersTop statement).
Hi Brandon & Ben.
Cool solution – five minutes to implement and voila: http://www.mode2.com/curved-corners.gif
Just for info though the CSS change that you advised above to mend the gap in IE should be:
“margin-bottom:-8px !important;”
NOT margin-top: ….
Cheers
Ben
Yes, correct. It should be “margin-bottom:-8x !important;” Good catch, Ben.
Thanks guys… works perfect – again great work!
This is really awesome Brandon. I’ve got this working and now and looking good on one of my sites. If I might ask a question about the image files. How did you develop the image files? I would like to duplicate this on another site that I have using the Granite theme. The tools I have available to me are Paint.Net and a hexadecimal finder called ColorPick but I can’t seem to get a smooth balance like you’ve achieved.
I used Adobe Photoshop. The title bar background has a gradient for the rounded look.
Thanks Brandon. Paint.NET will let me do gradients. I’ll work on that for my other site. Again, great work.
I managed to add this to my master page now all my sites looks great =D.
@Ben: there is a white space because the image for the borders are not long enought for your webpart, just making those image larger may work.
Brandon – many thanks. This looks great when we have implemented it. The only problem we have is that once this is added to a page, the subsite dropdowns for our global navigation no longer work. Do you have any ideas?
I don’t know offhand, but I’ll investigate and get back to you. Thanks for following up.
The window.onload event I had in wrapwebparts2007.html conflicted with SharePoint’s onload scripts. Everyone, please download the new version at http://www.box.net/shared/6b5hr4yo86. I apologize I did not catch this prior to release.
All working perfectly now Brandon – Many thanks.
Its an excellent idea to round the corners.
One thing I have noticed that, if I fixed the width of my webpart, the images doesnot fit the webpart top and bottom. The top and bottom images goes out of the width of webpart.
How can we fix this?
siddiqui, maybe adjust the jQuery script to look for a possible width attribute on the web part table. Then have the script set the width of the wrapper to be the same width.
Thanks for all this, Brandon. Unfortunately, I need this to work in SharePoint 2010. Is that update coming soon?
JSR, although I’ve completed a few SharePoint 2010 implementations at this point, I have not had the need to use a similar web part wrapping script. When I do, I’ll provide an update.
Hi Brandon
Excellent post. I have a quick couple of questions for you: Are you done yet? Are you done yet? Are you done yet? :-) any Luck with a 2010 implementation? I was tickled pink to find your post utill I found the 2007 part. I’m very interested to see how this has changed.
Thanks
Jake
Jake,
I initially though Brandon had published theSP2010 version on EUSP2010 but could only find the SP210 version of his other post on how to collapse and expand WP in SP
http://www.endusersharepoint.com/EUSP2010/2010/03/24/how-to-expandcollapse-web-parts-in-sharepoint-using-jquery/
Greg
Brandon thumbs up for the good work.
But i’m after the SP 2010 solution. Let us know when youhave to time to post it.
Thanks in Advance
Thanks Brandon, Great work.
I have adopted this solution to SharePoint 2010, it works nice. Only issue you will find is that Javascripts adds up a Extra rounded Edge webpart at top of the page before tag. To solve that error please edit first line of the wrapwebparts2007.js as below.
$j(”div[id^=WebPart]“).not(’div[id=WebPartAdderUpdatePanelContainer]‘).parent().parent().parent().parent().addClass(”wp”);
Thanks & Regards
Senthil