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. 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 Class/ID Function Properties CSS File and Notes Screenshot

or All Approximate Line Number

Global Links (Sign In/Welcome, My Links, etc) - Back to Top -

.ms-HoverCellInActive,.ms- Global links Border Core.CSS - 2575

SpLinkButtonInActive Margin
Font color
Alignment
Background

.ms-HoverCellActive,.ms- Global links Border Core.CSS - 2582

SpLinkButtonActive hover state Alignment
Background

.ms-globalleft Float table left Float Core.CSS - 540 Floats the

table
containing
the Site Map
Path

.ms-globallinks Global link Font size, Core.CSS - 546, 551

text family
Background

.ms-globalright Float table Float Core.CSS - 543 Floats the

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 2 of 12

right table
containing
the global
links

Search - Back to Top -

.ms-sbcell Wrapper Padding Core.CSS - 4137

around search Border
input, button White
and Advanced Space
Search link

td.ms-sbgo Search Background Core.CSS - 4177

magnify icon Padding

ms-sbLastcell Empty cell to Width Core.CSS - 4184

the right of
the search
area

.ms-sblink Link Border Core.CSS - 4162, 4166, 4173

formatting Font family,
size, color
Text
decoration
Padding

.ms-sbplain Formatting for Font family, Core.CSS - 4155

Search terms size
text box Border

td.ms-sbscopes Wrapping Border Core.CSS - 4190

table cell
around Search
Scopes

select.ms-sbscopes Formatting for Font family, Core.CSS - 4193

Search Scopes size
select box Width

.ms-sbtable Wrapping Font color, Core.CSS - 4116

table around family,
Search size, style,
weight

.ms-sbtable-ex Wrapping Width Core.CSS - 4128

table around Border
Search Margin

Top Horizontal Navigation - Default styles, but you can easily replace the CssClass references to your own - Back to Top -
in the code

.ms-topnav Navigation Border Core.CSS - 643, 654

formatting Background
Font family,
size, color
Display
White
space
Padding
Height

.ms-topnavselected Formatting for Font color, Core.CSS - 660, 670

selected weight
navigation Background
Border

.ms-topNavHover Hover state Background Core.CSS - 673, 681

Border
Font color

.ms-topNavFlyOuts Drop down Background Core.CSS - 692, 697

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 3 of 12

menus Font family,

size, color
Display
Width
Padding

.ms-topNavFlyOutsHover Hover state for Background Core.CSS - 704

drop down Font color
menus

Site Actions Menu - Back to Top -

ms-siteaction,.ms-siteaction Site Actions Font size, Core.CSS - 590

a text family,
weight,
color
Text
decoration

.ms-siteactionsmenu Wrapping White Core.CSS - 603

table cell space
Font
Padding
Border
Cursor

.ms-siteactionsmenu div div Site Actions Background Core.CSS - 610, 619

div button Border
Padding

.ms-siteactionsmenu div div Hover state Background Core.CSS - 623

div.ms- Border
siteactionsmenuhover

Left Vertical Navigation Bar - Default styles, but you can easily replace the CssClass references to your own - Back to Top -
in the code

.ms-quicklaunchheader Quick Launch Padding Core.CSS - 917, 927, 931

Headers (such Font
as View All weight,
Site Content color, size
button) Text-
decoration
Background

.ms-navheader Navigation Background Core.CSS - 744, 756, 851,

headers Border 854, 859
Padding
Font
weight,
color
Text
decoration

.ms-selectednavheader Selected view Width Core.CSS - 766, 800, 811,

state for Background 816
navigation Border
headers Padding
Font
weight,
color
Text
decoration

.ms-navitem Sub navigation Background Core.CSS - 820, 863, 867

items under Padding Portal.CSS - 782, 786, 790,
navigation Font family, 794
headers color
Text
decoration

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 4 of 12

.ms-selectednav Selected view Border Core.CSS - 779, 788, 796,

