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.

/* CUSTOM LIST VIEW WEB PART STYLES */
.ms-listviewtable {

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

}
/* Header Row Formatting */
.ms-listviewtable tr.ms-viewheadertr th {

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

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

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

}

/* Header Containers */
tr.ms-viewheadertr > th.ms-vh, tr.ms-viewheadertr > th.ms-vh2 {

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 tr.ms-viewheadertr 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,
table.ms-listviewtable tbody tr td.ms-vb-firstCell, table.ms-listviewtable > tbody > tr > td {

}
/* Row Hover Style */
tr.ms-itmhover:hover > td, table.ms-listviewtable tbody tr:hover td.ms-vb-firstCell,
.ms-listviewtable tbody tr:hover td.ms-vb2, .ms-listviewtable tbody tr:hover td.ms-vb-icon,
.ms-listviewtable tbody tr:hover td.ms-vb-title {

}
/* 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 td.ms-vb {
}
.ms-bottompaging tbody tr td.ms-vb 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!

Advertisements
  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: