SharePoint 2010 Chrome Type CSS Classes

For content authors the ability to stylize web parts with just a few simple clicks is a big win. In some cases you might want to emphasize a web part on the page and make it stand out. There are basically 4 main web part styles/chrome that you can apply to any webpart.

You will notice below that the chrome type “None” and “Title Only” do not have a unique class name so they will share the same style. The “None” style simply does not show the web part title.

Chrome (None):
.ms-WPBody{
font-size:8pt;
font-family:verdana,arial,helvetica,sans-serif;
}

Chrome (Title Only):
.ms-WPBody{
font-size:8pt;
font-family:verdana,arial,helvetica,sans-serif;
}

Chrome (Title and Border):
.ms-WPBorder, .ms-WPBorderBorderOnly{
border-color:#9ac6ff;
border-width:1px;
border-style:solid;
}

Chrome (Border Only):
.ms-WPBorder, .ms-WPBorderBorderOnly{
border-color:#9ac6ff;
border-width:1px;
border-style:solid;
}

Since Title and Border and Border Only have their own unique classes you can apply custom styles properties and make them unique.

The next step is to learn how to apply these types of chrome types. First simply edit the page, click on the web part title arrow, and choose “Edit Web Part”.

Second, a panel will appear on the right side, click on the plus icon next to “Appearance”. From here you will be able to change the web part title and the chrome type.

Once you have chosen the Chrome Type simply click on the “OK” button and then save'/publish the page.

This is where the real fun begins. Now that you know how to apply the Chrome Type and you also have the class name for each one, you can easily create some really interesting styles for you web parts.

Example 1: (Title only/None with changes to the font)
.ms-WPBody{
font-size:14px;
font-family: Arial, sans-serif;
line-height: 20px;
letter-spacing: -.2px;
}

---

Example 2: (Title and Border with additional padding for text also includes custom border style and update web part title) 
.ms-WPTitle{
font-weight:bold;
font-family: Arial, sans-serif;
font-size:16px;
color: #C00;
}
.ms-WPBorder{
border: 3px #C00 dashed;
background-color: #EEE;
}
.ms-WPBorder .ms-WPBody{
padding: 10px;
font-size:12px;
color: #000;
line-height: normal;
letter-spacing: 0px;
}

---

Example 3: (Border only with custom border color and background image)
.ms-WPBorderBorderOnly{
border: 2px #7ea0dd solid;
background-image:url("/_layouts/images/MYSITEBG.GIF");
background-position:top left;
background-repeat:repeat-x;
}
.ms-WPBorderBorderOnly .ms-WPBody{
padding: 10px;
font-size:14px;
font-weight:bold;
color: #000;
line-height: normal;
letter-spacing: 0px;
}