Tuesday, February 06, 2007 9:15 AM
Recently one of the team members on our Sharepoint implemention what running in to issues trying to get MOSS 2007 area to change to the brand colors for the company.
She asked for my assistance because she was in the process of moving to another state and would be out of touch for a week during the transition and the brand colors needed to be done so that she wouldn't have to worry about it when she was done with the move.
Anyhow, I am not much of a Style Sheet guy. I never have been, but I didn't think that I could do any more harm and I figured it would be a good learning experience.
Things that I figured out:
- Heather Solomon is a golden goddess!
- All CSS files inherit from the Core.css
- FireFox Web Developer Add-On ROCKS!
To the first point, if you haven't been to Heather's Blog you really need to make the trip. She had a huge amount of good information about Sharepoint 2003/2007 including this Style Sheet Reference that was tremendously helpful during this process.
Second, since I do very little with css I didn't have much information as to what changes to make and also I didn't realize that everything inherits from the Core.css.
Now granted there are a couple of different ways you can change the style on the MOSS 2007 pages. One way is to go in to the Sharpoint Designer and change the elements that you want to change to customized CSS classes in your own stylesheet. That works just fine, but man that is a lot of work for a simple color change.
The other way to go about it is to find Core.css (it should reside in your 12 directory under 12/template/layouts/1033/styles) find the class that is being used for the portion of the webpage you are looking to change and COPY it. That is right, copy it don't change it here.
Now that we have the class that we need to change, create a text file on your local hard drive, add the class to it and name it what ever you want with the extension .css. Make the change that you need and save it. Don't change the name of the style class, just the properties inside of the class.
Okay, so we have made the change but to a new file, how do we get the portal to recognize it? Well, this the part that I didn't understand until I went through it. You go to the styles directory in the portal and add your new custom style sheet to it, the reference it from your site master configuration.
Whooaaa. What? Okay so that is a lot to digest. Kind of like Takeru Kobayashi trying to eat that last hotdog.
So, here is what you do. Go to the top site, go to Site Actions, Manage Content and Structure, Style Library, en-US (or other culture designation), Core Styles and upload your new file. Drop down your context menu on the new file and publish it (VERY IMPORTANT, IT HAS TO BE PUBLISHED for everyone to see it, otherwise you only certain people will see the change but not everyone).
Okay, now we have added the file we need to reference it from out master page. To do this we need to go to Site Actions/Site Settings/Modify All Site Settings. Under the Look and Feel header click the Master Page link. At the bottom of the page is a selection to choose the stylesheet to apply to the site. Click it and browse to the new style sheet you just added. Save and you should start to see the results of you labors.
Now, as you need you can add modified style classes to this file instead of trying to make changes to the Core.css file or trying to update every page with new style classes.
WAIT JUST A MINUTE! Your telling me that you are not sure what style classes you need to change on the web page because: one there are a lot of them, and two just viewing the source of the page is not very helpful. Well this was the last very cool thing that I ran across. FireFox has an add on for web developers. Yep, this add on will allow you to roll over the page finding the different sections of the webpage and when you click on a certain area it will give you the style sheet information that it is using. How Cool Is That?
You can find the add-on here. I tell you, this made my life much easier when I started using it.
Hopefully you will find this helpful in your need to update the colors of MOSS 2007 and make your life a tad bit easier. I will be the first one to tell you that I am not the most in depth in regards to MOSS or Re-Branding of Sharepoint, but this was the easiest process I was able to figure out in a short amount of time.
Have fun, and if you know any easier way please pass it on. I would enjoy looking at it.
Michael