Geeks With Blogs
Michael Van Cleave Traveling the technical world, learning the language

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:

  1. Heather Solomon is a golden goddess!
  2. All CSS files inherit from the Core.css
  3. 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

Posted on Tuesday, February 6, 2007 9:15 AM | Back to top


Comments on this post: Sharepoint 2007 and CSS Modifications

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Just to let you know that MS has released some time ago a developer toolbar (Internet Explorer Developer Toolbar Beta 3) that lets you do the same things as the firefox addon.
Left by jerome on Feb 09, 2007 4:46 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Hey thanks Michael, golden goddess I am not, but I appreciate the compliment!
Left by Heather Solomon on Jun 19, 2007 6:11 PM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) is a much better Firefox add-on than the Web Developer toolbar. It does CSS, DOM, Javascript, debugging, and also shows CSS style cascading hierarchy for the page, as well as any overrides. Its most valuable feature, however, is allowing on-the-fly dynamic changes to the HTML and CSS code, saving developers the hassle of the old "type-save-refresh" routine when tweaking their code.
Left by Simon on Sep 21, 2007 3:46 PM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Nice post - helped a lot.
Left by Jonathan on Mar 11, 2008 9:49 PM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
CSS "Cascading Style Sheets" LessoNs - WeB DesigN LessoN - - Web site : http://WWW.css-lessons.ucoz.com/index.html
Left by sezer on May 02, 2008 11:19 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Perfect !
Left by Ayman El-Hattab on Aug 29, 2008 6:47 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Is MS Expression compatible with MOSS?

We have licensing for Expression and sadly not monetarily able to grab licensing for Sharepoint Designer...
Left by Austin on Dec 05, 2008 10:18 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Great blog
Left by hari on May 15, 2009 10:56 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Thanks.

Hopefully it was helpful.

Michael
Left by Michael on May 15, 2009 11:10 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
i'm lost :( .
i can't follow your instruction, because there are no such menu as you mentions (after site settings)
Left by snydez on Jun 02, 2009 12:08 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...

What version of SharePoint are you using? Is it WSS or MOSS?

Michael
Left by Michael on Jun 02, 2009 9:42 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Great blog,

This works great for my site however I have an issue. I want to take all the changes that I made and apply them to another SharePoint site on a different box in the server farm.

Do you know the quickest and easiest way to do this by any chance?
Left by Gavin on Aug 03, 2009 3:26 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Sure, package your css and other collateral in to a SharePoint Package then push that to the other server.

Michael
Left by Michael on Aug 03, 2009 10:10 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
very cool+++ , appreciate sharing this time saver+++
Left by jay on Dec 05, 2010 2:34 PM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Great Post,

Really it helped me.
Left by Sekhar on Dec 09, 2010 3:25 AM

# re: Sharepoint 2007 and CSS Modifications
Requesting Gravatar...
Hi in my portal i am unable to locate -->Manage Content and Structure-->Style Library under "Site Actions"

Also i am not finding link for "Modify All Site Settings" under -->Site Actions-->Site Settings.
Can you help me out why this is so.
Left by Naveen on Feb 01, 2011 1:49 AM

Your comment:
 (will show your gravatar)


Copyright © Michael Van Cleave | Powered by: GeeksWithBlogs.net