state for Background 941
navigation Margin
items under Width
navigation Padding
headers Font color

.ms-navSubMenu1 Sub navigation Width Core.CSS - 827

items under Border
navigation Background
headers

.ms-navSubMenu2 Sub navigation Border Core.CSS - 763, 832

items under Width
navigation Background
headers Margin

.ms-treeviewouter Containing Border Core.CSS - 741, 750, 753,

DIV for Tree Padding 887, 890
View in Quick
Launch

.ms-tvselected Selected Background Core.CSS - 881, 884

navigation Font color
item in Tree
View

.ms-recyclebin Recycle Bin Background Core.CSS - 893, 900, 905

Width
Border
Padding
Font
weight,
color
Text
decoration

Quick Launch Picker (Date Picker) - Back to Top -

.ms-picker-header Picker header Font weight DatePicker.CSS - 8

Background

.ms-picker-dayheader Days of the Font family, DatePicker.CSS - 17

week size, color,
weight
Text
alignment
Border
Padding

.ms-picker-daycenter Date boxes Text DatePicker.CSS - 96, 105,

alignment 111, 119
Font size,
family,
color
Border
Height
Text
decoration

.ms-picker-daycenterOn Hover state for Background DatePicker.CSS - 96, 123

Date boxes Height

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 5 of 12

.ms-picker-dayselected Current date Text DatePicker.CSS - 126

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 Border Core.CSS - 909

around entire Font size,
picker family
Line height
Background

Title Area - Back to Top -

.ms-pagetitle Wrapping Font color, Core.CSS - 1256

table cell family,
around page size, weight
title Margin

Content Area

General - Back to Top -

.ms-bodyareaframe Content Vertical Core.CSS - 1238

container alignment
Height
Width
Background
Border

.ms-pagetitle Page title Font color, Core.CSS - 1256

family,
size, weight
Margin

.ms-listdescription List/library Font color, Core.CSS 1631

description family
Background
Padding
Border

.ms-formbody Background Line height Core.CSS - 33, 43, 304, 333,

for cells with Font family, 349
form fields size
Vertical
align
Background
Border
Padding
Text
alignment

.ms-formlabel Form label Text Core.CSS - 284

formatting alignment OWSNOCR.CSS - 22
Font family,
size, color,
weight
Border
Padding

.ms-formline Bottom line Border Core.CSS - 352

under last Padding
form fields

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 6 of 12

.ms-authoringcontrols Background Background Core.CSS - 1413

for cells with Font family,
form fields on size, color
administrative
pages

.ms-propertysheet Controls fonts

in several
locations

.ms-menuimagecell Arrow that Background Core.CSS - 1345, 1352, 1355

appears when Cursor SiteManagerCustomStyles.CSS
column Border - 428, 633
headers are Padding
moused over Height

Breadcrumbs - Back to Top -

.ms-pagebreadcrumb Breadcrumb Padding Core.CSS - 556, 561

navigation in Border
main content Font size,
area color
Text
decoration
Background

.removeMargins Adjusts Margins PageLayouts.CSS - 105

margins
around
breadcrumb

Edit Console - Back to Top -

.ms-consolemptablerow Wrapper Background Core.CSS - 3203

around Edit
Console -
master table
cell

.ms-consoletitleareaframe Edit Console Background Core.CSS - 1120, 1140, 1142 This is the
container - Text sides of the
sub table cell alignment console
Padding
Width

.ms- Bottom area Background Core.CSS - 1146 This is the

consoletitleareaframebottom under console Text bottom of
alignment the sides of
Padding the console

.ms-consoleframe Edit Console Border Core.CSS - 3210, 3223 This is the

container - top and
sub sub table bottom
border of
the console
as a whole

.ms-consolestatusframe Edit Console Border Core.CSS - 3210, 3227 This the

container - Background background
sub sub sub of the lower
table sections of
the console

.ms- Edit Console Background Core.CSS - 3233, 3244 This is the

consolestatuscheckoutframe container - gradation in

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 7 of 12

