Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
add comment

4 Answers 4

up vote 17 down vote accepted

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

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

share|improve this answer
1  
Nice. I wasn't aware of this. Good to know! –  Bil Simser Apr 9 '11 at 12:44
add comment

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/

share|improve this answer
1  
Useful links, just have to disagree with the first sentence (based on Rajesh's answer). –  Christophe Apr 13 '11 at 4:18
add comment

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/

share|improve this answer
    
But aren't you just doubling up? I also would imagine you run into some unexpected visual errors. –  MrChrister Apr 13 '11 at 23:21
    
not really. I am undoing the specific CSS that the CoreV4.css created, just like as if you had a Style guide for SP 2010. This way is just more consistant, as your CSS follows the same order as CoreV4.css's (and CSS order matters, something you dont get from a chart of CSS classes/id's). –  Eric Schrader Apr 15 '11 at 21:18
add comment

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

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.