Apply CSS styles to SharePoint Web parts

By Eranda -

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 a CSS style to a web part only using out of the box features of SharePoint 2010.

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


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>


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



Finally it will show like this





CodeProject

CodeProject
Location: D. R. Wijewardena Mawatha, Colombo, Sri Lanka

Comments

  1. Phil RoblesOctober 27, 2014 at 8:47 AM

    Hello, will this work with Office 365 SharePoint 2013? I believe some of the coding will need to be modified? Thank you!

    ReplyDelete

Post a Comment

Popular posts from this blog

SharePoint Number Column Without Commas

By -
Image
Avoiding thousand separator(Comma) in SharePoint Number field SharePoint number fields having thousand separators(Comma) which may not want us to need every time. But there are no possibility to avoid the thousand separator(Comma) in the number fields.  To avoid this comma we can do a small workout as following.. Suppose our Number field named as "Student No." Create another Calculated column and name it as "Student Number" Then you have to type the formula according to the following format     = TEXT( Number_Column_Name, "0") And click Save In our scenario it will show as =TEXT([Student No],"0") Note : If the Student No field will empty, the value will be shown as "0".... Or if you want to keep it blank you have to adjust the formula as   =IF( [Student No] <>"",TEXT( [Student No] ,"0"),"") 
Read more

Create SharePoint New Site in FOUR steps

By Eranda -
Image
Step One :  Go to the SharePoint site collection you want to create the new site. And click Site Action button to drop down the Site Action menu. The select New Site in Site Action menu Step Two : Select the type of the site template you want to create. Team Site template is the most popular template among those Step Three :  Enter the Title of the site you are going to create and the URL of it        (If you are planning to manage the permission uniquely, click More Option rather than Create ) Step Four : Enter the Site Title and the URL you are going to create. Then select Use unique permission to introduce a different permission structure which not use in the parent site of this newly creating site Click Create button to create the new site.   That's ALL......!
Read more