A P P E N D I X  A

CSS Reference Guide

What's In This Chapter?

• The Ribbon Container
• Site Actions
• Site Breadcrumb
• Welcome Menu
• Content Containers
• Site Logo
• Page Breadcrumb
• Social Tags & Notes
• Top Header 2
• Top Navigation
• Search and Help
• Status Bar
• Quick Launch (Left Panel)
• Content Area
• Web-Part Elements
• Dialog Windows
• Blog Posts
• My Profile
• Search Results

This chapter includes the top most visible CSS classes used within SharePoint 2010. You can take the following CSS classes and use them to override the OOTB look and feel by changing the CSS properties. This can include making changes to background images, fonts, padding, margins, and other properties. Figure A-1 is a guide to the visual elements that are being covered in sections 1-13. Sections 13-19 have their own figure images. The majority of these classes come from the main SharePoint 2010 CSS file called “corev4.css” located on the server at: C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTS1033STYLESCOREV4.CSS.

Figure A-1. Team Site CSS reference guide

For all of the elements listed within this chapter I will provide the following details:

• Class Title: Label used to identify element
• Description: Brief description of the class/ID properties and how they are used
• Preview Image: Visual image showing what the element looks like (not all classes will have a preview image)
• Style Sheet: What style sheet the class/ID is referenced in
• ID/Class Name: The unique class/ID name
• Listing of Standard Class Properties: Listing of the CSS code properties used within the referenced style sheet

The first main section that I will cover is the Ribbon container area. The Ribbon control is new to SharePoint 2010 and has a lot of CSS classes.