Styling List View Web Parts – SharePoint 2010

The SharePoint 2010 list view web part can be styled just like anything else, there are just a few key tags you need to hit. I’ve taken the classes and ids you’ll need to hit and gathered them together and added comments to save you the hassle of navigating through SharePoint 2010’s CSS structure.

To get started, first create an additional Style Sheet and link it on the master page you are using on your SharePoint Site. Make sure you put the link to your new style sheet at the bottom of the head tag.

After that, just copy and paste the CSS below into the style sheet that is linked to your custom master page and style away.

.ms-listviewtable {

/* All Cells */
.ms-listviewtable td {

/* Header Row Formatting */
.ms-listviewtable th {

/* All Links */
.ms-vh div, .ms-vh2 div a {

/* Heading Links */
.ms-listviewtable thead tr th div a:hover {

/* Heading Hover Styles */ > th:hover .s4-ctx-show, .s4-ctx-show:hover, .s4-ctx-show {


/* Header Containers */ >, > {

vertical-align: middle;
border-left: none !important;

/* Created By Heading Style */
.ms-vh a, .ms-vh a:visited, .ms-vh2 a {

/* SP List View Drop Down Arrow Style */
.ms-listviewtable th:hover {

/* Image List Header Styles */
.ms-vh .ms-menuimagecell, .ms-vh2 .ms-menuimagecell, .ms-vh-icon .ms-menuimagecell {

/* Cell Styles */
.ms-listviewtable .ms-vb2, .ms-summarystandardbody .ms-vb2, tbody tr, > tbody > tr > td {

/* Row Hover Style */ > td, tbody tr:hover,
.ms-listviewtable tbody tr:hover, .ms-listviewtable tbody tr:hover,
.ms-listviewtable tbody tr:hover {

/* Selected Row Style */
tr.s4-itm-selected td, tr.s4-itm-selected:hover td {

/* Selection Box Column*/
.s4-itm-cbx, .s4-itm-inlineedit {
position: relative;
/* Add New Item Link Button */
.ms-addnew {
.ms-partline {
/* Expandable/Collapsible Heading */
.ms-gb {
text-transform: uppercase;
.ms-gb a {
.ms-gb a:hover {
/* Pager Style */
.ms-bottompaging tbody tr {
.ms-bottompaging tbody tr table tr {

Unfortunately, the styles for the picture library don’t come out perfect using these tags. Also, bear in mind that these styles will affect all List View web parts, even the built in web parts found on the default list page. More modification will be needed in order to hit list styles other than the default (News feed, table style, etc).

If you have any suggestions or found any errors let me know!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: