moss 2007 css reference
DESCRIPTION
Originally from HeatherSolomon.com , the document is a SharePoint 2007 CSS Reference ChartTRANSCRIPT
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. Global Links (Sign In/Welcome, My Links, etc.)
2. Search
3. Top Horizontal Navigation Bar
4. Site Actions Menu
5. Left Vertical Navigation Bar
6. Quick Launch Picker (Date Picker)
7. Title Area
8. Content Area
a. General
b. Breadcrumbs
c. Edit Console
d. Mini Console
e. Web Parts
f. Menu Toolbar
g. Toolbar
h. Calendar
9. Search Center 10. Site Directory
MOSS/WSS
or All
Class/ID Function Properties CSS File and
Approximate Line Number
Notes Screenshot
Global Links (Sign In/Welcome, My Links, etc) - Back to Top -
.ms-HoverCellInActive,.ms-
SpLinkButtonInActive
Global links Border
Margin Font color
Alignment
Background
Core.CSS - 2575
.ms-HoverCellActive,.ms-
SpLinkButtonActive
Global links
hover state
Border
Alignment Background
Core.CSS - 2582
.ms-globalleft Float table left Float Core.CSS - 540 Floats the table
containing
the Site Map
Path
.ms-globallinks Global link text
Font size, family
Background
Core.CSS - 546, 551
.ms-globalright Float table Float Core.CSS - 543 Floats the
Page 1 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
right 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
Font family,
size, color
Text
decoration
Padding
Core.CSS - 4162, 4166, 4173
.ms-sbplain Formatting for
Search terms
text box
Font family,
size
Border
Core.CSS - 4155
td.ms-sbscopes Wrapping
table cell
around Search
Scopes
Border Core.CSS - 4190
select.ms-sbscopes Formatting for
Search Scopes
select box
Font family,
size
Width
Core.CSS - 4193
.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
Top Horizontal Navigation - Default styles, but you can easily replace the CssClass references to your own
in the code
- Back to Top -
.ms-topnav Navigation
formatting
Border
Background
Font family,
size, color
Display
White space
Padding
Height
Core.CSS - 643, 654
.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
Page 2 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
menus Font family,
size, color
Display
Width
Padding
.ms-topNavFlyOutsHover Hover state for
drop down
menus
Background Font color
Core.CSS - 704
Site Actions Menu - Back to Top -
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.ms-
siteactionsmenuhover
Hover state Background Border
Core.CSS - 623
Left Vertical Navigation Bar - Default styles, but you can easily replace the CssClass references to your own
in the code
- Back to Top -
.ms-quicklaunchheader Quick Launch
Headers (such
as View All
Site Content
button)
Padding
Font
weight,
color, size
Text-
decoration
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
Padding Font family,
color Text
decoration
Core.CSS - 820, 863, 867 Portal.CSS - 782, 786, 790,
794
Page 3 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
.ms-selectednav Selected view
state for
navigation
items under
navigation
headers
Border
Background
Margin
Width
Padding
Font color
Core.CSS - 779, 788, 796,
941
.ms-navSubMenu1 Sub navigation
items under
navigation
headers
Width
Border
Background
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
Quick Launch Picker (Date Picker) - Back to Top -
.ms-picker-header Picker header Font weight
Background
DatePicker.CSS - 8
.ms-picker-dayheader Days of the
week
Font family,
size, color, weight
Text
alignment Border Padding
DatePicker.CSS - 17
.ms-picker-daycenter Date boxes Text alignment Font size,
family, color Border
Height
Text decoration
DatePicker.CSS - 96, 105, 111, 119
.ms-picker-daycenterOn Hover state for
Date boxes
Background
Height
DatePicker.CSS - 96, 123
Page 4 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
.ms-picker-dayselected Current date Text
alignment
Font size,
family
Background
Border
DatePicker.CSS - 126
.ms-picker-footer Picker footer Border
Font family,
size, color
Padding
Text
decoration
DatePicker.CSS - 180, 187,
190
.ms-quickLaunch Wrapper
around entire
picker
Border
Font size,
family
Line height
Background
Core.CSS - 909
Title Area - Back to Top -
.ms-pagetitle Wrapping
table cell
around page
title
Font color,
family,
size, weight Margin
Core.CSS - 1256
Content Area
General - Back to Top -
.ms-bodyareaframe Content
container
Vertical
alignment
Height
Width
Background
Border
Core.CSS - 1238
.ms-pagetitle Page title Font color,
family,
size, weight
Margin
Core.CSS - 1256
.ms-listdescription List/library
description
Font color,
family
Background Padding Border
Core.CSS 1631
.ms-formbody Background for cells with
form fields
Line height Font family,
size
Vertical align
Background Border
Padding
Text alignment
Core.CSS - 33, 43, 304, 333, 349
.ms-formlabel Form label formatting
Text alignment Font family,
size, color,
weight Border
Padding
Core.CSS - 284 OWSNOCR.CSS - 22
.ms-formline Bottom line
under last
form fields
Border
Padding
Core.CSS - 352
Page 5 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
.ms-authoringcontrols Background
for cells with
form fields on
administrative
pages
Background
Font family,
size, color
Core.CSS - 1413
.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
Breadcrumbs - Back to Top -
.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
Edit Console - Back to Top -
.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
.ms-consoletitleareaframebottom
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
.ms-
consolestatuscheckoutframe
Edit Console
container -
Background Core.CSS - 3233, 3244 This is the
gradation in
Page 6 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
sub sub sub
table cell
the top bar
when the
page is in
Edit mode
.ms-
consolestatusminorframe
Edit Console
container -
sub sub sub
table cell
Background Core.CSS - 3233, 3240 This is the
gradation in
the top bar
when
looking at a
draft state
of the page
.ms-consolehr Separator
rules between
rows in
console
Background Height
Core.CSS - 3293
Mini Console - Back to Top -
.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.ms-
toolbar
Buttons Font color Core.CSS - 3404
.ms-wikitoolbar a:hover.ms-
toolbar
Hover state of
buttons
Text
decoration
Font color
Core.CSS - 3437
.ms-toolbar See Toolbar
.ms-separator See Toolbar
Web Parts - Back to Top -
.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
Menu Toolbar - Back to Top -
.ms-menutoolbar Toolbar menu Border
Height
Background
Core.CSS - 70, 77
.ms-separator img Separating
line between
toolbar options
Height
Width
Margin
Core.CSS - 1404
Page 7 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
Background
Border
.ms-
menubuttoninactivehover
Toolbar button Margin
Padding
Background Line height
Core.CSS - 100
.ms-menubuttonactivehover Hover state for
toolbar
buttons
Margin
Padding
Background
Line height
Border
Cursor
Core.CSS - 106
.ms-splitbuttonhover Hover state for
"New" toolbar
button
Background
Border
Margin
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 View drop
down menu
Font size, family,
weight
Border Background
Padding Cursor
Width
Core.CSS - 135, 139, 150, 161, 165
Toolbar - Back to Top -
.ms-toolbar Wrapping table cell for toolbar
Font family, size, color Text
decoration Background Border
Core.CSS - 20, 37, 42 Also used in the Mini Console
.ms-separator Button separator
Font color, size
Core.CSS 1399 Also used in the Mini
Console
Calendar - Back to Top -
.ms-calheader Calendar
header
Background Calendar.CSS - 3
Page 8 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
.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
Day header
Background Border
Cursor
Text
alignment
Calendar.CSS - 148
.ms-cal-nodataMid Empty days Font family,
size
Vertical
alignment
Padding
Border
Background
Calendar.CSS - 215, 220
.ms-cal-nodataBtm2 Bottom area of
empty days
Padding
Border Background
Vertical
alignment
Calendar.CSS - 220, 227
.ms-cal-week Week header Background Border
Calendar.CSS - 56
.ms-cal-weekselected Hover state for
Week header
Font color
Text
decoration
Border Cursor Background
Calendar.CSS - 62, 67
.ms-cal-workitem Work days Font family,
size
Padding
Calendar.CSS - 235, 240
Page 9 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
Border
Vertical
alignment
Background
.ms-cal-workitem2B Bottom area of
each work day
Padding
Border
Background
Calendar.CSS - 252
.ms-cal-noworkitem Non work days Font family,
size
Vertical
alignment
Padding
Border
Background
Calendar.CSS - 235, 285
.ms-cal-noworkitem2B Bottom area of
each non work
day
Padding
Border
Background
Calendar.CSS - 292
.ms-cal-topday-today Today marker Background Border
Text
alignment Font
weight,
color
Text
decoration
Calendar.CSS - 119, 125, 131,
200
.ms-cal-topday-todayover Hover state for
Today marker
Background
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
Page 10 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
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
alignment
Border
Padding
Height
Vertical
alignment
Text
overflow
Text
decoration
Background Height
Font family,
size
Calendar.CSS - 420, 715, 719
.ms-cal-wemptycell,.ms-cal-
wemptycellL
Empty cells for
other days not
marked as an
All Day Event
when an All
Day Event
appears in the
Week View
Border
Background
Calendar.CSS - 703
.ms-cal-tweekitem Appointment
block in Week
View
Border
Background
Width
Height
Padding
Vertical
alignment Font family,
size
Overflow
Calendar.CSS - 756, 764, 770
.ms-cal-tdayitem Appointment block in Day View
Border Background Width
Height
Padding Vertical
Alignment
Font family, size Overflow
Calendar.CSS - 779, 787, 793, 798
Search Center (Advanced Search) - Back to Top -
.ms-ptabarea Containing
table for tabs
Margin Portal.CSS - 17 These same
styles are also used by
the Site
Directory
because in
the style
sheet the
classes are
grouped, but
.ms-ptabcn Selected tab Background
Border
Font
Padding
Portal.CSS - 20
.ms-ptabcnhover Selected tab
hover
Background
Border
Font
Portal.CSS - 33
Page 11 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm
Copyright © 2007. Heather Solomon.
Padding the Site
Directory
does utilize
different
class names.
.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
Background Border
Font family,
size, style,
weight
Padding
Vertical
alignment
Text
alignment
Portal.CSS - 134
Site Directory (Site Map) - Back to Top -
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
Background
Border
Font family,
size, style,
weight
Padding Vertical
alignment
Text alignment
Portal.CSS - 110
Page 12 of 12HeatherSolomon.com - SharePoint 2007 CSS Reference Chart
4/1/2007http://www.heathersolomon.com/content/sp07cssreference.htm