SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience

http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
CSS Reference Chart for SharePoint 2007 (Microsoft
Office SharePoint Server 2007 and Windows
SharePoint Services v3)
See also:
SharePoint 2007 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. Additionally, there is a "Copy to
Clipboard" function that will copy the source code for the style to your client machine's clipboard for use
in your own CSS file. 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. Note, Copy to
Clipboard ONLY WORKS in INTERNET EXPLORER. This functionality will not work in Firefox due to
restrictions with the Firefox browser itself.
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 (a.k.a. Global Navigation)
4. Site Actions Menu
5. Quick Launch Bar (Default Left Vertical Navigation Bar; a.k.a. Current Navigation)
6. Quick Launch Picker (Date Picker)
7. Title Area
8. Content Area
Heather Solomon
CSS Chart Author
Background
Twitter
Facebook
SharePoint Branding Courses
CSS Workshop
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
a. General
b. Breadcrumbs
c. Page Edit Toolbar
d. Mini Console
e. Web Parts
f. Menu Toolbar
g. Toolbar
h. Calendar
9. Search Center
10. Site Directory
11. Blog
12. Wiki
Class/ID Function Properties CSS File, Approx. Line
Number, & Source Code Copy
Notes
Global Links (Sign In/Welcome, My Links, etc)
- Back to Top -
.ms-globalbreadcrumb Global link bar
container
Font
Text
alignment
Background
Padding
Text
decoration
Font color
Core.CSS - 526, 532
Copy to Clipboard

.ms-HoverCellInActive,.ms-
SpLinkButtonInActive
Global links Border
Margin
Font color
Alignment
Background
Core.CSS - 2575
Copy to Clipboard
ms-
HoverCellInActive
is also used for
the inactive state
for Web Part
drop down menu
arrow.
.ms-HoverCellActive,.ms-
SpLinkButtonActive
Global links
hover state
Border
Alignment
Background
Core.CSS - 2582
Copy to Clipboard

.ms-globalleft Float table left Float Core.CSS - 540
Copy to Clipboard
Floats the table
containing the
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Site Map Path
.ms-globallinks Global link text Font size,
family
Background
Core.CSS - 546, 551
Copy to Clipboard

.ms-globalright Float table right Float Core.CSS - 543
Copy to Clipboard
Floats the table
containing the
global links
Global Links - CSS Tricks
.ms-globalright td {
DECLARATION
}
Container for
separator bars
Add to a custom file
Use to format the separator bars that appear between global
links.
Search
- Back to Top -
.ms-sbcell Wrapper around
search input,
button and
Advanced
Search link
Padding
Border
White
Space
Core.CSS - 4137
Copy to Clipboard

td.ms-sbgo Search magnify
icon
Background
Padding
Core.CSS - 4177
Copy to Clipboard

.ms-sbLastcell Empty cell to
the right of the
search area
Width Core.CSS - 4184
Copy to Clipboard

.ms-sblink Link formatting Border
Font family,
size, color
Text
decoration
Padding
Core.CSS - 4162, 4166, 4173
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-sbplain Formatting for
Search terms
text box
Font family,
size
Border
Core.CSS - 4153
Copy to Clipboard
Control the text
box width in the
master page
using the
TextBoxWidth
property in the
search code.
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
Copy to Clipboard
Note this style
uses !
IMPORTANT.
.ms-sbtable Wrapping table
around Search
Font color,
family, size,
style,
weight
Core.CSS - 4116
Copy to Clipboard

.ms-sbtable-ex Wrapping table
around Search
Width
Border
Margin
Core.CSS - 4128
Copy to Clipboard

Search - CSS Tricks
Search alignment can be tricky in custom master pages, check out this post for more info and CSS code to align
the Search inputs: Align your Search Inputs
Top Horizontal Navigation - Default styles, but you can easily replace the
CssClass references to your own in the code for the navigation, or omit the
wrapping HTML
- Back to Top -
.ms-bannerContainer Wrapping
container
around top
navigation -
Only shows
Background
image,
position,
repeat,
color
Core.CSS - 518
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
through when a
tab is not in the
horizontal space
in the top
navigation.
Padding
.ms-topnavContainer Wrapping
container
around top
navigation,
inside of ms-
bannerContainer
- Wraps only the
tabs.
Border Core.CSS - 639
Copy to Clipboard

