Style SharePoint 2010 Web Parts

How to Style the Header of the Standard SharePoint Web Parts

The Web Parts in SharePoint render in tables, and each header row contains five cells. You can use the ms.WPHeader class for the table header row, and you can modify all the cells in that row.
Example 1 shows how to apply a gray background color for the Web Part table header row and its cells.



Figure 2. Gray background color for Web Part table header


Add the following CSS to your custom CSS file.

Copy

/* All cells (TDs) in the table row (TR) */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px transparent!important;
padding:3px;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

If you want a border around the header, you can set top and bottom borders for all cells in the row, but because the first and the last cells use the same class name, you can use first:child to separate the start and the ending cell.



Figure 3. Border applied to header


To apply a border around the header of all Web Parts on the SharePoint page, add the following CSS to your custom CSS file.

Copy

/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-top:1px #ccc solid!important;
border-bottom:1px #ccc solid!important;
padding:3px;
}
/* Border to the sides */
.ms-WPHeader td:first-child {
border-left:1px #ccc solid;
border-right:0px!important;
}
.ms-wpTdSpace {
border-right:1px #ccc solid!important;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

Figure 4. Border applied to header and body of Web Parts


To apply a border around the header and to the body of all Web Parts on the SharePoint page, insert the following CSS in your custom CSS file.

Copy

/* Webpart table */
.s4-wpTopTable{
padding:0px!important;
margin:0px!important;
border:1px #dbddde solid!important;
}
/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-bottom:1px #ccc solid!important;
padding:2px;
}
/* Web Part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* Hover */
.ms-WPTitle a:hover {
color:red!important;
}

The next example shows how to adjust other elements that have been affected by setting a border to the body of the Web Parts. The s4-TopTable general class is used by several other elements in SharePoint. For example, the Search box uses this class, and if you don’t want a border around this element, you can use the following code to specifically set the Search box not to use a border.

Copy

.s4-search Table, .s4-wpcell-plain {
 border:0px!important;
}

How to Use Rounded Corners for the Web Part Title

Rounded corners are often used to give a user interface a more modern appearance. There are several ways to create rounded corners. This example applies background images for the corners and for the middle section. The left and right corners have dimensions of 7 x 33 pixels, and the middle image has dimensions of 14 x 33 pixels.



Figure 5. Web Part headers with rounded corners


To create rounded corners for all Web Part headers in the SharePoint page, insert the following CSS in your custom CSS file.

Copy

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:33px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
border:0px!important;
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}

Figure 6. Web Part headers with rounded corners and borders applied


To create rounded corners for the Web Part headers and to set borders for all Web Parts in the SharePoint page, insert the following CSS in your custom CSS file.

Copy

/* All TDs in the table row */
.ms-WPHeader TD{
background-image: url('/Style Library/MSDN/Images/WP-mid.jpg');background-repeat:repeat-x;
border:0px!important;
border-top:1px #fff solid!important;
padding-left:1px; padding-right:1px;
height:30px
}
/* Left cell */
.ms-WPHeader td:first-child {
width:5px;
background-image:url('/Style Library/MSDN/Images/WP-left.jpg')!important;background-repeat:no-repeat;
}
/* Right cell */
.ms-wpTdSpace {
width:7px;
background-image:url('/Style Library/MSDN/Images/WP-right.jpg')!important;background-repeat:no-repeat;
background-color:transparent!important;
}
/* Arrow */
.ms-WPHeaderTdMenu{
background-color:transparent!important;
border:0px!important;
}
/* Content in the Web Part */
.ms-wpContentDivSpace {
padding:10px!important;
margin:0px!important;
margin-top:0px!important;
border:0px!important;
border:1px #dbddde solid!important;overflow:hidden
}
/* Web Part title */
.ms-WPTitle {
padding-left:10px;
font-family:Arial, Helvetica, sans-serif!important;
color: #fff;
font-weight:bold;
}
/* Linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #fff;
text-decoration:none!important;
}
/* Hover title */
.ms-WPTitle a:hover {
color:#333!important;
text-decoration:none!important;
}