Microsoft Server Faimly & More ....., SharePoint 2010 Products & Technologies

How to Use Custom Colors in SharePoint 2010 Status Bar using CSS

The new Status bar in SharePoint 2010 is helpful in putting important information to the user in a more prominent way. By default there are 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 post you learn how to use custom colors to replace the original colors in status bar using CSS classes.–

Changing Status Background Color using CSS

The background colors for the status are coming from four classes residing inside core4.css files. 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-s5to 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 complete example following are the steps.

  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.

 

 

 

 

  1. 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”).

     

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

     

     

  3. Paste these classes into CSS file “MyCustomStatusColors.css” that you created in Step 5.

     

  4. Change the background, border-color, and color attributes for all the classes as shown in figure below. You can always choose colors of your choice.

     

     

  5. Your work related to CSS customization is done, next you build a very simple SharePoint Application Page with a single HTML button and a drop down which corresponds to status number. On clicking the button a new status message will be added to status bar using SharePoint ECMAScript. It’s a simple way to see the changes in action. We will later use this page in second part for some more advance JavaScript based customizations.

     

  6. Click on “MyCustomStatusColors” folder and select “Add New Item”. On the “Add New Item” dialog select “Application Page”. Name it “CustomStatusColors.aspx”, and click “Add”. This is shown in figure below.

 

 

 

  1. First add a link to the custom “CustomStatusColors.css”, this way classes inside it will override the “core4.css” classes. This is shown in figure below. Make sure you add it under content area with ID “PageHead”

     

     

  2. Before we add the SharePoint ECMA Script code to add new status with desired color note that as we only changed colors through CSS the ECMA Script function does not have knowledge of these custom colors, so in standard SharePoint ECMAScript methods you still need to pass original color names namely “red,yellow,blue,green”, this is just a way it behaves. However as we have changed the colors inside CSS classes these custom colors will correctly appear for the status messages instead of the original colors. For your convenience following table shows this mapping including original color and new colors.

     

Class

Original Color

New Color

s4-status-s1

Red

Lime

s4-status-s2

Yellow

Olive

s4-status-s3

Green

Aqua

s4-status-s4

Blue

Teal

 

  1. Add following script into the “PageHead” content area as shown in figure below.

 

  1. Finally add the following markup into the “Main” content.

     

     

  2. That’s it, press F5 from the Visual Studio to build and deploy the project, this will also open the site in a new browser window so you can test your work.

     

    Note: You must build the project targeting x64 platform. This is the requirement for all SharePoint 2010 projects.

     

  3. On the SharePoint site, type the following URL, replace “SiteURL” with the actual URL of your SharePoint site. This is the site URL that you have used while creating the SharePoint project in Step 2.

     

    http://SiteURL/_layouts/MyCustomStatusColors/CustomStatusColor.aspx

     

  4. On the “CustomStatusColor” page use the drop down to select any status and then click “change status color” button. You will notice a new status message is added each time you click the button and color of the status message is coming from custom CSS. You may want to contrast these colors with the table shown in step 13. Following is the screen shot of all the four status messages with custom color.

 

Lime

Olive

Aqua

 

 

 

Teal

 

 

Although you have applied color of your choice you are still limited to total of four colors at a time, this can be overcome by using java script. Perhaps I will do a write up on that too in a later post.