sub sub sub the top bar

table cell when the
page is in
Edit mode

.ms- Edit Console Background Core.CSS - 3233, 3240 This is the

consolestatusminorframe container - gradation in
sub sub sub the top bar
table cell when
looking at a
draft state
of the page

.ms-consolehr Separator Background Core.CSS - 3293

rules between Height
rows in
console

Mini Console - Back to Top -

.ms-wikieditouter Div wrapper Hieght Core.CSS - 3405

around Font size, SingleLevel.CSS - 332
console family Tabs.CSS - 419
buttons Position Vertical.CSS - 419
Border
Text
alignment
Margin

.ms-wikieditthird Background of Backgrouns Core.CSS - 3420

buttons Padding

.ms-wikitoolbar a.ms- Buttons Font color Core.CSS - 3404

toolbar

.ms-wikitoolbar a:hover.ms- Hover state of Text Core.CSS - 3437

toolbar buttons decoration
Font color

.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 Core.CSS - 2480, 2491, 2497

weight,
family,
color
Text
decoration
Padding
Cursor

.ms-partline Separating Background Core.CSS - 1507

line under web
part and
above Action
links

Menu Toolbar - Back to Top -

.ms-menutoolbar Toolbar menu Border Core.CSS - 70, 77

Height
Background

.ms-separator img Separating Height Core.CSS - 1404

line between Width
toolbar options Margin

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 8 of 12

Background
Border

.ms- Toolbar button Margin Core.CSS - 100

menubuttoninactivehover Padding
Background
Line height

.ms-menubuttonactivehover Hover state for Margin Core.CSS - 106

toolbar Padding
buttons Background
Line height
Border
Cursor

.ms-splitbuttonhover Hover state for Background Core.CSS - 202

"New" toolbar Border
button Margin

.ms-splitbutton "New" toolbar Margin Core.CSS - 199

button

.ms-splitbuttontext Wrapping Padding Core.CSS - 196, 207

table cell for
toolbar menu
item

.ms-splitbuttondropdown Separating Padding Core.CSS - 192, 207, 211

line between Margin
'New' text and Border
drop down Cursor
arrow

.ms-listheaderlabel "View" text Font color, Core.CSS - 132, 135

size, family

.ms-viewselector View drop Font size, Core.CSS - 135, 139, 150,

down menu family, 158, 165
weight,
color
Border
Background
Padding
Cursor
Width

.ms-viewselectorhover Hover state for Font size, Core.CSS - 135, 139, 150,
View drop family, 161, 165
down menu weight
Border
Background
Padding
Cursor
Width

Toolbar - Back to Top -

.ms-toolbar Wrapping Font family, Core.CSS - 20, 37, 42 Also used in

table cell for size, color the Mini
toolbar Text Console
decoration
Background
Border

.ms-separator Button Font color, Core.CSS 1399 Also used in

separator size the Mini
Console

Calendar - Back to Top -

.ms-calheader Calendar Background Calendar.CSS - 3

header

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 9 of 12

.ms-cal-navheader Month Background Calendar.CSS - 844

directional Border
arrows Vertical
alignment

.ms-cal-weekday Weekday Background Calendar.CSS - 50

Font color,
weight
Padding

.ms-cal-weekempty Space to the Background Calendar.CSS - 41

left of the Width
week day and Font size
weeks

.ms-cal-topday Day header Background Calendar.CSS - 75

Border
Font
weight,
color
Text
alignment

.ms-cal-topdayover, Hover state for Background Calendar.CSS - 148

Day header Border
Cursor
Text
alignment

.ms-cal-nodataMid Empty days Font family, Calendar.CSS - 215, 220

size
Vertical
alignment
Padding
Border
Background

.ms-cal-nodataBtm2 Bottom area of Padding Calendar.CSS - 220, 227

empty days Border
Background
Vertical
alignment

.ms-cal-week Week header Background Calendar.CSS - 56

Border