* Default does not set a red border, for this example it was changed to red to demonstrate the wrapping
nature of this style.
.ms-topnav Navigation
formatting
Border
Background
Font family,
size, color
Display
White
space
Padding
Height
Core.CSS - 643, 654
Copy to Clipboard

.ms-topnavselected Formatting for
selected
navigation
Font color,
weight
Background
Border
Core.CSS - 660, 670
Copy to Clipboard

.ms-topNavHover Hover state Background
Border
Font color
Core.CSS - 673, 681
Copy to Clipboard

.ms-topNavFlyOuts Drop down
menus
Background
Font family,
size, color
Display
Core.CSS - 692, 697
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Width
Padding
.ms-topNavFlyOutsHover Hover state for
drop down
menus
Background
Font color
Core.CSS - 704
Copy to Clipboard

Site Actions Menu
- Back to Top -
.ms-siteaction,.ms-siteaction
a
Site Actions text Font size,
family,
weight,
color
Text
decoration
Core.CSS - 590
Copy to Clipboard

.ms-siteactionsmenu Wrapping table
cell
White
space
Font
Padding
Border
Cursor
Core.CSS - 603
Copy to Clipboard

.ms-siteactionsmenu div div
div
Site Actions
button
Background
Border
Padding
Core.CSS - 610, 619
Copy to Clipboard

.ms-siteactionsmenu div div
div.ms-siteactionsmenuhover
Hover state Background
Border
Core.CSS - 623
Copy to Clipboard

Quick Launch Bar (Default Left Vertical Navigation Bar) - Default styles, but you
can easily replace the CssClass references to your own in the code for the
navigation, or omit the wrapping HTML
- Back to Top -
.ms-titleareaframe Area above
navigation
See Title Area On some screens
since this area is
directly above
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
the left
navigation it
seems it would
have an
associated left
navigation style,
but instead the
area is the entire
page width and
is a part of the
title area.
.ms-pagemargin Area to the right
of the
navigation
Background
color,
image,
repeat,
position
Height
Core.CSS - 1212
Copy to Clipboard

.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
Copy to Clipboard

.ms-navheader Navigation
headers
Background
Border
Padding
Font
weight,
color
Text
decoration
Core.CSS - 744, 756, 851, 854,
859
Copy to Clipboard

.ms-selectednavheader Selected view
state for
navigation
Width
Background
Border
Core.CSS - 766, 800, 811, 816
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
headers Padding
Font
weight,
color
Text
decoration
.ms-navitem Sub navigation
items under
navigation
headers
Background
Padding
Font family,
color
Text
decoration
Core.CSS - 820, 863, 867
Copy to Clipboard
Portal.CSS - 782, 786, 790,
794
Copy to Clipboard

.ms-selectednav Selected view
state for
navigation items
under
navigation
headers
Border
Background
Margin
Width
Padding
Font color
Core.CSS - 779, 788, 796, 941
Copy to Clipboard

.ms-navSubMenu1 Sub navigation
items under
navigation
headers
Width
Border
Background
Core.CSS - 827
Copy to Clipboard

.ms-navSubMenu2 Sub navigation
items under
navigation
headers
Border
Width
Background
Margin
Core.CSS - 763, 832
Copy to Clipboard

.ms-treeviewouter Containing DIV
for Tree View in
Quick Launch
Border
Padding
Core.CSS - 741, 750, 753, 887,
890
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
div.ms-treeviewouter div Top border of
Tree View Pane
Border Core.CSS - 750
Copy to Clipboard

.ms-tvselected Selected
navigation item
in Tree View
Background
Font color
Core.CSS - 881, 884
Copy to Clipboard

.ms-recyclebin Recycle Bin Background
Width
Border
Padding
Font
weight,
color
Text
decoration
Core.CSS - 893, 900, 905
Copy to Clipboard

.ms-quicklaunchouter Bottom border
of Quick Launch
pane and
margin around
pane
Border
Margin
Core.CSS - 874, 878
Copy to Clipboard


