Requirements, we love, and need, to have them but what happens when one of your first requirements is “make it look sexy”? In all honesty I don’t think I’ve worked with any client that was happy with the SharePoint look out of the box, generally that means a “make it look not like SharePoint” mandate if not immediately then sooner rather than later. Now that’s all well and good if you’re a developer or you have some experience working with web pages. But what if you don’t?
Welcome to my world. When I was working with SPS2003 I ran into that and ended up hand editing I don’t know how many .aspx pages and struggling through making changes via the .css files. When that requirement came around again recently I figured no big deal, I can do this. It won’t be Hed Kandi, Guiness or Hawaiian Air but I can at least add a banner, change some colors etc… Turned out it wasn’t as easy as I wanted it to be.
I’ll start by listing a couple of resources you should be familiar with. If you aren’t check them out, it’ll make your life much easier as you work through this.
Heather Solomon - CSS Reference Chart for MOSS 2007 and WSS v3.0
Heather Solomon - Branding SharePoint Part I – make sure you read the section in Part 2 of the series regarding CSS. Part 3 gives an excellent overview on using CSS to make changes to web parts.
Paul Culmsee - SharePoint Branding - How CSS works with Master Pages - Part 1 – A 7 part series on branding SharePoint and how CSS works with SharePoint master pages. If you’re serious about doing this then Pauls article is a must read.
Now you’re probably asking yourself “what’s the point of a post pointing us at stuff posted by someone else”? That’s a good question and that is not the intent of what I am going to do here in the next 3 or 4 articles.
I used Heathers CSS reference and found it extremely helpful. However, I’m not a developer and a lot of what I have been trying to do just I just can’t easily figure out. I mean I can look at her chart and see that changes to the class .ms-globalbreadcrumb are supposed to be reflected in the global link bar container. But I want to how changing a specific property affects the container. What does it look like before and what does it look like after.
Also, and this is a big one for me, there are inevitably places on the master page that I have one hell of a time figuring out what class I need to make changes to in order to change that font color, or background color. That’s what I am going to show you here.
When I finish this series of posts I will include a fully marked up copy of my renamed CORE.CSS file that tells you /* changing the color in this line will change the color of the fonts in the quick launch headers */
So here’s the plan:
- I’m going to work through the master page section by section making changes to the background colors and font weights/colors.
- As I work through each section I will post before and after screenshots of the section as I change it as well as the code blocks of the css file.
- When we get to the end I’ll post the before and after of the main SharePoint page I have customized so you can see the difference.
A couple of notes:
- If you choose to follow the instructions here please make sure that you are either working in a test, development or virtual environment. Even though it’s “just” css you can still jack things up pretty seriously.
- Please follow best practices when making changes to your css files. DO NOT EDIT THE CORE.CSS FILE DIRECTLY. Make a copy of it and edit the copy.
- I am going to be working with a MOSS 2007 Enterprise Team Site with the Publishing features turned on.
We’ll start by working with the Quick Launch in my next post.