Andy Burns’ SharePoint Blog

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? Read more »

Tags: jQuery, Rounded Corners, Web Parts

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… Read more »

Tags: jQuery, Rounded Corners, Web Part Zones

I was looking through the code of SharePoint’s Blank Web Part page layout, and I kept finding elements called _invisibleIfEmpty. Now, I’d noticed that some page layouts, such as the Splash page layout had borders on their web part zones which were only shown if the zone contained a web part. I was interested in how this might work. People keep asking for web parts with borders, preferrably ones with rounded corners. Read more »

Tags: JavaScript, Page Layouts, Rounded Corners, Web Part Zones

So I’ve been working on branding meeting workspaces and looking at some of the issues within them. I took a look at the branding I’d been building on a meeting workspace:

Yup, lots of nice rounded corners, but you can see that the meeting workspace tabs are currently unstyled. I decided I’d try to make them look just like the ones at the top, and replace that pale blue bar with the green one, like the one at the top. Read more »

Tags: Meeting Workspaces, Rounded Corners

I’m not a designer; I neither wear cool enough glasses, a turtleneck, nor sport an iPhone. But I do have to build other peoples designs, and I’ve noticed something – every design I get handed has rounded corners all over it.

I do see their point – SharePoint is a bit, well, ‘Square’. “Boxy but good”.

So instead we have designs with corners, well, all over them. Here’s the one I’ve been working on:

Things to note there – Rounded corners on the tabs in the top nav, and a rounded corner (only one) on the web part title. How did I do this? Read more »

Tags: Branding, Corners, CSS, Rounded Corners

Here’s an interesting attribute in CSS I didn’t know about
-moz-border-radius
The style below is :
font-size: 12px; background-color: #ffffff; -moz-border-radius: 8px;
border: 2px solid #3366cc; padding: 7px;

A box with a border! Of course, this only works in Mozilla

Another box with a border!

Tags: CSS, Rounded Corners