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, Guinness 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 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 see 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 what was changed and where by adding comments similar to the following;
/* 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 screenshots of the section and the code block from the .CSS file so you can see the changes as they are made.
- 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.
- Do yourself a favor and go to Todd Bleekers 12 Hive blog at Mindsharpblogs and get his “Style Under Cursor CEWP” script. It’ll make your life much easier as you work through this. Link follows: Todd’s Style Under Cursor CEWP script
- 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.