HeatherSolomon.com
See also:
» Image Reference Guide for SharePoint 2003
» SharePoint 2003 Design Articles and Info
» SharePoint 2007 CSS Reference Guide
The following CSS reference guide highlights the major styles used in a portal and WSS site. The guide is organized by area of the page and include the style name, function, approximate SPS.css and OWS.css line number and a sample screenshot of the style location on the screen. Use these guides to identify styles that can be replaced for your custom branding and installation or to quickly reference style name and CSS information for customization.
SPS.css and OWS.css are located on the web server in the following directory: Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES
Need to Learn More About CSS?
Check out this article first: SharePoint and Cascading Style Sheets: How to update, change and reference
| Portal/WSS | Class/ID | Function | SPS.css Approx. Line No. SPS.css is Portal & WSS |
OWS.css Approx. Line No. OWS.css is Portal & WSS |
OWSPERS.css Approx. Line No. Personal Sites |
Notes | Screenshot |
| Site Header: Graphics and Tool Navigation Links | |||||||
| Portal/WSS - connected | .ms-bannerframe | Table containing logo and upper nav links (My Site, Help); Bottom stroke between this table and the nav bar | 22 - Commented out 1408 - Width, padding, alignment |
172 - Background, height | 6 - Background |
|
|
| Portal/WSS - connected | .ms-banner | Table containing upper nav (My Site, Help); This table is within the ms-bannerframe table | 1425 - Alignment | 192 - Alignment, font | |||
| Portal/WSS - connected | .ms-banner a | Link formatting within upper nav table | 177 - Font | ![]() |
|||
| Site Header: Portal Navigation Bar | |||||||
| Portal | .ms-phnav1wrapper | Navbar background | 330 - Width, background, border, font | ![]() |
|||
| Portal | .ms-phnavtableone | Navbar padding | 337 - Padding | See .ms-phnav1wrapper | |||
| Portal | .ms-phnavtableone a | Non-active nav text | 345 - Font | ![]() |
|||
| Portal | .ms-phnavmidc1, .ms-phnavmidc0 | Non-active nav text padding | 359 - Padding | See .ms-phnavtableone | |||
| Portal | .ms-phnavmidc1sel, .ms-phnavmidc0sel | Active nav text background | 367 - Padding, background, border | ![]() |
|||
| Portal | .ms-phnavmidc1sel a,.ms-phnavmidc0sel a | Active nav text | 379 - Font | See .ms-phnavmidc1sel | |||
| Portal | .ms-phnavmidc1sel a,.ms-phnavmidc0sel a | Active nav text | 379 - Font | See .ms-phnavmidc1sel | |||
| Portal | .ms-phnavtopl1sel, .ms-phnavtopr1sel, .ms-phnavbotl1sel, .ms-phnavbotr1sel, .ms-phnavtopl0sel, .ms-phnavtopr0sel, .ms-phnavbotl0sel, .ms-phnavbotr0sel |
Navbar size | 391 - Background, height, width | See .ms-phnav1wrapper | |||
| Search | |||||||
| Portal/WSS - not connected | Div.ms-titleareaframe | Space under header and upper nav bar, above search | 391 - Background, height, width | 87 - Border | 283 - Border | ![]() |
|
| WSS | .ms-searchbox | Search input form field | 122 - Font, background | ![]() |
|||
| Portal/WSS - connected | .ms-searchform | Background behind search area | 127 - Font, background | ![]() |
|||
| WSS | .ms-searchcorner | Area to left of Search icon | 132 - Background | ![]() |
|||
| Portal | .ms-sblbcorner | Area to left of Search icon - bottom only | 421 - Background, padding, display none | ![]() |
|||
| Portal | .ms-sbtopcorner | Area to left of Search icon | 435 - Background, border, display none | See .ms-sblbcorner | |||
| Portal | .ms-sbtable | Background behind search area | 446 - Background, font | Overrides any settings in OWS - see .ms-searchform | ![]() |
||
| Portal | .ms-sbdropdown | Search drop down box to select source | 501 - Height, width | ![]() |
|||
| Title Area | |||||||
| Portal/WSS - connected | .ms-titlearea | Portal/WSS Site name | 274 - Font | ![]() |
|||
| Portal/WSS - connected | .ms-pagetitle | Name of section under Portal or WSS Site name | 99 - Font | 298 - Font | ![]() |
||
| Portal/WSS - connected | .ms-titlearealine | Hairline under search and title, above content | 93 - Background | 289 - Background | ![]() |
||
| Left Vertical Navigation Bar | |||||||
| Portal/WSS - connected | .ms-nav .ms-navframe, .ms-GRStatusBar | Background behind left nav bar | 30 - Background image | 220 - Background | Custom add ".ms-nav" in front to designate between left nav bar and datasheet view for a web part; Custom change HEX color to image to stop the dark color from showing in other Windows boxes such as Document Upload. The code reads for a background color from this style and if none is given defaults to a system color (light blue). For a light colored background this would not be necessary. | ![]() |
|
| Portal/WSS - connected | .ms-navwatermark | SharePoint text down side of bar | 33 - Display, color | 230 - Display, color | ![]() |
||
| Portal | .ms-nav td | Title text in left nav bar and title text of column headers in datasheet view of a web part | 1527 - Font color, weight | ![]() |
|||
| WSS | .ms-nav a | Link text | 256 - Font | ![]() |
|||
| Portal | .ms-location | Location menu links | 515 - Font, margins, width | ![]() |
|||
| Portal | .ms-locationhead | Location header and dot leader HR line under header text | 538 - Font, padding, background | Use to change dot leader HR | ![]() |
||
| Portal | .ms-locationicon | Location down arrow | 553 - Width, background, padding | ![]() |
|||
| Portal | .ms-locationbutton | Location menu nav text | 564 - Width, padding | See .ms-location | |||
| Portal | .ms-locationiconsel | Location menu bullets - selected background | 570 - Border, background, padding | Must sync up with .ms-locationbuttonsel | ![]() |
||
| Portal | .ms-locationbuttonsel | Location menu text - selected background | 581 - Width, padding, font, border, padding, margin | Must sync up with .ms-locationiconsel | ![]() |
||
| Portal | .ms-pvnav | Sub-topic menu links | 611 - Margin, padding | ![]() |
|||
| Portal | .Ms-pvnavtableone1 | Sub-topic menu links - text only | 619 - Padding | ![]() |
|||
| Portal | .ms-pvnavmidC1 | Sub-topic menu links | 651 - Font, padding, alignment | See .Ms-pvnavtableone1 | |||
| Portal | .ms-pvnavmidL1 | Sub-topic menu bullets | 639 - Width, padding, background | ![]() |
|||
| Portal | .ms-pvtbt | Action (area) header and dot leader HR line under header text | 703 - Font, background, padding | Only for Actions on area pages | ![]() |
||
| Portal | .ms-pvtbicon | Action (area) menu bullets | 717 - Width, padding, background | Only for Actions on area pages | ![]() |
||
| Portal | .ms-pvtbbutton | Action (area) menu links | 720 - Padding, alignment, font | Only for Actions on area pages | ![]() |
||
| Portal/WSS ?? connected | .ms-selectednav | Select A View menu links - selected | 45 - Width, padding, font, border, margin, background | ![]() |
|||
| Portal | .ms-unselectednav | Select A View and Actions (WP) menu links | 67 - Border, width, padding | 11 - Font | Only for Actions on expanded view web part pages; For all switch view links on personal sites | ![]() |
|
| WSS | .ms-viewselect a:link, .ms-GRFontSize |
Link text for Select A View, See Also, Actions menus | 64 - Font | See .ms-unselectednav | |||
| Portal | .ms-view | Select View menu | Identified on Search Results page only | ![]() |
|||
| Portal | .ms-viewhead | Select View header text | 754 - Background, font | Identified on Search Results page only | ![]() |
||
| Portal | .ms-viewbutton | Select View menu links | 765 - Font, padding, alignment | Identified on Search Results page only | ![]() |
||
| Portal | .ms-viewbuttonsel | Select View menu link when selected | 808 - Font, padding, border, background | Identified on Search Results page only | ![]() |
||
| Portal | .ms-viewicon | Area to left of Select View menu links | 787 - Width, padding | Identified on Search Results page only | ![]() |
||
| Portal | .ms-viewiconsel | Area to left of Select View menu link when selected | 795 - Border, background, padding, border | Identified on Search Results page only | ![]() |
||
| Content Area | |||||||
| General | |||||||
| Portal | .ms-portaltitle | Main headers | 1422 - Font, padding | ![]() |
|||
| Portal | .ms-toccattitle | Topic titles on SPSTOC pages | 915 - Font | ![]() |
|||
| Portal/WSS - connected | .ms-vb | Text and links in site in general | 568 - Font, alignment, padding | ![]() |
|||
| Search Results | |||||||
| Portal | .ms-srchTitle | Item title in search results | 1358 - Font | ![]() |
|||
| Portal | .ms-srchUrl | URL of item in search results | 1374 - Font, alignment | ![]() |
|||
| Portal | .ms-srchActions | Action links under search result (Add, Alert) | 1393 - Font, alignment | ![]() |
|||
| Web Parts | |||||||
| Portal/WSS - connected | .ms-WPTitle | Header text in a web part title bar | 1377 - Font, padding | ![]() |
|||
| Portal/WSS - connected | .ms-WPHeader | Header bar of a web part | 131 - Background, border | 1509 - Background | ![]() |
||
| Portal/WSS - connected | .ms-toolbar | Tool bar on expanded view of a web part with Actions (Add New, Delete, etc.) | 13 - Font | ![]() |
|||
| Portal/WSS - connected | table.ms-toolbar | Background of tool bar on expanded view of a web part | 16 - Background, border | 20 - Background, border | ![]() |
||
| Portal/WSS - connected | .ms-vh | Column headers | 445 - Font, alignment, padding 534 - Link attributes |
![]() |
|||
| Portal/WSS - not connected | .ms-PartSpacingVertical | Vertical spacing between web parts | 123 - Margin | 1498 - Font, margin | ![]() |
||
| Portal/WSS - connected | a.ms-addnew | Link to add new items | 621 - Font | ![]() |
|||
| Portal/WSS - connected | .ms-propertysheet | Links on Customization screen | 413 - Font | ![]() |
|||
| Portal/WSS - not connected | .ms-navframe, .ms-GRStatusBar | Column headers and shaded table cells in the 'Edit in Datasheet' view | 30 - Background | 217 - Background | ![]() |
||
| Portal | See .ms-nav td above | Title text in left nav bar and title text of column headers in datasheet view of a web part | 30 - Background | 217 - Background | |||