.ms-quickLaunch Quick Launch
pane formatting
and top and
side borders
around pane
Border
Font
Line-height
Background
Core.CSS - 909
Copy to Clipboard

.ms-quickLaunch table td Container for Border Core.CSS - 738 Default code
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
sub items
Copy to Clipboard
adds a 1px top
and bottom
border around
set of sub menu
items as shown
in red to the
right.
Quick Launch Picker (Date Picker)
- Back to Top -
.ms-picker-header Picker header Font
weight
Background
DatePicker.CSS - 8
Copy to Clipboard

.ms-picker-dayheader Days of the
week
Font family,
size, color,
weight
Text
alignment
Border
Padding
DatePicker.CSS - 17
Copy to Clipboard

.ms-picker-daycenter Date boxes Text
alignment
Font size,
family,
color
Border
Height
Text
decoration
DatePicker.CSS - 96, 105, 111,
119
Copy to Clipboard

.ms-picker-daycenterOn Hover state for
Date boxes
Background
Height
DatePicker.CSS - 96, 123
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-picker-dayselected Current date Text
alignment
Font size,
family
Background
Border
DatePicker.CSS - 126
Copy to Clipboard

.ms-picker-footer Picker footer Border
Font family,
size, color
Padding
Text
decoration
DatePicker.CSS - 180, 187,
190
Copy to Clipboard

.ms-quickLaunch Wrapper around
entire picker
See ms-quickLaunch
Title Area
- Back to Top -
.ms-titlearealeft Wrapping table
cell around page
image
Background Core.CSS - 1116
Copy to Clipboard

.ms-titleareaframe Wrapping table
cell around page
image and
neighboring
table cell to the
right
Background
image,
repeat,
position,
color
Text
alignment
Core.CSS - 1120
Copy to Clipboard

.ms-pagetitleareaframe table Wrapping table
cell around page
title
Background
image,
repeat,
Core.CSS - 1130
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
position,
color
Text
alignment
.ms-pagetitle Page title text Font color,
family, size,
weight
Margin
Core.CSS - 1256, 1263, 1269
Copy to Clipboard

Content Area
General
- Back to Top -
.ms-bodyareaframe Content
container
Vertical
alignment
Height
Width
Background
Border
Padding
Core.CSS - 1238, 1247
Copy to Clipboard

.ms-listdescription List/library
description
Font color,
family
Background
Padding
Border
Core.CSS 1631
Copy to Clipboard

.ms-formbody Background for
cells with form
fields
Line height
Font family,
size
Vertical
align
Background
Border
Padding
Text
alignment
Core.CSS - 304, 333, 349
Copy to Clipboard
OWSNOCR.CSS - 33, 43
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-formlabel Form label
formatting
Text
alignment
Font family,
size, color,
weight
Border
Padding
Core.CSS - 284
Copy to Clipboard
OWSNOCR.CSS - 22
Copy to Clipboard

.ms-formline Bottom line
under last form
fields
Border
Padding
Core.CSS - 352
Copy to Clipboard

.ms-authoringcontrols Background for
cells with form
fields on
administrative
pages
Background
Font family,
size, color
Core.CSS - 1413
Copy to Clipboard

.ms-propertysheet Controls fonts in
several locations
Text-align
Font family,
size, color,
weight,
text
decoration
Core.CSS - 1511, 1517, 1523,
1527
Copy to Clipboard

.ms-menuimagecell Arrow that
appears when
column headers
are moused
over
Background
Cursor
Border
Padding
Height
Core.CSS - 1345, 1352, 1355
Copy to Clipboard
SiteManagerCustomStyles.CSS
- 428
Copy to Clipboard

Breadcrumbs
- Back to Top -
.ms-pagebreadcrumb Breadcrumb
navigation in
main content
area
Padding
Border
Font size,
color
Text
Core.CSS - 556, 561
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
decoration
Background
.removeMargins Adjusts margins
around
breadcrumb
Margins PageLayouts.CSS - 105
Copy to Clipboard

.breadcrumb Page level
breadcrumbs
used on
publishing pages
Font
Padding
Border
Margin
Band.CSS - 47, 60, 67
Copy to Clipboard

.breadcrumbCurrent Current location
in page level
breadcrumbs
used on
publishing pages
Font Band.CSS - 71
Copy to Clipboard

