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!
Andy Burns' Blog 
[…] 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 […]
You mention:
“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)”
I don’t see this control and I don’t know what to add/subtract?
Create a site with a top navigation containing a drop down list. Then use something to view the table with – the IE Developers Toolbar is idea. As you dig through the page, you’ll see that the navigation text and the ‘drop arrow’ are in two different table cells.
.ms-topnav tr td img{
visibility:hidden;
width:0px;
}
This will fix the problem with dynamic level menu. You can still use it but you don’t see those added table cells, works fine in ie7.
Ooo, that’s a good idea. I must give that a go. Thanks! 🙂
Piotr, that’s a much nicer solution that works nicely. Thanks for sharing.
Some interesting insights to the rounded corner Andy, very interesting post.
You can also display the down arrow in a bit of white space on the right side of the tab. For this to work you need to get to the table cell that contains the down arrow image.
This should be the second TD in the row. Then set the background image of that table cell to a transparent image (in my case a 1×1 pixel gif):
.ms-topnav tr td:first-child + td
{
background: url(‘/_LAYOUTS/images/akzo/bg_downarrow_transp.gif’) repeat transparent;
}
What you can also do is move the down arrow into the actual tab where you’d like it to be, by changing the image’s position, something like:
.ms-topnav tr td img{
position:relative;
left:-15px;
}
Unfortunately that still leaves you with some white space next to the tab; probably because that TD still reserves the space needed for the image. Haven’t been able to solve that yet – any suggestions are very welcome.
Thanks a lot for the post. I am trying to do a top navigation menu with the arounded corner button and our post helps me a lot. but one problem is that, my users want the color of the backgroup to an image, not a unique color. In this case, as the fond color of corner image is in a unique color, it’s diffrents from the reste of the font color.
Do you have any suggestion about this problem? thanks
Hi Andy,
Would like to know is there any possibility to apply rounded corner topnav into sharepoint 2010? Do you have any sample to share with us?
Thanks.
Sorry, it’s not something I’ve looked at – though post a link here if you find something about it.