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? Well, unfortunately, it’s the old hack - having one very wide image to do the left corner and background, and a second overlaying it to do the right hand side:
This does result in a slight issue though - for some bizarre reason, the asp:menu control creates tabs with a drop down as two table cells - one for the tab’s text, and the other for the ‘drop down’, and this screws up the styling:
Why this couldn’t all be one table cell (or even better, not a table cell) mystifies me. To get around this, I turned off the dynamic levels on the top navigation (by editting the asp:menu control on the master page)
Oh, and to get different tab heights? Well, they’re all the same height, just some contain more of the background:
As you can see, this will appear ‘taller’ than the inactive tabs.
For the record, I modified the .ms-topnav, .ms-topnav a, .ms-topnavselected and .ms-topnavselected a styles to do this. Here’s a screenshot of my code:
As for the rounded corners on Web Part Titles - similar thing, but a bit different. Here, I’ve just used a background image of the corner, and top-left aligned it:
There’s a good post about this from Madalina - I particularly like that she’s told you what CSS classes she’s used - and you can see that she’s used the same hack to get two corners and a horizontal gradient on the background. I didn’t need the second corner, or the gradient, so I stuck with a really small image. Essentially, the whol of my web part title is dark blue, but the background image has a white corner to it. This matches the background colour of the page, so it looks like the corner is actually transparent - and that the web part has a dark corner…
Like Madalina, though, I’ve not yet figured out how to do corners around the bottom of a web part. If anyone has any ideas, let me know!
[...] of the brand is that the tabs have rounded corners, and these don’t work very well with the dynamic drop down menus. You can turn this off in [...]
[...] lots of nice rounded corners, but you can see that the meeting workspace tabs are currently unstyled. I decided I’d try to [...]