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.
- Get the ID of web part you wants to apply CSS style
- Add Content Editor web part
- 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">
#MSOZoneCell_WebPartWPQ2 .ms-WPHeader
{
background-color: pink;
}
#MSOZoneCell_WebPartWPQ2 .ms-WPTitle A
{
font-family: "Cambria";
color: black;
font-size: 16pt;
}
#MSOZoneCell_WebPartWPQ2 .ms-wpTdSpace
{
background-color: green;
width: 30px !important;
}
#MSOZoneCell_WebPartWPQ2 .ms-WPHeaderCbxHidden
{
display: none;
}
.s4-wpcell#MSOZoneCell_WebPartWPQ2
{
border-bottom: 5px dashed;
border-left: 5px dashed;
background-color: lightgreen;
border-top: 5px dashed;
border-right: 5px dashed;
}
#MSOZoneCell_WebPartWPQ2 .ms-bottompaging TD
{
background-color: yellow;
}
#MSOZoneCell_WebPartWPQ2 .ms-partline
{
display: none;
}
.s4-wpActive#MSOZoneCell_WebPartWPQ2
{
border-bottom-color: red;
background-color: fuchsia;
border-top-color: red;
border-right-color: red;
border-left-color: red;
}
#MSOZoneCell_WebPartWPQ2 .ms-vh-div A
{
color: red !important;
}
#MSOZoneCell_WebPartWPQ2 .ms-vh-div
{
color: red !important;
}
#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;
}
#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.