Styling SharePoint Views

SharePoint views are powerful tools for displaying information from lists. Views can be easily re-organized via browser-based configuration tools allowing filtering, sorting and grouping, etc.

There are also some basic built-in styles, as follows:


But if you want to go further, most users will quickly get lost in the wild woods of XSL formatting, which is decidedly not for everyone. A halfway house is available using some basic CSS styling of standard Microsoft SharePoint styles, as can be seen below on a modified SharePoint Newsletter view.

The page has been built by styling the ms-rtestate-field with a background colour, padding an border.




    background-color: #DFF3EA;

    padding: 10px;



    } tbody td{

    background-color: #EBF3C7;

    border: 0px;

    } tbody td{

    background-color: #ffffff;




As SharePoint will also automatically alternate the rows in this view, this styling has been cleaned up to give following result.


The photo is simply embedded in a standard rich text field floated left and the stars use the graphic available on the SharePoint server but as a static image and not related to SharePoint’s rating system.


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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: