Making SharePoint not look like SharePoint: An Odyssey - Part 1

Like I posted earlier, I have been working with a SharePoint design/branding project. I have to say that the available documentation for this is pretty vague. There is a lot of “you could do A, or B, or C” high level talk but very little details of the technical implementation of each option. Maybe it is because there are too many variable to write a comprehensive book.

Regardless, I am going to walk you through the way I did it. I doubt this is the best for everyone but this is low-code/minimum complexity way to create custom master page. In this project, I attempted to mimic an existing, public facing website for an internal portal. I did this by adding one customized master page, one CSS file, and a handful of graphics. I made no custom JavaScript and never fired up Visual Studio – this was done entirely from SharePoint Designer 2007.

After reading a lot of books and how to articles, I decided on some general rules for anyone tackling this for the first time:

Do not modify the basic SharePoint objects. Open and save as but do not just directly edit the default CSS styles, master pages, or graphics. It is highly likely that service packs or other upgrades will overwrite your changes. Also, it is sometimes hard to go back.

Double check your backups before you start. You have a pretty good chance to really screw things up so make sure you are backed up and run a test restore before you get started.

Never delete a tag from the master page. The master page forms the ultra-flexible “skin” for the website and these place holder objects tell other pages where you want things parked. If you are missing a placeholder, you get error messages. You can move place holders around and apply formatting but you have to publish with all of them. I create a panel at the bottom of my web pages that is hidden and park all of the placeholders I do not want to have displayed down there.

Don’t start from scratch. There is Microsoft TechNet article that tells you how to create an empty master page and you can design to your heart’s content. If you are new to this, like I was, “green field” development is tempting but just say NO. Open an existing master page and save as. You get some junk you don’t want but you will start with something that works.

SharePoint likes nested tables - live with it. I know that current web design treats nested tables as the dark spawn of Satan that leads to ultimate damnation but, unfortunately, SharePoint behaves better with nested tables. I am not sure why that is the case, but much of the pre-installed web components appear to assume that you are in nested tables where their CSS formatting is going to be isolated from the rest of the page. When the different styles become intermixed, you get some very entertaining results.

Test the Edit Page functions often. When trying to get the branding to look right, create the look, tweak the CSS, adjust the graphics, and take a look at the final page. Do yourself a big, big favor and select “Modify Web Part”, “Edit Page”, or any other site administrator function on the page. You may have accidentally shrunk, hidden, or mangled the toolbars that people need to actually get work done.