- Business logic
- application development
- Visual C#
- Visual Studio
- Microsoft Office
- Exchange server
- SharePoint 2010
- document management
- Web development
- Web sites
- Web Parts
- SharePoint Service Account
- SharePoint administration
How to Use Custom Colors in SP 2010 Using CSSThe 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.
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.
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.
A Developer.com eBook
Discover how to start developing for the Android platform with this extensive guide, which provides a reference to the Android platform as well as a look at developing your first Android application. You'll explore the top 10 features for developers as well as learn design and development tips that go beyond the phone and target tablet development as well.