The Holy Grail of SharePoint branding – at least as far as I’m concerned – is rounded corners on Web Parts. Every design that comes in has this at first. As mentioned yesterday there are examples of doing this for the web part’s title – I’ve done this using Madalina’s instructions and Heather Solomon has some instructions too.

However, as far as I know nobody has yet figured out a way of putting rounded corners on the bottom corners of web parts. The HTML they have does not suit them to do this via CSS. The only idea I’ve had previously was to use ControlAdapters to modify the output of of the Web Part itself. And I’m pretty sure you’d have to write an adapter per web parts. That kind of sucks; no customer is going to be in a hurry to pay for that.

Well, when I was looking at putting borders around an entire web part zone, I had a thought. What we really need to do is insert elements into our page. jQuery can do that sort of thing. Could I use jQuery to find each web part and wrap some tags around it?

Looking in the HTML produced for a page, I noticed that web parts all seem to exist in a table cell with an ID that begins ‘MSOZoneCell_WebPart‘ so I tried querying for that, and wrapping it in DIV tags (the same structure as used yesterday for the whole zone):

Erm, this worked (Image below is just one web part zone):

Clearly, that style sucks. And you’d want to work on the styles of the web parts themselves – removing borders and the like. And I think that having separately styled ‘titles’ and ‘bodies’ might be… awkward. But those are borders around individual web parts. They do show up in Edit mode, and they do move when you drag the web parts around:

Unfortunately, I do seem to be getting a JavaScript Error now. When I open it up to look at it I see:

I’m pretty sure I’ve never written 120 million lines of code, so I’m not quite sure what’s going on here. It doesn’t seem to cause any problems though. I don’t know if somone can take this prototype on and solve that one – but I can’t find the problem. It sounds very similar to this bug report.