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? Continue reading “Rounded Corners on 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… Continue reading “Rounded Corners on 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. Continue reading “What is MSOLayouts_MakeInvisibleIfEmpty()”
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. Continue reading “What's up with the awful code in Meeting Workspaces?”
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? Continue reading “Rounded Corners are cool in SharePoint, apparently”
Here’s an interesting attribute in CSS I didn’t know about
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!