Supporters of End User
Web

SharePoint 2007, CSS and you, the Non-Developer – the Intro

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Site Manager/Power User; SharePoint 2010 Branding; MOSS; WSS; 2007; 2010; Branding; CSS for Non-Developers

 

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:

  1. I’m going to work through the master page section by section making changes to the background colors and font weights/colors.
  2. 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.
  3. 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:

  1. 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.
  2. 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.
  3. 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.

Comments

Greg

SharePoint 2007, CSS and you, the Non-Developer – the Intro

That is a very promising series!
Can't wait to read more about it.
Greg

Posted 04-Mar-2010 by Greg
Veronique Palmer

SharePoint 2007, CSS and you, the Non-Developer – the Intro

Please also do the one where you can have the dropdown menu's show 2 levels instead of one. Can't remember where I saw how to do that.

Posted 08-Mar-2010 by Veronique Palmer
Jay

SharePoint 2007, CSS and you, the Non-Developer – the Intro

Veronique, if you check out my blog I've done that using an XML file as the sitemap source. When I get to that point in this series I'll try and get it to work here as well.

Posted 08-Mar-2010 by Jay
Olivier

SharePoint 2007, CSS and you, the Non-Developer – the Intro

Jay.
This will be an awesome help for a lot of people, me being the first of the bunch! Great idea.

Here is a question for your : when changing some CSS and/or theme for my Site Collection, all looked pretty clear and nice, but....
The "system pages", like the "access denied" page, don't inherit my modifications. Could you give some hint on which would be the CSS files to be modified so we can have the "system pages" also look like the rest of the site?

Thanks for sharing this information,
Olivier

Posted 10-Mar-2010 by Olivier
Jay

SharePoint 2007, CSS and you, the Non-Developer – the Intro

Olivier, I think the pages you are refring to all use the application.master as their master page. Unfortunately, as I understand it, Microsoft does not support modification of those files. That being said I have seen some blog posts around that talk about customizing those pages but I would definitely never recommend that someone make a change or customization that puts their environment into an unsupported state.

That being said when we get to the end of the series (and I still don't know how many posts that will be) we'll talk about how to implement the custom css file and what works best. I think (and I have not tested this as yet) that referencing the custom.css file from your default.master would apply the customizations to only those pages deriving from default.master.

If that's the case it would definitely be better than seeing changes applied to this little piece and that little piece of the pages coming from the _layouts directory.

Thanks!

jay

Posted 10-Mar-2010 by Jay
Umar

SharePoint 2007, CSS and you, the Non-Developer – the Intro

I hope process will be the same for other site tempaltes for example publishing site tempalte. If I use core.css of some site built on publishing site tempalte , please advise
thanks

Posted 29-Mar-2010 by Umar

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: