How to Use Custom Colors in SP 2010 Using CSS

The new Status bar in SharePoint 2010 is helpful in showing important information to the user in a more prominent way.

By default there are a total of four different status colors showing four different priorities, as shown in figure below.

For most scenarios these colors and priorities will be enough. But there are scenarios where you will be required to change the colors as per business requirements. In this article you learn how to use custom colors to replace the original colors in status bar but we divide this into two parts, in the first part we adopt the approach to change default colors using CSS, and in the second part we see more powerful approach to use any number of colors by using JavaScript. This article covers the CSS approach.

Changing Status Background Color Using CSS

The background colors for the status are coming from four classes residing inside core4.css files. The following figure shows these classes.

If you dig even deeper you will fill find out the that SharePoint uses class scheme like “s4-status-sN” where N is the status number corresponds to “1: Red, 2:Yellow , 3: Green and 4: Blue”. For example SharePoint will use “s4-status-s2” class for displaying status with Yellow background representing important status.

This can easily be pointed out as shown in figure below where IE8 developer tool bar is used to capture this.

Looking at the above scheming of the classes you might think about adding your own classes with incremental value for “N” that is greater than number four. For example “s4-status-s5” to include your custom color, unfortunately this approach will not work. This is mainly because the default JavaScript that changes the status bar color can only use the four default classes. So the quickest way is to change the CSS and update these classes with desired color.

Keep in mind that this approach will work but you still limited to total of four colors of status. But this is mainly a no code approach so may work faster and in most cases fulfill the need.

Following is the complete walk through of how to change the status colors using custom CSS, the Visual Studio 2010 project is created to demonstrate end to end scenario and test your work. But this is by no means a requirement; you can skip this and just use the CSS shown in step 9 and it should work. For those of you who want to try, follow the steps below.

1.       Open a Visual Studio 2010 and create a new SharePoint 2010 Project, select “Empty SharePoint Project” as project type and give it a name “MyCustomStatusColors”. Click “OK” to create the project. See the figure below.

2.       On the “SharePoint Customization Wizard” type the URL of the SharePoint site which you want to use for deployment & debugging. Select “Deploy as farm solution”, see the figure below. Finally, click Finish.

3.       Right Click the project and select “Addà SharePoint “Layouts” Mapped Folder” this will create a new mapped folder named “MyCustomStatusColor” as shown below.

4.       Right Click “MyCustomStatusColor” folder and select “AddàNew Item”.

5.       On the “Add New Item” dialog box select “Web” the installed template and then select “Style Sheet”. Name it “CustomStatusColors.css”, and click “Add”. This is shown in figure below.

6.       Open the “core4.css” file located inside “<Drive-Letter>:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1033STYLES”. Where “<Drive-Letter>” is the drive where SharePoint is installed (for example “C”).

7.       Locate and copy the following classes from “core4.css” file.