SharePoint 2010 Tips and Tricks with CSS

While working with SharePoint projects I am sure you all would have been asked by the customers for implementing something which you would at the first place say “no” or “not possible”. But as they say the customer is always right and you need to give in to customers demand. Following are few things which I needed to implementation while working on a recent intranet portal which I would like to share with you so that it helps somebody out there.

1. Edit the Page where you need to apply the styles
2. Add a “Content Editor Web part” on the page and make it hidden
3. Add the following to the content editor web part if you need to apply all the four customizations mentioned below OR pick and choose according to your requirement

<style>
/*--------Hide the columns--------*/
.ms-viewheadertr { 
    display: none;
}
/*---------Hide the Add Document option-------*/
.ms-addnew { 
    display: none;
}
/*---------Remove the new image icon on newly added documents-------*/
IMG.ms-newgif {
    display:none;
}
/*---------Hide the web part selection checkbox------*/
.ms-WPHeaderTdSelection
{
display: none;
}
</style>

Note: If you need to apply these settings to complete site then you should add it to a css document and reference that document in your master page

Hide the “New” icon on newly added documents in document library
Before:


After:



Hide the “Add document” link on a SharePoint document library
Before:


After:



Hide the “Columns” in SharePoint document library
Before:

After:

Hide the “selection” checkbox
Before:

After: