In my last blog entry I gave some tips and tricks to creating a new SharePoint theme for your site. This is an important first step to rebranding your SharePoint site. Since this theme will take care of changing almost all of the font colours and backgrounds in SharePoint, it will save you tons of time trying to find the proper CSS styles to override through the master page. Having said that, the theme will not change everything… You will find that certain things, such as the ribbon, remain virtually untouched, and you may also find that the new theme has made certain things hard to read. This is where you, the web designer extraordinaire, come in.
If you’ve poked around the SharePoint 2010 styles a little bit, you’ll notice that most of the styles are derived from a file called “corev4.css”. Do not modify this file directly! First of all, this file is packed with thousands of lines of CSS rules, so trying to figure out what you’ve changed so far is a logistical nightmare. Second of all, once you add a theme to your site all of the styles in this file get transferred to a “themed” version of the corev4 file which is generated dynamically and is overwritten as soon as the user changes the theme settings again. The best way that I’ve found to override the built-in CSS rules is to do it within your own master page. Chances are, if you’re re-branding your SharePoint site you’re going to be moving things around so you should have your own custom master page to work with. To start overriding CSS styles you simply need to add a style element in the head block of your master page. Whenever you see a rule in the corev4 file that you want to override, simply go back to your master page, copy that same rule, and modify the attributes that you would like to change. If you have your master page as the current site default, then saving your file and refreshing the page in the browser will show you the changes you’ve made.
In order to facilitate the hunt for the right CSS rules to override in your Master Page, one essential tool to have is FireBug. This tool was originally developed as a FireFox plugin, and (among other things) allows you to debug CSS and HTML on the fly, for any site. Not only can you view all of the CSS rules that are applied to a particular page element, but you can also change the CSS rules and see the effects of your changes right away. Since FireFox and Internet Explorer don’t always interpret CSS rules the same way, there is also a “lite” version of FireBug that can be used in virtually any browser. This makes it an invaluable tool to have when you’re re-branding your SharePoint site.
Now that you have created your theme, and setup the master page that you will be adding your CSS to, you are ready to start re-designing your SharePoint site.
Tango Technology Group Blog 
One Comment
Hi Dave,
Thanks for useful information, I have been through same pain changing the core css file. it is night mare if you did somthing wrong and over write orignal. I found it is best way to create a new css file for site collection and use it for your site collection and subsites.