The Quick & Skinny on MOSS Skinning

A few weeks ago I was given a task to skin SharePoint 2007 to look similar to the current design a client already had. It was good that the design part was done so I didnt have to worry with that. So.. on to Sharepoint.

I had started playing around with master pages by taking an existing one and moving elements around in it and changing out images. That was a going starting point but for this project, I decided to start with a clean slate. I started with the minimal master page and built it up from there. It was much more fun to do it this way and I learned a lot! So, what did I learn? Well, here's what I learned and what worked for me.
1. Start with a minimal base master page.

2. Create a custom .css file so you can override the core.css styles. SP will look at your custom .css before the core.css. I opened the core.css and found the element, then copied and pasted it into my custom .css file. I had to make sure my master page referenced it so I added this line to the header code:
" runat="server"/> NOTE: You can also add a style section in the header of your master page and pull any modified core.css styles in there. That way they will override the core.css defaults.

3. Build out a table and move the elements from the base master page to their appropriate locations. Note, there is a bottom section that is not visible. You should be pulling these elements from there. Do not delete any of them because SP needs all of them. Just pull up these "place holders" and put them in the right spot. (High maintenance I know! haha)

4. Add in your images.

5. Apply styles to the elements.

6. As you build the page, be sure to check it in the browser often! I created a test site on our demo internet site so I could leave the test master page on it. Then when I made changes to the CSS or the Master Page, I could easily flip (ALT+Tab) over to the browser and refresh (F5) to see that my page could still be rendered. That way I would know immediately if something broke it.

7. Use elements from existing Master pages and copy them over to your new Master page. This was a big time saver. The mockup I was trying to replicate had a nav bar similar to the BlueGlassBand master. I copied that component and styles over to the new Master and changed out my graphics. Viola!
See the BlueGlassBand example: