moss 2007 css reference

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

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



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



.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



.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



.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



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



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



.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


.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


.ms-cal-workitem Work days Font family,

size

Padding




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


.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



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



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



moss 2007 css reference

Documents