.ms-cal-weekselected Hover state for Font color Calendar.CSS - 62, 67

Week header Text
decoration
Border
Cursor
Background

.ms-cal-workitem Work days 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 Calendar.CSS - 252

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 Calendar.CSS - 292

each non work Border
day Background

.ms-cal-topday-today Today marker Background Calendar.CSS - 119, 125, 131,

Border 200
Text
alignment
Font
weight,
color
Text
decoration

.ms-cal-topday-todayover Hover state for Background Calendar.CSS - 136

Today marker Border
Cursor
Text
alignment

.ms-cal-defaultbgcolor All Day Event Background Calendar.CSS - 352

marker in Text
Month View alignment
Font weight
Text
overflow
Padding
Cursor

.ms-cal-defaultbgcolorsel Hover state for Background Calendar.CSS - 362, 390, 393

All Day Event Text
marker in alignment
Month View Font weight
Text
overflow

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 Border Calendar.CSS - 410

All Day Event Width
marker in Day Background
View

.ms-cal-alldayevent Area to right Text Calendar.CSS - 420, 715, 719

of All Day alignment
Event marker Border
in Day View Padding
Height
Vertical
alignment
Text
overflow
Text
decoration
Background
Height
Font family,
size

.ms-cal-wemptycell,.ms-cal- Empty cells for Border Calendar.CSS - 703

wemptycellL other days not Background
marked as an
All Day Event
when an All
Day Event
appears in the
Week View

.ms-cal-tweekitem Appointment Border Calendar.CSS - 756, 764, 770

block in Week Background
View Width
Height
Padding
Vertical
alignment
Font family,
size
Overflow

.ms-cal-tdayitem Appointment Border Calendar.CSS - 779, 787, 793,

block in Day Background 798
View Width
Height
Padding
Vertical
Alignment
Font family,
size
Overflow

Search Center (Advanced Search) - Back to Top -

.ms-ptabarea Containing Margin Portal.CSS - 17 These same

table for tabs styles are
also used by
.ms-ptabcn Selected tab Background Portal.CSS - 20 the Site
Border Directory
Font because in
Padding the style
.ms-ptabcnhover Selected tab Background Portal.CSS - 33 sheet the
hover Border classes are
Font grouped, but

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007
HeatherSolomon.com - SharePoint 2007 CSS Reference Chart Page 12 of 12

Padding the Site

Directory
.ms-ptabcn A:link, Selected tab Text Portal.CSS - 46 does utilize
.ms-ptabcn A:visited, text decoration different
.ms-ptabcnhover A:link, Font class names.
.ms-ptabcnhover A:visited, Color

.ms-ptabcnhover A:hover Selected tab Text Portal.CSS - 52

text hover decoration
Font
Color

.ms-sctabcf Unselected tab Border Portal.CSS - 118

Font
Padding

.ms-ptabcfhover Unselected tab Background Portal.CSS - 71

hover Border
Font
Padding

.ms-ptabcf A:link, Unselected tab Text Portal.CSS - 86

.ms-ptabcf A:visited, text decoration
.ms-ptabcfhover A:link, Font
.ms-ptabcfhover A:visited, Color

.ms-ptabcfhover A:hover Unselected tab Text Portal.CSS - 91

text hover decoration
Font
Color

.ms-sctabrx Line extending Width Portal.CSS - 134

past tabs Background
Border
Font family,
size, style,
weight
Padding
Vertical
alignment
Text
alignment

Site Directory (Site Map) - Back to Top -

See Search Center Site Map tabs See Search See Search Center
Center

.ms-ptabcf Unselected tab Background Portal.CSS - 58

Border
Font
Padding

.ms-ptabrx Line extending Width Portal.CSS - 110

past tabs Background
Border
Font family,
size, style,
weight
Padding
Vertical
alignment
Text
alignment

Copyright © 2007. Heather Solomon.

http://www.heathersolomon.com/content/sp07cssreference.htm 4/1/2007