SharePoint 2010 CSS Reference

Question

For SharePoint 2007, Heather Solomon made a reference chart for all CSS elements used by SharePoint 2007 so that they could be overridden when branding a SharePoint 2010 site. Does any such reference exist for SharePoint 2010?

Answer 1

Here is a link to sharpoint 2010 CSS charts. Can be useful at many times. :)

http://sp2010notes.wordpress.com/sharepoint-2010-css-chart/

Answer 2

For a comprehensive list see Rajesh's answer. It's pretty much a 2010 version of Heather Solomons.

This site has several of the base classes explained and displayed: http://erikswenson.blogspot.com/2010/01/sharepoint-2010-base-css-classes.html

And this site will give you a ton of CSS and branding resources (many SharePoint, some general ones) http://www.thesharepointmuse.com/2010/05/sharepoint-2010-customization-resources/

Answer 3

Heather has just posted the 2010 version of her famous SharePoint CSS chart.

It's online here: http://spexp.me/csschart/

Answer 4

I take a different approach.

I attach a local copy of coreV4.css to my masterpage AFTER the original CoreV4.css.

In the Head tag in the V4.master, find <SharePoint:CssLink runat="server" Version="4"/> Add the following after that:

<!--6sc add themes -->
 <SharePoint:CssRegistration runat="server" name="<% $SPUrl:~sitecollection/Style Library/CLIENT/CSS/NormalContentSpecificCSSFileHere.css %>" After="corev4.css"/>
 <SharePoint:CssRegistration name="/Style Library/en-us/Themable/CoreV4OverwritterHere.css" After="corev4.css" runat="server"/>
 <!-- End 6sc add themes-->

CoreV4.css contains theme comment markup and must be embeded the above way. Failure to do so will load broken CSS. Make sure the file is checked in and published.

More on Themable CSS: http://blogs.msdn.com/b/sharepointdesigner/archive/2010/04/09/working-with-the-sharepoint-theming-engine.aspx

If this is a publishing site, make sure you publish and approve the CSS file.

Also, after adding the theme comments, be sure to reapply the theme (apply a different theme and then back to the previous one). The "magic" happens as the theme is applied so if you added the lines after applying then they wouldn't show up.

I then use IE Developer Toolbar to select my class and I modify the needed CSS in the local copy of CoreV4.css through SharePoint Designer.

After I am done editing my custom CSS file, I dont load an ENTIRE CoreV4.css TWICE, I pick out my changes using a file comparison tool and export the modified selectors/attributes/and properties.

I've branded many sites using this method, as it works WITH SharePoint by only overwritting the css that SharePoint already had in place. (eliminates unbranded pages)

Here is an explanation of my process: http://eschrader.com/2010/09/23/a-great-way-to-create-sharepoint-2010-css-from-original-css/