Cascading Style Sheets Class Usage in SharePoint Foundation
Applies to: SharePoint Foundation 2010
Cascading style sheets (CSS) define style rules that a developer can apply to elements in a Web page. For example, CSS styles can define how elements are displayed and where they are positioned on the page. You can use CSS in conjunction with ECMAScript (JavaScript, JScript) and the HTML elements defined on the master page (v4.master) and individual pages to customize the display of Microsoft SharePoint Foundation Web sites.
Team Site Home Page Elements and CSS Classes
The following table summarizes selected top-level elements and CSS styles used on the default Team Site home page. Use this table as a starting point for understanding how to use cascading style sheets to customize SharePoint Foundation. For more information, see Cascading Style Sheets.
Element |
CSS Class(es) |
Notes |
|---|---|---|
<body> |
v4master |
Applies CSS styles in corev4.css to the page. |
Ribbon container |
s4-pr |
Makes the Ribbon container the full width of the page row. |
s4-ribbonrowhidetitle |
Used to show or hide the ribbon title area when the ribbon is opened or closed. |
|
ms-cui-ribbon |
Defines the main ribbon CSS class. |
|
ms-cui-ribbonTopBars |
Defines the elements above the ribbon body, from the top of the page up to and including the ribbon tab titles. |
|
Site Actions menu |
ms-siteactionsmenu |
Sets styles for the Site Actions menu as a whole. |
ms-siteactionsmenuinner |
Sets styles for the inner Site Actions menu. |
|
ms-menu-a |
Sets the margin-right property on the top menu. |
|
Breadcrumb menu |
s4-breadcrumb-menu |
Sets styles for the Breadcrumb menu as a whole. |
s4-breadcrumb-anchor |
Sets styles on hover over the Breadcrumb menu. |
|
Breadcrumb menu header |
s4-breadcrumb-top |
Sets styles on the Breadcrumb menu top area when the drop-down tree is open. |
s4-breadcrumb-header |
Sets styles on the breadcrumb folder icon when the breadcrumb tree drop-down menu is selected. |
|
Breadcrumb menu items |
s4-breadcrumb |
Sets breadcrumb item styles. |
s4-breadcrumbRootNode |
Sets styles on the breadcrumb Team Site root tree element. |
|
s4-breadcrumbCurrentNode |
Sets styles on the breadcrumb Home tree element. |
|
Edit tab |
ms-qatbutton |
Sets styles on the Edit tab. |
Browse tab |
ms-cui-tts |
Sets styles for the container for the tab title. |
ms-cui-tt |
Sets styles for the tab title. |
|
ms-browseTab |
Sets styles specific to the Browse tab |
|
ms-cui-tt-s |
Sets styles for a selected tab title. |
|
ms-cui-tt-a |
Sets styles for the Ribbon tab title anchor (the link element that makes the table title clickable). |
|
ms-cui-tt-span |
Sets styles for tab title span. |
|
Page Tab |
ms-cui-tt |
Sets styles for the tab title. |
ms-cui-tt-a |
Sets styles for the Ribbon tab title anchor (the link element that makes the table title clickable). |
|
ms-cui-tt-span |
Sets styles for tab title span. |
|
User menu |
s4-trc-container-menu |
Sets styles for the top right corner container menu. |
ms-SPLink |
Sets styles applied to a menu item. |
|
ms-welcomeMenu |
Sets the margin-right property on a drop-down menu item. |
|
ms-menu-a |
Sets the margin-right property on the top menu. |
|
Title row |
s4-pr |
Makes the Title row the full width of the page row. |
s4-title |
Sets styles on page title elements. |
|
s4-lp |
Sets styles for elements on the left part of the page. |
|
s4-titlelogo |
Sets margin and alignment on the title logo image. |
|
s4-titletext |
Sets styles on all text to the right of the page logo graphic. |
|
Search area |
s4-search |
Sets padding values on the Search control in the secondary menu. |
s4-rp |
Sets styles for elements on the right part of the page. |
|
QuickLaunch menu items |
menu-item |
Sets styles for the Home button located under the Site logo. |
menu-item-text |
Sets styles on the text of the Home button. |
|
Recycle Bin link |
s4-rcycl |
Sets styles specific to the Recycle Bin link element. |
ms-splinkbutton-text |
Sets styles on the link element. |
|
All Site Content link |
s4-specialNavIcon |
Sets styles specific to the All Site Content link element. |
ms-splinkbutton-text |
Sets styles on the link element. |
|
Shared Documents link |
ms-WPHeaderTd |
Sets styles on the header section in the Web Part. |
ms-standardheader |
Sets standard header styles. |
|
ms-WPTitle |
Sets styles on the Web Part title. |
|
Web part menu |
ms-WPHeaderTdMenu |
Sets styles on the Web Part menu. |
ms-WPHeaderMenuImg |
Sets styles on the Web Part menu image. |
|
Selection checkbox |
ms-WPHeaderTdSelection |
Sets styles on the Web Part selection check box. |
ms-WPHeaderTdSelSpan |
Sets span styles on the Web Part selection check box. |
|
Item selection checkbox |
ms-vh-icon |
Sets styles on the item selection check-box icon. |
ms-vh2 |
Sets the height property. |
|
Type option, Name option, Modified option, Modified By option |
ms-vh-div |
Sets padding-top property. |
s4-ctx |
Sets padding, position, and display properties on the drop-down menu. |
|
ms-vh2 |
Sets the height property. |
|
Shared Documents text |
ms-vb |
Sets styles on the Shared Documents control group text area (bottom of group). |
Add document link |
ms-addnew |
Sets styles specified to the Add document link. |
Photo image |
ms-rte-layoutszone-outer |
Rich text editor class that sets the float property on controls of the Team Site Home Web part. |
ms-rte-layoutszone-inner |
Rich text editor class that sets styles on content areas of the Team Site Home Web part. |
|
ms-rteThemeForeColor-5-5 |
Rich text editor class that sets the theme fore-color (to dark blue) on the Getting Started Wiki area. |
|
Getting Started area |
ms-rte-layoutszone-outer |
Rich text editor class that sets the float property on controls of the Team Site Home Web part. |
ms-rte-layoutszone-inner |
Rich text editor class that sets styles on content areas of the Team Site Home Web part. |
|
ms-rteThemeForeColor-5-5 |
Rich text editor class that sets the theme fore-color (to dark blue) on the Getting Started Wiki area. |
|
Share this site, Change site theme, Set site icon, Customize QuickLaunch links |
ms-rteTable-0, ms-rteTableEvenRow-0, ms-rteTableEvenCol-0, ms-rteTableOddCol-0, ms-rteTableOddRow-0 |
Rich text editor classes that set styles on the controls under the Getting Started Wiki area. |