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. Continue reading ‘Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution’
