HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Page 1 of 12
HeatherSolomon.com
CSS Reference Chart for SharePoint 2007 (Microsoft Office SharePoint Server 2007 and Windows SharePoint Services v3) See also: » SharePoint 2007 Design Articles and Info » Image Reference Guide for SharePoint 2003 » SharePoint 2003 Design Articles and Info The following CSS reference guide highlights the major styles used in MOSS and WSS v3 sites. The guide is organized by area of the page and include the style name, function, CSS file name and approximate line number and a sample screenshot of the style location on the screen. Use these guides to identify styles that can be overridden for your custom branding and installation or to quickly reference style name and CSS information for customization. The default CSS files are located on the web server in the following directory: Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES. Additional styles are located in the Publishing feature: Local Drive:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\FEATURES\PublishingLayouts\en-us
Table of Contents 1. 2. 3. 4. 5. 6. 7. 8.
9. 10.
Global Links (Sign In/Welcome, My Links, etc.) Search Top Horizontal Navigation Bar Site Actions Menu Left Vertical Navigation Bar Quick Launch Picker (Date Picker) Title Area Content Area a. General b. Breadcrumbs c. Edit Console d. Mini Console e. Web Parts f. Menu Toolbar g. Toolbar h. Calendar Search Center Site Directory
MOSS/WSS Class/ID or All
Function
Properties
CSS File and Approximate Line Number
Notes
Global Links (Sign In/Welcome, My Links, etc)
Screenshot - Back to Top -
.ms-HoverCellInActive,.msSpLinkButtonInActive
Global links
Border Margin Font color Alignment Background
Core.CSS - 2575
.ms-HoverCellActive,.msSpLinkButtonActive
Global links hover state
Border Alignment Background
Core.CSS - 2582
.ms-globalleft
Float table left
Float
Core.CSS - 540
.ms-globallinks
Global link text
Font size, family Background
Core.CSS - 546, 551
.ms-globalright
Float table
Float
Core.CSS - 543
http://www.heathersolomon.com/content/sp07cssreference.htm
Floats the table containing the Site Map Path
Floats the
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
right
Page 2 of 12
table containing the global links
Search
- Back to Top .ms-sbcell
Wrapper around search input, button and Advanced Search link
Padding Border White Space
Core.CSS - 4137
td.ms-sbgo
Search magnify icon
Background Padding
Core.CSS - 4177
ms-sbLastcell
Empty cell to the right of the search area
Width
Core.CSS - 4184
.ms-sblink
Link formatting
Border Core.CSS - 4162, 4166, 4173 Font family, size, color Text decoration Padding
.ms-sbplain
Formatting for Search terms text box
Font family, Core.CSS - 4155 size Border
td.ms-sbscopes
Wrapping table cell around Search Scopes
Border
select.ms-sbscopes
Formatting for Search Scopes select box
Font family, Core.CSS - 4193 size Width
.ms-sbtable
Wrapping table around Search
Font color, family, size, style, weight
Core.CSS - 4116
.ms-sbtable-ex
Wrapping table around Search
Width Border Margin
Core.CSS - 4128
Core.CSS - 4190
Top Horizontal Navigation - Default styles, but you can easily replace the CssClass references to your own in the code .ms-topnav
Navigation formatting
Border Core.CSS - 643, 654 Background Font family, size, color Display White space Padding Height
.ms-topnavselected
Formatting for selected navigation
Font color, weight Background Border
Core.CSS - 660, 670
.ms-topNavHover
Hover state
Background Border Font color
Core.CSS - 673, 681
.ms-topNavFlyOuts
Drop down
Background
Core.CSS - 692, 697
http://www.heathersolomon.com/content/sp07cssreference.htm
- Back to Top -
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
menus
.ms-topNavFlyOutsHover
Page 3 of 12
Font family, size, color Display Width Padding
Hover state for Background drop down Font color menus
Core.CSS - 704
ms-siteaction,.ms-siteaction a
Site Actions text
Font size, family, weight, color Text decoration
Core.CSS - 590
.ms-siteactionsmenu
Wrapping table cell
White space Font Padding Border Cursor
Core.CSS - 603
.ms-siteactionsmenu div div div
Site Actions button
Background Border Padding
Core.CSS - 610, 619
.ms-siteactionsmenu div div div.mssiteactionsmenuhover
Hover state
Background Border
Core.CSS - 623
Site Actions Menu
- Back to Top -
Left Vertical Navigation Bar - Default styles, but you can easily replace the CssClass references to your own in the code .ms-quicklaunchheader
Quick Launch Headers (such as View All Site Content button)
Padding Font weight, color, size Textdecoration Background
Core.CSS - 917, 927, 931
.ms-navheader
Navigation headers
Background Border Padding Font weight, color Text decoration
Core.CSS - 744, 756, 851, 854, 859
.ms-selectednavheader
Selected view state for navigation headers
Width Background Border Padding Font weight, color Text decoration
Core.CSS - 766, 800, 811, 816
.ms-navitem
Sub navigation items under navigation headers
Background Core.CSS - 820, 863, 867 Padding Portal.CSS - 782, 786, 790, Font family, 794 color Text decoration
http://www.heathersolomon.com/content/sp07cssreference.htm
- Back to Top -
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
.ms-selectednav
Selected view state for navigation items under navigation headers
Border Background Margin Width Padding Font color
.ms-navSubMenu1
Sub navigation Width items under Border navigation Background headers
Core.CSS - 827
.ms-navSubMenu2
Sub navigation items under navigation headers
Border Width Background Margin
Core.CSS - 763, 832
.ms-treeviewouter
Containing DIV for Tree View in Quick Launch
Border Padding
Core.CSS - 741, 750, 753, 887, 890
.ms-tvselected
Selected navigation item in Tree View
Background Font color
Core.CSS - 881, 884
.ms-recyclebin
Recycle Bin
Background Width Border Padding Font weight, color Text decoration
Core.CSS - 893, 900, 905
.ms-picker-header
Picker header
Font weight Background
DatePicker.CSS - 8
.ms-picker-dayheader
Days of the week
Font family, DatePicker.CSS - 17 size, color, weight Text alignment Border Padding
.ms-picker-daycenter
Date boxes
Text alignment Font size, family, color Border Height Text decoration
.ms-picker-daycenterOn
Hover state for Background Date boxes Height
Page 4 of 12
Core.CSS - 779, 788, 796, 941
Quick Launch Picker (Date Picker)
- Back to Top -
DatePicker.CSS - 96, 105, 111, 119
DatePicker.CSS - 96, 123
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
.ms-picker-dayselected
Current date
Text alignment Font size, family Background Border
.ms-picker-footer
Picker footer
Border DatePicker.CSS - 180, 187, Font family, 190 size, color Padding Text decoration
.ms-quickLaunch
Wrapper around entire picker
Border Font size, family Line height Background
.ms-pagetitle
Wrapping table cell around page title
Font color, Core.CSS - 1256 family, size, weight Margin
.ms-bodyareaframe
Content container
Vertical alignment Height Width Background Border
.ms-pagetitle
Page title
Font color, Core.CSS - 1256 family, size, weight Margin
.ms-listdescription
List/library description
Font color, family Background Padding Border
.ms-formbody
Background for cells with form fields
Line height Core.CSS - 33, 43, 304, 333, Font family, 349 size Vertical align Background Border Padding Text alignment
.ms-formlabel
Form label formatting
Text Core.CSS - 284 alignment OWSNOCR.CSS - 22 Font family, size, color, weight Border Padding
.ms-formline
Bottom line under last form fields
Border Padding
Page 5 of 12
DatePicker.CSS - 126
Core.CSS - 909
Title Area
- Back to Top -
Content Area General
- Back to Top Core.CSS - 1238
Core.CSS 1631
Core.CSS - 352
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Page 6 of 12
.ms-authoringcontrols
Background for cells with form fields on administrative pages
Background Core.CSS - 1413 Font family, size, color
.ms-propertysheet
Controls fonts in several locations
.ms-menuimagecell
Arrow that appears when column headers are moused over
Background Cursor Border Padding Height
Core.CSS - 1345, 1352, 1355 SiteManagerCustomStyles.CSS - 428, 633
.ms-pagebreadcrumb
Breadcrumb navigation in main content area
Padding Border Font size, color Text decoration Background
Core.CSS - 556, 561
.removeMargins
Adjusts margins around breadcrumb
Margins
PageLayouts.CSS - 105
.ms-consolemptablerow
Wrapper around Edit Console master table cell
Background
Core.CSS - 3203
.ms-consoletitleareaframe
Edit Console container sub table cell
Background Text alignment Padding Width
Core.CSS - 1120, 1140, 1142
This is the sides of the console
.msconsoletitleareaframebottom
Bottom area under console
Background Text alignment Padding
Core.CSS - 1146
This is the bottom of the sides of the console
.ms-consoleframe
Edit Console container sub sub table
Border
Core.CSS - 3210, 3223
This is the top and bottom border of the console as a whole
.ms-consolestatusframe
Edit Console container sub sub sub table
Border Background
Core.CSS - 3210, 3227
This the background of the lower sections of the console
.msconsolestatuscheckoutframe
Edit Console container -
Background
Core.CSS - 3233, 3244
This is the gradation in
Breadcrumbs
- Back to Top -
Edit Console
- Back to Top -
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
sub sub sub table cell
Page 7 of 12
the top bar when the page is in Edit mode
.msconsolestatusminorframe
Edit Console container sub sub sub table cell
Background
Core.CSS - 3233, 3240
.ms-consolehr
Separator rules between rows in console
Background Height
Core.CSS - 3293
.ms-wikieditouter
Div wrapper around console buttons
Hieght Font size, family Position Border Text alignment Margin
Core.CSS - 3405 SingleLevel.CSS - 332 Tabs.CSS - 419 Vertical.CSS - 419
.ms-wikieditthird
Background of buttons
Backgrouns Padding
Core.CSS - 3420
.ms-wikitoolbar a.mstoolbar
Buttons
Font color
Core.CSS - 3404
.ms-wikitoolbar a:hover.mstoolbar
Hover state of buttons
Text decoration Font color
Core.CSS - 3437
.ms-toolbar
See Toolbar
.ms-separator
See Toolbar
.ms-WPHeader
Header area
Border
Core.CSS - 2664
.ms-WPTitle
Title text
Font weight, family, color Text decoration Padding Cursor
Core.CSS - 2480, 2491, 2497
.ms-partline
Separating line under web part and above Action links
Background
Core.CSS - 1507
.ms-menutoolbar
Toolbar menu
Border Height Background
Core.CSS - 70, 77
.ms-separator img
Separating Height line between Width toolbar options Margin
Mini Console
This is the gradation in the top bar when looking at a draft state of the page
- Back to Top -
Web Parts
- Back to Top -
Menu Toolbar
- Back to Top -
Core.CSS - 1404
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Page 8 of 12
Background Border .msmenubuttoninactivehover
Toolbar button
Margin Padding Background Line height
Core.CSS - 100
.ms-menubuttonactivehover
Hover state for Margin toolbar Padding buttons Background Line height Border Cursor
Core.CSS - 106
.ms-splitbuttonhover
Hover state for Background Border "New" toolbar Margin button
Core.CSS - 202
.ms-splitbutton
"New" toolbar button
Margin
Core.CSS - 199
.ms-splitbuttontext
Wrapping table cell for toolbar menu item
Padding
Core.CSS - 196, 207
.ms-splitbuttondropdown
Separating line between 'New' text and drop down arrow
Padding Margin Border Cursor
Core.CSS - 192, 207, 211
.ms-listheaderlabel
"View" text
Font color, size, family
Core.CSS - 132, 135
.ms-viewselector
View drop down menu
Font size, family, weight, color Border Background Padding Cursor Width
Core.CSS - 135, 139, 150, 158, 165
.ms-viewselectorhover
Hover state for Font size, View drop family, down menu weight Border Background Padding Cursor Width
Core.CSS - 135, 139, 150, 161, 165
.ms-toolbar
Wrapping table cell for toolbar
Font family, Core.CSS - 20, 37, 42 size, color Text decoration Background Border
Also used in the Mini Console
.ms-separator
Button separator
Font color, size
Core.CSS 1399
Also used in the Mini Console
.ms-calheader
Calendar header
Background
Calendar.CSS - 3
Toolbar
- Back to Top -
Calendar
- Back to Top -
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
.ms-cal-navheader
Month directional arrows
Background Border Vertical alignment
Calendar.CSS - 844
.ms-cal-weekday
Weekday
Background Font color, weight Padding
Calendar.CSS - 50
.ms-cal-weekempty
Space to the left of the week day and weeks
Background Width Font size
Calendar.CSS - 41
.ms-cal-topday
Day header
Background Border Font weight, color Text alignment
Calendar.CSS - 75
.ms-cal-topdayover,
Hover state for Background Day header Border Cursor Text alignment
.ms-cal-nodataMid
Empty days
.ms-cal-nodataBtm2
Bottom area of Padding empty days Border Background Vertical alignment
Calendar.CSS - 220, 227
.ms-cal-week
Week header
Calendar.CSS - 56
.ms-cal-weekselected
Hover state for Font color Week header Text decoration Border Cursor Background
.ms-cal-workitem
Work days
Page 9 of 12
Calendar.CSS - 148
Font family, Calendar.CSS - 215, 220 size Vertical alignment Padding Border Background
Background Border
Calendar.CSS - 62, 67
Font family, Calendar.CSS - 235, 240 size Padding
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Page 10 of 12
Border Vertical alignment Background
.ms-cal-workitem2B
Bottom area of Padding each work day Border Background
.ms-cal-noworkitem
Non work days Font family, Calendar.CSS - 235, 285 size Vertical alignment Padding Border Background
.ms-cal-noworkitem2B
Bottom area of Padding each non work Border day Background
Calendar.CSS - 292
.ms-cal-topday-today
Today marker
Calendar.CSS - 119, 125, 131, 200
.ms-cal-topday-todayover
Hover state for Background Today marker Border Cursor Text alignment
Calendar.CSS - 136
.ms-cal-defaultbgcolor
All Day Event marker in Month View
Background Text alignment Font weight Text overflow Padding Cursor
Calendar.CSS - 352
.ms-cal-defaultbgcolorsel
Hover state for All Day Event marker in Month View
Background Text alignment Font weight Text overflow
Calendar.CSS - 362, 390, 393
Background Border Text alignment Font weight, color Text decoration
Calendar.CSS - 252
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Page 11 of 12
Padding Cursor Font color Text decoration .ms-cal-time
Area to left of All Day Event marker in Day View
Border Width Background
Calendar.CSS - 410
.ms-cal-alldayevent
Area to right of All Day Event marker in Day View
Text Calendar.CSS - 420, 715, 719 alignment Border Padding Height Vertical alignment Text overflow Text decoration Background Height Font family, size
.ms-cal-wemptycell,.ms-calwemptycellL
Empty cells for other days not marked as an All Day Event when an All Day Event appears in the Week View
Border Background
.ms-cal-tweekitem
Appointment block in Week View
Border Calendar.CSS - 756, 764, 770 Background Width Height Padding Vertical alignment Font family, size Overflow
.ms-cal-tdayitem
Appointment block in Day View
Border Calendar.CSS - 779, 787, 793, Background 798 Width Height Padding Vertical Alignment Font family, size Overflow
.ms-ptabarea
Containing table for tabs
Margin
Portal.CSS - 17
.ms-ptabcn
Selected tab
Background Border Font Padding
Portal.CSS - 20
.ms-ptabcnhover
Selected tab hover
Background Border Font
Portal.CSS - 33
Calendar.CSS - 703
Search Center (Advanced Search)
- Back to Top -
http://www.heathersolomon.com/content/sp07cssreference.htm
These same styles are also used by the Site Directory because in the style sheet the classes are grouped, but
4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
Padding .ms-ptabcn A:link, .ms-ptabcn A:visited, .ms-ptabcnhover A:link, .ms-ptabcnhover A:visited,
Selected tab text
Text decoration Font Color
Portal.CSS - 46
.ms-ptabcnhover A:hover
Selected tab text hover
Text decoration Font Color
Portal.CSS - 52
.ms-sctabcf
Unselected tab
Border Font Padding
Portal.CSS - 118
.ms-ptabcfhover
Unselected tab hover
Background Border Font Padding
Portal.CSS - 71
.ms-ptabcf A:link, .ms-ptabcf A:visited, .ms-ptabcfhover A:link, .ms-ptabcfhover A:visited,
Unselected tab text
Text decoration Font Color
Portal.CSS - 86
.ms-ptabcfhover A:hover
Unselected tab text hover
Text decoration Font Color
Portal.CSS - 91
.ms-sctabrx
Line extending past tabs
Width Portal.CSS - 134 Background Border Font family, size, style, weight Padding Vertical alignment Text alignment
See Search Center
Site Map tabs
See Search Center
See Search Center
.ms-ptabcf
Unselected tab
Background Border Font Padding
Portal.CSS - 58
.ms-ptabrx
Line extending past tabs
Width Portal.CSS - 110 Background Border Font family, size, style, weight Padding Vertical alignment Text alignment
Page 12 of 12
the Site Directory does utilize different class names.
Site Directory (Site Map)
- Back to Top -
Copyright © 2007. Heather Solomon.
http://www.heathersolomon.com/content/sp07cssreference.htm
4/1/2007