Page Edit Toolbar (Edit Console)
- Back to Top -
.ms-consolemptablerow Wrapper around
Edit Toolbar -
master table cell
Background Core.CSS - 3203
Copy to Clipboard

.ms-consoletitleareaframe Edit Toolbar
container - sub
table cell
Background
Text
alignment
Padding
Width
Core.CSS - 1120, 1139, 1142
Copy to Clipboard
This is the sides
of the toolbar;
optionally hide
these instead of
reformatting by
doing a display:
none.
.ms-
consoletitleareaframebottom
Bottom area
under toolbar
Background
Text
alignment
Padding
Core.CSS - 1146
Copy to Clipboard
This is the
bottom of the
sides of the
toolbar
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-consoleframe Edit Toolbar
container - sub
sub table
Border Core.CSS - 3210, 3223
Copy to Clipboard
This is the top
and bottom
border of the
toolbar as a
whole
.ms-consolestatusframe Edit Toolbar
container - sub
sub sub table
Border
Background
Core.CSS - 3210, 3227
Copy to Clipboard
This the
background of
the lower
sections of the
toolbar
.ms-
consolestatuscheckoutframe
Edit Toolbar
container - sub
sub sub table
cell
Background Core.CSS - 3233, 3244
Copy to Clipboard
This is the
gradation in the
top bar when the
page is in Edit
mode
.ms-consolestatusminorframe Edit Toolbar
container - sub
sub sub table
cell
Background Core.CSS - 3233, 3240
Copy to Clipboard
This is the
gradation in the
top bar when
looking at a draft
state of the page
.ms-consolehr Separator rules
between rows in
toolbar
Background
Height
Core.CSS - 3293
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Page Edit Toolbar - CSS Tricks
td.ms-titleareaframe, div.ms-
titleareaframe, .ms-
pagetitleareaframe, .ms-
mwspagetitleareaframe, .ms-
consoletitleareaframe{
background: transparent
none
}
.ms-
consoletitleareaframebottom,
td.ms-consolemptablerow {
background: transparent
}
Blanks out
background
color of page
edit toolbar
Often when working with a custom master page, the page
edit toolbar will create a thin blue line on pages when the
toolbar is not being shown. Use this style to remove this issue.
NOTE! In order for this to work, you also have to add to the
PrefixHtml code for the Delegate Control: PrefixHtml="& lt
;table width=100%& gt ;& lt ;tr& gt ;& lt ;td colspan=& quot
;4& quot ; id=& quot ;mpdmconsole& quot ; class=& quot
;ms-consolemptablerow& quot ;& gt ;". Remove the spaces
after each & and before each ;. Be sure to close the table in
the SuffixHtml.
Mini Console
- Back to Top -
.ms-wikieditouter Div wrapper
around console
buttons
Height
Font size,
family
Position
Border
Text
alignment
Margin
See shared styles under Wiki
.ms-wikieditthird Background of
buttons
Background
Padding

.ms-wikitoolbar a.ms-toolbar Buttons Font color
.ms-wikitoolbar a:hover.ms-
toolbar
Hover state of
buttons
Text
decoration
Font color

.ms-toolbar See Toolbar
.ms-separator See Toolbar
Web Parts
- Back to Top -
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-WPSelected Edit view Border Core.CSS - 2503
Copy to Clipboard

.ms-WPHeader Header area Border Core.CSS - 2664
Copy to Clipboard

.ms-WPTitle Title text Font
weight,
family,
color
Text
decoration
Padding
Cursor
Core.CSS - 2480, 2491, 2497
Copy to Clipboard

.ms-HoverCellInActive Inactive state
for web part
menu arrow
See Global Links
.ms-HoverCellActiveDark Mouseover for
web part menu
arrow
Background
Border
Vertical
alignment
Core.CSS - 2590
Copy to Clipboard

.ms-WPBody Body content of
web parts
Font size,
family,
color,
decoration
Core.CSS - 2507, 2512, 2516,
2521
Copy to Clipboard
This is not used
by all web parts!
Generally web
part data not in
a table will pick
up this style.
.ms-WPBorder Body content of
web parts
Border Core.CSS - 2565, 2571
Copy to Clipboard
This is not used
by all web parts!
Generally web
part data in a
table format will
pick up this style.
Also test the
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Content Editor
Web Part to
verify that your
changes do not
have an adverse
affect on it.
.link-item Links within web
parts
Font size,
family,
color,
decoration
Controls.CSS - 63, 69, 73,
2521
Copy to Clipboard

.bullet Bullets used in
web part
content
Border
Vertical
alignment
Background
Padding
Controls.CSS - 117
Copy to Clipboard

.description Descriptions
within web parts
Font size,
family,
color
Controls.CSS - 91
Copy to Clipboard

.ms-vb Column headers
in lists, among
other things
Vertical
alignment
Font color,
size,
decoration
Core.CSS - 1750, 1754, 1758,
1762, 1766, 1838, 1843
Copy to Clipboard
Proceed carefully
with changes to
ms-vb, the style
is used in
multiple places
and it's
properties are
grouped with
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
other styles.
Break out the
classes and
properties you
need to change,
and test your site
heavily.
.ms-rteCustom-ArticleTitle Article Title in
rich text fields
Font size,
weight,
family,
color, text-
transform
HtmlEditorCustomStyles.CSS -
68
Copy to Clipboard

.ms-rteCustom-
ArticleHeadLine
Article Headline
in rich text fields
Font size,
weight,
family,
color
HtmlEditorCustomStyles.CSS -
83
Copy to Clipboard

.ms-rteCustom-ArticleByline Article Byline in
rich text fields
Font size,
weight,
family,
color
HtmlEditorCustomStyles.CSS -
76
Copy to Clipboard

.ms-addnew Link to add new
list items
Font
weight,
family, size,
color,
decoration
Padding
Core.CSS - 1882, 1889, 1893
Copy to Clipboard
Note that this
class is used
twice, once for
the container
table cell, and
again for the
hyperlink.
.ms-partline Separating line
under web part
and above
Action links
Background Core.CSS - 1507
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Menu Toolbar
- Back to Top -
.ms-menutoolbar Toolbar menu Border
Height
Background
Core.CSS - 70, 77
Copy to Clipboard

.ms-separator img Separating line
between toolbar
options
Height
Width
Margin
Background
Border
Core.CSS - 1404
Copy to Clipboard

.ms-
menubuttoninactivehover
Toolbar button Margin
Padding
Background
Line height
Core.CSS - 100
Copy to Clipboard

.ms-menubuttonactivehover Hover state for
toolbar buttons
Margin
Padding
Background
Line height
Border
Cursor
Core.CSS - 106
Copy to Clipboard

.ms-splitbuttonhover Hover state for
"New" toolbar
button
Background
Border
Margin
Core.CSS - 202
Copy to Clipboard

.ms-splitbutton "New" toolbar
button
Margin Core.CSS - 199
Copy to Clipboard

.ms-splitbuttontext Wrapping table
cell for toolbar
menu item
Padding Core.CSS - 196, 207
Copy to Clipboard

.ms-splitbuttondropdown Separating line
between 'New'
text and drop
down arrow
Padding
Margin
Border
Cursor
Core.CSS - 192, 207, 211
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-listheaderlabel "View" text Font color,
size, family
Core.CSS - 132, 135
Copy to Clipboard

.ms-viewselector View drop down
menu
Font size,
family,
weight,
color
Border
Background
Padding
Cursor
Width
Core.CSS - 135, 139, 150, 158,
165
Copy to Clipboard

.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
Copy to Clipboard

Toolbar
- Back to Top -
.ms-toolbar Wrapping table
cell for toolbar
Font family,
size, color
Text
decoration
Background
Border
Core.CSS - 20, 37, 42
Copy to Clipboard
Also used in the
Mini Console
.ms-separator Button
separator
Font color,
size
Core.CSS 1399
Copy to Clipboard
Also used in the
Mini Console
Calendar
- Back to Top -
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
** Download a clean version of calendar styles ready for branding **
.ms-calheader Calendar header Background Calendar.CSS - 3
.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
Calendar.CSS - 215, 220
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Border
Background
.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
Border
Vertical
alignment
Background
Calendar.CSS - 235, 240
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.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

SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.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
Padding
Cursor
Font color
Text
decoration
Calendar.CSS - 362, 390, 393
.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 Text Calendar.CSS - 420, 715, 719
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
All Day Event
marker in Day
View
alignment
Border
Padding
Height
Vertical
alignment
Text
overflow
Text
decoration
Background
Height
Font family,
size
.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
Calendar.CSS - 779, 787, 793,
798

SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Alignment
Font family,
size
Overflow
Search Center (Advanced Search)
- Back to Top -
.ms-ptabarea Containing table
for tabs
Margin Portal.CSS - 17
Copy to Clipboard
These same
styles are also
used by the Site
Directory
because in the
style sheet the
classes are
grouped, but the
Site Directory
does utilize
different class
names.
.ms-ptabcn Selected tab Background
Border
Font
Padding
Portal.CSS - 20
Copy to Clipboard
.ms-ptabcnhover Selected tab
hover
Background
Border
Font
Padding
Portal.CSS - 33
Copy to Clipboard
.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
Copy to Clipboard
.ms-ptabcnhover A:hover Selected tab
text hover
Text
decoration
Font
Color
Portal.CSS - 52
Copy to Clipboard
.ms-sctabcf Unselected tab Border
Font
Portal.CSS - 118
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Padding
.ms-ptabcfhover Unselected tab
hover
Background
Border
Font
Padding
Portal.CSS - 71
Copy to Clipboard
.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
Copy to Clipboard
.ms-ptabcfhover A:hover Unselected tab
text hover
Text
decoration
Font
Color
Portal.CSS - 91
Copy to Clipboard
.ms-sctabrx Line extending
past tabs
Width
Background
Border
Font family,
size, style,
weight
Padding
Vertical
alignment
Text
alignment
Portal.CSS - 134
Copy to Clipboard
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
Portal.CSS - 58
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Font
Padding
.ms-ptabrx Line extending
past tabs
Width
Background
Border
Font family,
size, style,
weight
Padding
Vertical
alignment
Text
alignment
Portal.CSS - 110
Copy to Clipboard

Blog
- Back to Top -
.ms-PostWrapper Wrap around
each post,
includes date,
title and footer
Font color
Width
Core.CSS - 3510
Copy to Clipboard
By default, this
style sets a fixed
width for the
posts.
.ms-PostDate Post date Font size,
color
Margin
Border
Padding
Core.CSS - 3569
Copy to Clipboard

.ms-PostTitle Post title Font size,
color
Border
Padding
Position
Text
decoration
Core.CSS - 3531, 3536, 3541
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-PostBody Post body copy Font size,
color
Line height
Padding
Margin
Core.CSS - 3555, 3563, 3566
Copy to Clipboard

.ms-PostFooter Post footer links
and info
Font size,
color
Padding
White
space
Core.CSS - 3546, 3551
Copy to Clipboard

.ms-CommentsWrapper Wrap around
comments
See ms-PostWrapper By default, these
areas use the
same style
properties, but
since they use
different class
names, these can
be broken out in
your CSS file.
.ms-CommentHeader Comment
header text
Font size,
color,
weight
Margin
Padding
Position
Core.CSS - 3577
Copy to Clipboard

.ms-commentsempty Formatting for
default text
when no
comments have
been posted.
Font size,
color,
weight
Margin
Padding
Position
Core.CSS - 3604
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-commenttable Table that wraps
each comment.
Margin
Padding
Border
Core.CSS - 3639, 3643
Copy to Clipboard

.ms-CommentTitle Comment title Font color,
size
Line-height
Padding
Margin
Core.CSS - 3589
Copy to Clipboard

.ms-CommentBody Comment body
copy
Font color,
size
Line-height
Padding
Core.CSS - 3597
Copy to Clipboard

