Branding -

Usability and Information Architecture of a Sharepoint Foundation 2010 Site

The following is the steps along the way to brand a Sharepoint Foundation 2010 website

Out of the box SharePoint 2010 will look like this after applying the Azure Theme:

The big new deal in 2010 is Themes. Upon initial read it sounds like themes are the new answer so developers no longer have to dig deep into a bunch of CSS files, graphics and creating a new Master Page. Microsoft has even developed a new tool called Theme Builder that makes developing these custom themes easy. Download Theme Builder at the following location.
Upon further research Theme Builder is still beta and themes created/modified with the tool will crash SharePoint 2010. You may still use the tool but upon completion, load the theme into PowerPoint and save it back out. It will work then. Go figure...
You can start by exporting a theme then starting from there. In most cases find a theme closest to your end result goal and start with that. To save a theme you don't even need SharePoint Designer. At the top level of your site click on the "Site Actions / Site Settings" then you will see the following:
From here decide which theme you want to start with as your base. Then you will want to save it to your computer. To do that you want to check the theme you want then drop down the menu to "Send To / Download a copy":
You can then load the saved file into Theme Builder or PowerPoint and modify the theme. To load the new theme into Sharepoint 2010 you simply go to the same location and at the bottom of the screen you "Add New Item" and load the new theme. To now use the new theme you have to go back to the "Site Actions / Site Settings" then look under the "Look and Feel" section and select "Site Theme". You then select the theme you just modified / created and you can immediately see your changes. The whole process is a bit slow especially having to open in an office app. and saving it again before loading it.
Here is a really good online resources to help with themes:
The SharePoint Coffee House
After a lot of testing and playing with themes, it became apparent that themes alone were not going to solve any branding issues and could not come close to the level of customization that even a basic user would want. Example, the color of the left nav changes with the main navigation etc... They just don't offer enough options and furthermore the themes are poorly documented so it is like a gamble to see which color changes what on the site. The following is what our site looked like with just a new theme applied. Download the Theme

I was able to change the colors to match our brand color hues but beyond that it didn't help much. I wanted a main navigation area with more impact and our primary navigation was so long the search had to be moved. This meant I was back to where we were with MOSS 2007 by having to modify a ton of CSS files, graphics and the master page. I was wrong, it was not near as bad with 2010. In 2010 the CSS has all been consolidated to one file. The graphics were also drastically re-worked to be simple. The new graphics are all greyscale so colors can be applied without having to change the graphics. In my case I left the graphics alone.
With 2010 customizing the Master Page is simple. Simply create 1 CSS file, I called mine Override.css which makes sense as we are overriding the system CSS. Call this new CSS from the Master Page and you are set. Sounds easy but it is a bit of a challenge. Luckily there is a treasure trove of sites already out there where most of the most common CSS attributes people will want to customize are defined. Here are the sites I found useful:
SharePoint 2010 Master Page Cheat Sheet
SharePoint 2010 Base CSS Classes
Cascading Style Sheets Class Usage in SharePoint Foundation
I ended up making a few modifications to the CSS. I put a background image for the main header table. I also customized the Quick Launch (Left Navigation) and the main navigation areas. I thoroughly documented all of my changes to the CSS and have attached it. Download Override.css.
I also had to make modifications to the Master Page. This is a tricky area. Most good developers would copy the original master page so they don't affect the source version. This is good practice. Just like Override.css and the theme, all changes are in the new file and the out of the box files remain intact. This unfortunately does not work with the Master Page. It does work fine for the main site. You simply copy the new Master Page to the Master Pages area and select that Master Page from the "Site Actions / Site Settings" from the Galleries / Master Pages menu. The trouble arises when users create sub-sites. The new sub-sites do not use the new master Page and use the default "v4.master". I could not find a place to define the new master page as "Default" and from my online reading and research determined that the only real solution is to over-write v4.master with your updated version, of course after placing a backup copy in the directory first. This seemed to do the trick. Download v4.master to view the comments I have added. I had to rebuild the header table to 2 TR's to get better control of the placement of the breadcrumb string, logo and search.
Here is what the final site looks like. It came out pretty cool!