Click here to Skip to main content
11,480,938 members (45,867 online)
Click here to Skip to main content

Apply CSS styles to SharePoint Web parts

, 15 Nov 2012 CPOL 78.9K 4
Rate this:
Please Sign up or sign in to vote.
Apply CSS styles to a web part only using out of the box features of SharePoint 2010.

Introduction 

In SharePoint we are using various types of web parts. List View web part are one of major type which uses to populate data on the web page from a SharePoint list. By default all the web parts of the page use the styles inherits from the site theme. 

Here I explain a simple workout to apply CSS styles to a web part only using out of the box features of SharePoint 2010. 

Background 

There are only 3 steps for you to follow.

  1. Get the ID of web part you wants to apply CSS style
  2. Add Content Editor web part
  3. Apply CSS style as you required 

Using the code

Step 1

  • Go to “view source” of the browser you are using and search for the web parts name. 
  • In my scenario, it’s “Emergency”.

  • Now grab the ID number mentioned there at the end of WebPartTitleWPQ2. “2” is the ID of “Emergency” web part in my web page. 

Step 2

  • Now add a Content Editor Web Part by go to edit mode of the page.
  • Set the Chrome Type as None of the added Content Editor Web Part.

Step 3

  • Go to the edit mode of the Content Editor Web Part and click Edit HTML source 

  • Then add the following CSS style and Save the changes   
<style type="text/css">
    /* === Title bar CSS === */
   
    /* TR - title bar for web part */
   
    #MSOZoneCell_WebPartWPQ2 .ms-WPHeader
    {
        background-color: pink;
    }
   
    /*  H3 - Text in title bar of web part */
    #MSOZoneCell_WebPartWPQ2 .ms-WPTitle A
    {
        font-family: "Cambria";
        color: black;
        font-size: 16pt;
    }
   
    /* TD – Left and right corner cells of title bar */
    #MSOZoneCell_WebPartWPQ2 .ms-wpTdSpace
    {
        background-color: green;
        width: 30px !important;
    }
   
    /* web part check box of right side */
    #MSOZoneCell_WebPartWPQ2 .ms-WPHeaderCbxHidden
    {
        display: none;
    }
   
    /* === Web part background CSS === */
   
    /*  TD - background for all except the title bar of web part */
   
    .s4-wpcell#MSOZoneCell_WebPartWPQ2
    {
        border-bottom: 5px dashed;
        border-left: 5px dashed;
        background-color: lightgreen;
        border-top: 5px dashed;
        border-right: 5px dashed;
    }
   
    /* TD - paging area at the bottom */
    #MSOZoneCell_WebPartWPQ2 .ms-bottompaging TD
    {
        background-color: yellow;
    }
   
    /* hide the gray line above "add new" link */
    #MSOZoneCell_WebPartWPQ2 .ms-partline
    {
        display: none;
    }
   
    /* selected (clicked) web part background */
    .s4-wpActive#MSOZoneCell_WebPartWPQ2
    {
        border-bottom-color: red;
        background-color: fuchsia;
        border-top-color: red;
        border-right-color: red;
        border-left-color: red;
    }
   
    /* === Column headings === */
   
    /* color for sortable column headings */
   
    #MSOZoneCell_WebPartWPQ2 .ms-vh-div A
    {
        color: red !important;
    }
   
    /* color for non-sortable column headings */
    #MSOZoneCell_WebPartWPQ2 .ms-vh-div
    {
        color: red !important;
    }
   
    /* === List text CSS === */
   
    /* item description text */
   
    #MSOZoneCell_WebPartWPQ2 .ms-vb2
    {
        color: red !important;
        font-size: 12pt;
    }
    #MSOZoneCell_WebPartWPQ2 .ms-vb-user A
    {
        color: red !important;
        font-size: 12pt;
    }
    #MSOZoneCell_WebPartWPQ2 .ms-vb-title A
    {
        color: red !important;
        font-size: 12pt;
    }
   
    /*  TR - alternating rows of web part */
    #MSOZoneCell_WebPartWPQ2 .ms-alternating
    {
        background-color: Tan;
    }
</style>

Finally it will looks like this  

Points of Interest

Do the changes as you prefer. This will also useful for site branding and design attractive websites using SharePoint rather than using Themes.

Original blog post which wrote by me can find in my blog from this link.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Eranda Ketawalage
Systems Engineer
Sri Lanka Sri Lanka
No Biography provided
Follow on   Twitter

Comments and Discussions

 
QuestionChanging font in one column Pin
RobHel19-Apr-15 1:07
memberRobHel19-Apr-15 1:07 
QuestionModify Just the Font [modified] Pin
Member 1146472719-Feb-15 7:32
memberMember 1146472719-Feb-15 7:32 
QuestionNeed Help! Pin
Member 98629984-Nov-14 11:25
memberMember 98629984-Nov-14 11:25 
QuestionPreset colors Pin
Member 1022384421-Aug-13 11:39
memberMember 1022384421-Aug-13 11:39 
AnswerRe: Preset colors Pin
Eranda Ketawalage22-Aug-13 0:14
memberEranda Ketawalage22-Aug-13 0:14 
QuestionGreat! Need and idea... Pin
dmark_SC26-Jan-13 6:28
memberdmark_SC26-Jan-13 6:28 
GeneralMissing Images Pin
Tim Corey15-Nov-12 4:07
memberTim Corey15-Nov-12 4:07 
GeneralRe: Missing Images Pin
Eranda Ketawalage15-Nov-12 4:31
memberEranda Ketawalage15-Nov-12 4:31 
GeneralRe: Missing Images Pin
Tim Corey15-Nov-12 4:34
memberTim Corey15-Nov-12 4:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 15 Nov 2012
Article Copyright 2012 by Eranda Ketawalage
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid