Kyle's SharePoint Karate

People love curves. Rounded edges on buttons, boxes, and tabs are all the rage lately; both web design and interface design have seen an emerging abundance of these subtle little touches that people, more often than not, seem to overlook entirely. While something like a "rounded" button or tab is far from impressive or inspiring, the cumulative effect of subtle UI polish can really add up.

When I started doing UI design in SharePoint, I found it hard to give pages the visual touches that I was accustomed to creating in a less dynamic and scalable environment. It's easy to be picky when you have control over every little detail, every little element that goes into your page. If you don't like something, just change a code snippet and viola! In SharePoint, however, the challenge is dealing with the out-of-the-box limitations and adapting them to match your own needs. One of the challenges that I encountered was creating the rounded edges in the primary navigation used on the SUG. The problem is this: you can change the class of a navigation item, you can edit the style and display of the navigation, but you can't specify "in-between" HTML to insert between each navigation button/item. This makes it somewhat difficult to create round corners within navigation items.

Sure, you can create your own navigation control, but who wants to do that? I want to edit my navigation using CSS. I want my navigation to be scalable and editable using the site settings menu. Fortunately, there is a solution. In true SharePoint style, the navigation elements that come with SharePoint are built using nested tables…within nested tables, within…more nested tables. This sucks for browser performance, but it does give us CSS guys a chance to create rounded edges on the navigation buttons. What exactly can you do? Let's start with this: a goal. The goal is to create a visual navigation that looks something like this:

This might look somewhat familiar… Now that we have our goal, we now have to understand how SharePoint renders navigation controls. Basically, everything in the navigation menu is within a table, or a nested table within a cell. The table hierarchy is set up something like this (depending on how you have your navigation control configured in the master page):

Now bear with me…this is kind of a "navigation in a nutshell" approach to this. There's a lot more going on (like drop-down menus, etc.), but this is basically how it's set up. The point that I'm trying to illustrate is that there's actually four different layers that can be styled within each navigation button. Each button has it's own unique <td>, <table>, <td>, and then a final <a> tag. All four of these tags can be given a specific styling for that particular nav link.

These layers are what make the round corners possible. You can attach a "round" background image to the <table> tag for each button, and then attach another (for a different corner) background image to the <a> tag for that button. Confused? Good, let's delve…

Here's a basic top-level navigation menu snippet out of the master page:

I've basically taken the out-of-the-box global navigation and specified a "StaticMenuItemStyle" and a "StaticSelectedStyle" class. Note that the entire navigation table also has it's own CSS class ("myCustomTopNavTable"). Also note that my "DataSourceID" has been customized, so you may have to rename it to match your own navigation data source. Now that you have some classes that you can style, you'll need to add some CSS. This is what I used:

Basically, I've added a top-left-corner image to the "myCustomNavTab" element, and I've added a top-right-corner image to the <a> tag that resides within the "myCustomNavTab" element. Everything else in this CSS is just colors, padding, and froo-froo UI polish. My only recommendation is that you keep the internal "padding" attribute within the <a> tag, and not within the "myCustomNavTab" element. This ensures that when users move their mouse over a tab (anywhere on the tab, not just over the text), they'll get a pointer cursor, and they will be able to click to navigate to that location. By setting your <a> tag as "display: block;" you can easily add padding, background images, and borders.

Put it all together, and you have what you see at the top of your screen. Rounded edges in your navigation…sweet.