Rounded Corners on Web Part Zones

Curiously, one of my more popular blog posts is about putting rounded corners on things in SharePoint. It does seem that this is a pretty popular question. As a side note, Heather Solomon has a post about doing this for web part titles, though I followed Madalina’s instructions.

Anyway, one design requirement that come up repeatedly is rounded borders on Web Parts. I swear, it comes up with every design – and it isn’t possible (although I have an idea – more on that tomorrow). What you can do, though, is have a rounded border about the entire web part zone…

2 Web Parts in two Zones

Of course, the problem with this is that if you put two web parts in one zone you get something like the following:

2 Web Parts in one Zone

Actually, that can sometimes work quite well, but it’s something else to consider when you (or your users) are laying out their web parts. Still, it’s pretty easy – here are the image files used for the border (I put them into a folder in LAYOUTS):

Files used

I then put a whole bunch of DIV tags into my page for the borders. I don’t like having all of them, but it’s a fairly standard way of doing this (browsers – please support CSS for corner radius soon).

DIV tags for corners

Yuck! Lots of DIVs, but combined with these CSS Styles …

Styles

… it puts our border around our web part zone. Obviously, for a real system you’d use a nice looking border – mine is for prototype only.

One issue that remains, though, is what happens if there are no web parts in the web part zone? Well, as it stands you’d have a nice empty box which would shrink to its minimum size, as there are not contents. This isn’t ideal – if it’s empty, we’d rather not see it at all. SharePoint seems to deal with this for square borders using the MSO_Layouts_MakeInvisibleIfEmpty() Javascript function. JavaScript? Pah! Quaint and old school – I used a bit of jQuery:

JQuery

What this code does is get the innermost DIV tag of every bordered area. If that DIV tag doesn’t have any children, we find the first parent DIV tag at the ‘top’ of my set of nested DIVs, and hide it! And that works nicely:

No Leftovers

Next up, I’ll take a look at borders on web parts themselves

Advertisements
Rounded Corners on Web Part Zones

4 thoughts on “Rounded Corners on Web Part Zones

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s