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:
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.
3 thoughts on “Rounded Corners on Web Parts”
Unlucky mate. I have use that popular jQuery rounded corners plug in but they are a bit anoying and get in the way, more code to bog the page down etc… sod it, just use CSS3
Is that possible? Would CSS3 work for a SharePoint web part? I’d love to see an example.
JQuery script for SharePoint rounded web parts – http://www.signaturesterling.com/blog/post/Rounded-Corner-Web-Parts.aspx