.ms-CommentFooter Comment footer See ms-PostFooter By default, these
areas use the
same style
properties, but
since they use
different class
names, these can
be broken out in
your CSS file.
.ms-blogedit Edit button for
posts and
comments.
Font size,
color
Line height
Vertical
alignment
Border
Core.CSS - 3610, 3616
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
Height
Padding
Background
.ms-blogAdminLinks Admin links that
show to right of
blog posts
List style
Margin
Padding
Background
Font color
Core.CSS - 3493, 3499, 3507
Copy to Clipboard
This is an
unordered list.
.ms-BlogNavigator Class used in a wrapper DIV tag that is around the Quick Launch (current)
navigation. Used as a contextual selector in the CSS for many styles. Some styles
seem to change nothing on the page when altered. Effective styles are listed
below.
.ms-BlogNavigator div.ms-
navheader
Navigation
headers
Background
Border
Padding
Font color,
weight
Core.CSS - 3687, 3694, 3697
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-BlogNavigator div.ms-
WPBody
Border above
navigation
headers
Border Core.CSS - 3704
Copy to Clipboard

.ms-BlogNavigator div.ms-
PartSpacingVertical
Space under
items in a
navigation
block.
Font size
Margin
Core.CSS - 3707
Copy to Clipboard

.ms-BlogNavigator td.ms-
addnew
Amount of left
indention of
"Add New..."
links
Padding
Background
Core.CSS - 3712
Copy to Clipboard

.ms-BlogNavigator td.ms-
addnew img
Amount of left
indention after
bullet in "Add
New..." links
Margin Core.CSS - 3715
Copy to Clipboard

.ms-CategoryTitleCell Container and
contents
Padding
Display
Core.CSS - 3666, 3670
Copy to Clipboard

Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
formatting for
sub navigation
items
Background
Margin
.ms-blogrssnav RSS Feed link Font color,
weight,
size, text-
decoration
Padding
Border
Core.CSS - 3515, 3522
Copy to Clipboard

.ms-blogrssnav img RSS Feed image Border Core.CSS - 3528
Copy to Clipboard

Wiki
- Back to Top -
Depends on your master
page
The Wiki Pages nav uses the Quick Launch styles from the master page. If you
changed the style names in the master page, then those are the styles being
used. If you did not change the styles, and just altered the default SharePoint
styles, the navigation styles are included above.
.ms-quicklaunchouter
ms-quickLaunch
ms-quicklaunchheader
ms-navsubmenu1
ms-navsubmenu2
ms-navitem
The Recent Changes Wiki nav uses the default styles for the Quick Launch, and
not any custom styles you may have created for the Quick Launch in your
master page. The navigation styles are included above.
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-recentchanges Bullet image to
left of View All
Pages in nav
Vertical
alignment
Padding
Core.CSS - 3459
Copy to Clipboard

.ms-addnew View All Pages
text link
Vertical
alignment
Padding
See ms-addnew. This style is used
in many places in
SharePoint,
including under
web parts to add
new items to
lists and libraries.
.ms-wikieditouter Div wrapper
around console
buttons
Height
Font size,
family
Position
Border
Text
alignment
Margin
Band.CSS - 387
* SAME AS TABS.CSS &
VERTICAL.CSS *
Copy to Clipboard
Core.CSS - 3407
Copy to Clipboard
SingleLevel.CSS - 332
Copy to Clipboard
Tabs.CSS - 419
* SAME AS BAND.CSS &
VERTICAL.CSS *
Copy to Clipboard
Vertical.CSS - 419
* SAME AS BAND.CSS &
TABS.CSS *
Copy to Clipboard
These Mini
Console styles
are also used in
the Site Directory
.ms-wikieditthird Background of
buttons
Background
Padding
Core.CSS - 3423
Copy to Clipboard
.ms-wikitoolbar a.ms-toolbar Buttons Font color Core.CSS - 3404
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
Copy to Clipboard
SharePoint 2007 CSS Reference Chart by Heather Solomon and the sharepoint experience
http://www.heathersolomon.com/content/sp07cssreference.htm[19/07/2011 10:19:03]
.ms-wikitoolbar a:hover.ms-
toolbar
Hover state of
buttons
Text
decoration
Font color
Core.CSS - 3437
Copy to Clipboard
.ms-separator See Toolbar
.ms-wikicontent Text formatting
in a wiki page
Text
decoration
Font color
Line height
Border
Core.CSS - 3442, 3445, 3447,
3449, 3454
Copy to Clipboard

Copyright 2007-2011. SharePoint Experts, Inc. and Heather Solomon.
Copy to Clipboard
Copy to Clipboard