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.
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
.ms-globalbreadcrumb {
font-size:8pt;
text-align:right;
background-color:#ebf3ff;
padding:2px 10px 2px 5px;
}
.ms-globalbreadcrumb,.ms-globalbreadcrumb a{
text-decoration:none;
color:#666666;
}
.ms-globalbreadcrumb a:hover{
text-decoration:underline;
color:#000000;
}
Copy to Clipboard
.ms-HoverCellInActive,.ms-SpLinkButtonInActive
Global links
Border
Margin
Font color
Alignment
Background
Core.CSS - 2575
.ms-HoverCellInActive,.ms-SpLinkButtonInActive
{
border:none;
margin:1px;
color:#4c4c4c;
vertical-align:top;
background-color:transparent;
}
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
.ms-HoverCellActive,.ms-SpLinkButtonActive
{
border:#6f9dd9 1px solid;
vertical-align:top;
background-color:#ffbb47;
background-image:url("/_layouts/images/menubuttonhover.gif");
}
Copy to Clipboard
.ms-globalleft
Float table left
Float
Core.CSS - 540
.ms-globalleft{
float:left;
}
Copy to Clipboard
Floats the table containing the Site Map Path
.ms-globallinks
Global link text
Font size, family
Background
Core.CSS - 546, 551
.ms-globallinks{
font-size:8pt;
background:transparent;
font-family:tahoma;
}
.ms-globallinks,.ms-globallinks a{
color:#666666;
text-decoration:none;
font-family:tahoma;
}
Copy to Clipboard
.ms-globalright
Float table right
Float
Core.CSS - 543
.ms-globalright{
float:right;
}
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
td.ms-sbcell{
padding:0px;
padding-left:2px;
white-space:nowrap;
border:solid 1px #7f9db9;
}
Copy to Clipboard
td.ms-sbgo
Search magnify icon
Background
Padding
Core.CSS - 4177
td.ms-sbgo{
background-color:#e9f2fd;
padding-left:3px;
padding-right:3px;
padding-bottom:1px;
padding-top:1px;
}
Copy to Clipboard
.ms-sbLastcell
Empty cell to the right of the search area
Width
Core.CSS - 4184
.ms-sbLastcell,.ms-rightbodysectionsearchbox{
width:100%;
}
Copy to Clipboard
.ms-sblink
Link formatting
Border
Font family, size, color
Text decoration
Padding
Core.CSS - 4162, 4166, 4173
td.ms-sblink{
padding-right:14px;
border:none;
}
.ms-sblink a:link,.ms-sblink a:visited{
font-family:Tahoma;
font-size:8pt;
color:#666666;
text-decoration:none;
padding-left:4px;
}
.ms-sblink a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-sbplain
Formatting for Search terms text box
Font family, size
Border
Core.CSS - 4153
.ms-sbplain{
font-family:Tahoma;
font-size:8pt;
border:none;
}
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
td.ms-sbscopes{
border:none !important;
}
Copy to Clipboard
Note this style uses ! IMPORTANT.
.ms-sbtable
Wrapping table around Search
Font color, family, size, style, weight
Core.CSS - 4116
.ms-sbtable{
color:#000000;
font-family:Verdana;
font-size:0.7em;
font-style:normal;font-weight:normal
}
Copy to Clipboard
.ms-sbtable-ex
Wrapping table around Search
Width
Border
Margin
Core.CSS - 4128
.ms-sbtable-ex{
width:100%;
border-collapse:collapse;
margin-top:2px;
margin-left:2px;
}
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 through when a
tab is not in the horizontal space in the top navigation.
Background image, position, repeat, color
Padding
Core.CSS - 518
.ms-bannerContainer{
background-image:url("/_layouts/images/siteTitleBKGD.gif");
background-position:right top;
background-repeat:repeat-y;
background-color:#FFFFFF;
padding-right:10px;
padding-left:5px;
}
Copy to Clipboard
.ms-topnavContainer
Wrapping container around top navigation, inside of ms-bannerContainer - Wraps only the tabs.
Border
Core.CSS - 639
.ms-topnavContainer{
border:none;
border-left:solid 1px #c2dcff;
}
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
.ms-topnav{
border:solid 1px #c2dcff;
border-left:solid 1px #ffffff;
border-bottom:none;
background-image:url("/_layouts/images/topnavunselected.gif");
background-repeat:repeat-x;
font-family:Tahoma;
font-size:8pt;
background-color:#e2efff;
color:#3764a0;
}
.ms-topnav a{
display:block;
white-space:nowrap;
padding:1px 8px 0px 8px;
height:18px;
}
Copy to Clipboard
.ms-topnavselected
Formatting for selected navigation
Font color, weight
Background
Border
Core.CSS - 660, 670
.ms-topnavselected{
color:#003399;
background:url("/_layouts/images/topnavselected.gif");
background-repeat:repeat-x;
font-weight:bold;
border:solid 1px #79a7e3;
border-bottom-width:0px;
border-left:solid 1px #e3efff;
background-color:#6593cf;
}
.ms-topnavselected a{
color:#003399;
}
Copy to Clipboard
.ms-topNavHover
Hover state
Background
Border
Font color
Core.CSS - 673, 681
.ms-topNavHover{
background-image:url("/_layouts/images/topnavhover.gif");
background-color:#ffe6a0;
border:solid 1px #c2a770;
border-left:solid 1px #ffffff;
border-bottom-width:0px;
color:#000000;
}
.ms-topNavHover a{
color:#000000;
}
Copy to Clipboard
.ms-topNavFlyOuts
Drop down menus
Background
Font family, size, color
Display
Width
Padding
Core.CSS - 692, 697
.ms-topNavFlyOuts{
background-color:#F2F8FF;
font-family:Tahoma;
font-size:8pt;
}
.ms-topNavFlyOuts a{
display:block;
*width:120px;
min-width:120px;
color:#3764a0;
padding:4px 8px 4px 8px;
}
Copy to Clipboard
.ms-topNavFlyOutsHover
Hover state for drop down menus
Background
Font color
Core.CSS - 704
.ms-topNavFlyOutsHover{
background-color:#ffe6a0;
color:#000000;
}
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
.ms-siteaction,.ms-siteaction a{
font:8pt tahoma;
font-weight:bold;
color:#666666;
text-decoration:none;
}
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
.ms-siteactionsmenu div div div{
background-image:url("/_layouts/images/siteactionsmenugrad.gif");
background-repeat:repeat-x;
border-top:1px solid #6593cf;
border-left:1px solid #6593cf;
border-right:1px solid #6593cf;
background-color:#6593cf;
padding:1px 4px 3px 10px;
}
.ms-siteactionsmenu div div div a{
color:#FFFFFF;
font-weight:bold;
}
Copy to Clipboard
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover
Hover state
Background
Border
Core.CSS - 623
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{
background-image:url("/_layouts/images/siteactionsmenuhovergrad.gif");
border-top:1px solid #89724f;
border-left:1px solid #89724f;
border-right:1px solid #89724f;
background-color:#ffa521;
}
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 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
.ms-pagemargin{
background-color:#83b0ec;
background-image:url("/_layouts/images/navshape.jpg");
background-repeat:no-repeat;
background-position:-143px 0px;
height:100%;
}
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
.ms-quicklaunchheader{
padding:2px 6px 4px 6px;
font-weight:normal;
color:#003399;
background-image:url("/_layouts/images/quickLaunchHeader.gif");
background-repeat:repeat-x;
background-color:#d6e8ff;
border-left:solid 1px #f2f8ff;
font-size:8pt;
}
.ms-quicklaunchheader a,.ms-unselectednav a{
color:#003399;
text-decoration:none;
}
.ms-quicklaunchheader a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-navheader
Navigation headers
Background
Border
Padding
Font weight, color
Text decoration
Core.CSS - 744, 756, 851, 854, 859
.ms-quicklaunch table.ms-navheader td,.ms-navheader2 td,.ms-quicklaunch span.ms-navheader{
background-color:#d6e8ff;
border-top:solid 1px #f2f8ff;
border-left:solid 1px #f2f8ff;
padding:1px 4px 4px 4px;
}
.ms-quicklaunch span.ms-navheader{
background-color:#d6e8ff;
border-top:1px solid #add1ff;
border-left:solid 1px #f2f8ff;
border-bottom:1px solid #add1ff;
padding:1px 6px 3px 6px;
}
table.ms-navheader td{
background-image:none;
}
.ms-navheader a,.ms-navheader2 a{
font-weight:bold;
color:#003399;
text-decoration:none;
}
.ms-navheader a:hover,.ms-navheader2 a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-selectednavheader
Selected view state for navigation headers
Width
Background
Border
Padding
Font weight, color
Text decoration
Core.CSS - 766, 800, 811, 816
.ms-quicklaunch table.ms-selectednavheader td{
width:100%;
background-color:#fff699;
}
.ms-quicklaunch table.ms-selectednavheader td{
width:100%;
background-color:#ffe6a0;
background-image:url("/_layouts/images/selectednav.gif");
background-repeat:repeat-x;
padding-top:2px;
padding-bottom:2px;
border-top:solid 1px #ffffff;
border-left:solid 1px #ffffff;
padding:1px 6px 3px 6px;
}
.ms-selectednavheader a{
font-weight:bold;
color:#000000;
text-decoration:none;
}
.ms-selectednavheader a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-navitem
Sub navigation items under navigation headers
Background
Padding
Font family, color
Text decoration
Core.CSS - 820, 863, 867
table.ms-navitem td,span.ms-navitem{
background-image:url("/_layouts/images/navBullet.gif");
background-repeat:no-repeat;
background-position:left top;
padding:3px 6px 4px 16px;
font-family:tahoma;
}
.ms-navItem a{
color:#003399;
text-decoration:none;
}
.ms-navItem a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
Portal.CSS - 782, 786, 790, 794
.ms-navitem a:hover {
color:#000000
text-decoration:underline;
}
.ms-navitem a:visited {
color:#3966bf;
text-decoration: none;
}
.ms-navitem a:active {
color:#000000
text-decoration:underline;
}
.ms-navitem a {
color:#003399
text-decoration:none;
}
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
.ms-quicklaunch table.ms-selectednav{
border:solid 1px #d2b47a;
background-image:url("/_layouts/images/selectednav.gif");
background-repeat:repeat-x;
background-color:#ffe6a0;
margin:2px;
margin-bottom:0;
width:97%;
}
.ms-quicklaunch table.ms-selectednav td{
background:transparent url("/_layouts/images/selectednavbullet.gif");
background-repeat:no-repeat;
background-position:top left;
border:solid 1px #ffffff;
padding:0px 4px 1px 12px;
margin:0px;
}
table.ms-selectednav td a.ms-selectednav{
background:none;
color:#000000;
}
.ms-selectednav,.ms-GRSortFilter{
border:1px solid #2353b2;
background:#fff699;
padding-top:1px;
padding-bottom:2px;
}
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
.ms-quicklaunch .ms-treeviewouter table td{
border-top:none;
}
div.ms-treeviewouter div{
border-top:solid 1px #add1ff;
}
div.ms-treeviewouter div div{
border:none;
}
.ms-treeviewouter td.ms-navitem{
border-left:2px solid #f2f8ff;
}
.ms-treeviewouter a.ms-navitem{
padding:0px 1px 0px 1px;
}
Copy to Clipboard
div.ms-treeviewouter div
Top border of Tree View Pane
Border
Core.CSS - 750
div.ms-treeviewouter div{
border-top:solid 1px #add1ff;
}
Copy to Clipboard
.ms-tvselected
Selected navigation item in Tree View
Background
Font color
Core.CSS - 881, 884
.ms-tvselected{
background-color:#ffda8a;
}
.ms-tvselected a{
color:#000000;
}
Copy to Clipboard
.ms-recyclebin
Recycle Bin
Background
Width
Border
Padding
Font weight, color
Text decoration
Core.CSS - 893, 900, 905
table.ms-recyclebin td{
background-color:#f2f8ff;
width:100%;
border-top:solid 1px #ffffff;
border-left:solid 1px #ffffff;
padding:3px 5px 7px 3px;
}
table.ms-recyclebin td a{
font-weight:bold;
color:#008800;
text-decoration:none;
}
table.ms-recyclebin td a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-quicklaunchouter
Bottom border of Quick Launch pane and margin around pane
Border
Margin
Core.CSS - 874, 878
.ms-quicklaunchouter{
border-bottom:solid 1px #83b0ec;
border-right:solid 1px #83b0ec;
}
.ms-quicklaunchouter{
margin:0px 1px 2px 1px;
}
Copy to Clipboard
.ms-quickLaunch
Quick Launch pane formatting and top and side borders around pane
Border
Font
Line-height
Background
Core.CSS - 909
.ms-quickLaunch{
border:solid 1px #6f9dd9;
border-bottom:solid 1px #6f9dd9;
font-size:8pt;
font-family:tahoma;
line-height:10pt;
background-color:#f2f8ff;
}
Copy to Clipboard
.ms-quickLaunch table td
Container for sub items
Border
Core.CSS - 738
.ms-quicklaunch table td{
border-top:1px solid #add1ff;
}
Copy to Clipboard
Default code 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
.ms-picker-header{
font-weight:normal;
background-image:url("/_layouts/images/quickLaunchHeader.gif");
background-repeat:repeat-x;
background-color:#d6e8ff;
}
Copy to Clipboard
.ms-picker-dayheader
Days of the week
Font family, size, color, weight
Text alignment
Border
Padding
DatePicker.CSS - 17
.ms-picker-table .ms-picker-dayheader{
font-family:tahoma;
font-size:8pt;
color:#727272;
text-align:center;
border-bottom:solid 1px #c2dcff;
border-top:solid 1px #add1ff;
padding:2px 0px 3px 0px;
font-weight:normal;
}
Copy to Clipboard
.ms-picker-daycenter
Date boxes
Text alignment
Font size, family, color
Border
Height
Text decoration
DatePicker.CSS - 96, 105, 111, 119
.ms-picker-today,.ms-picker-dayselected,.ms-picker-daycenter,.ms-picker-daycenterOn{
height:22px;
}
table.ms-picker-table td.ms-picker-dayother,table.ms-picker-table td.ms-picker-daycenterOn,table.ms-picker-table td.ms-picker-daycenter{
text-align:center;
font-size:8pt;
font-family:tahoma;
border:solid 1px #f2f8ff;
}
.ms-picker-daycenter a,.ms-picker-today a,.ms-picker-dayselected a{
color:#003399;
text-decoration:none;
}
.ms-picker-dayother a:hover,.ms-picker-daycenterOn a,.mspicker-daycenterOn a:hover{
color:#000000;
text-decoration:underline;
}
Copy to Clipboard
.ms-picker-daycenterOn
Hover state for Date boxes
Background
Height
DatePicker.CSS - 96, 123
.ms-picker-today,.ms-picker-dayselected,.ms-picker-daycenter,.ms-picker-daycenterOn{
height:22px;
}
.ms-picker-table .ms-picker-daycenterOn{
background-color:#FFFFFF;
}
Copy to Clipboard
.ms-picker-dayselected
Current date
Text alignment
Font size, family
Background
Border
DatePicker.CSS - 126
table.ms-picker-table td.ms-picker-dayselected{
text-align:center;
font-size:8pt;
font-family:tahoma;
background-color:#ffdf88;
border-style:solid;
border-width:1px;
border-color:#f2f8ff;
}
Copy to Clipboard
.ms-picker-footer
Picker footer
Border
Font family, size, color
Padding
Text decoration
DatePicker.CSS - 180, 187, 190
table.ms-picker-table td.ms-picker-footer{
border-top:1px solid #c2dcff;
font-family:Tahoma;
font-size:8pt;
color:#4c4c4c;
padding:5px;
}
.ms-picker-footer a{
color:#003399;
}
.ms-picker-footer a:hover{
color:#000000;
text-decoration:underline;
}
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
.ms-titlearealeft
{
background-color:#d6e8ff;
}
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
TD.ms-titleareaframe,Div.ms-titleareaframe,.ms-pagetitleareaframe,.ms-mwspagetitleareaframe,.ms-consoletitleareaframe{
background-image:url("/_layouts/images/pageTitleBKGD.gif");
background-repeat:repeat-x;
background-position:left top;
background-color:#d6e8ff;
text-align:center;
}
Copy to Clipboard
.ms-pagetitleareaframe table
Wrapping table cell around page title
Background image, repeat, position, color
Text alignment
Core.CSS - 1130
.ms-pagetitleareaframe table{
background-image:url("/_layouts/images/topshape.jpg");
background-repeat:no-repeat;
background-position:332px 4px;
height:54px;
}
Copy to Clipboard
.ms-pagetitle
Page title text
Font color, family, size, weight
Margin
Core.CSS - 1256, 1263, 1269
.ms-pagetitle{
color:#000000;
font-family:verdana;
font-size:16pt;
margin:0px 0px 4px 0px;
font-weight:normal;
}
.ms-pagetitle a{
text-decoration:none;
color:#000000;
margin:0;
font-weight:normal;
}
.ms-pagetitle a:hover{
}
Copy to Clipboard
Content Area
General
- Back to Top -
.ms-bodyareaframe
Content container
Vertical alignment
Height
Width
Background
Border
Padding
Core.CSS - 1238, 1247
.ms-bodyareaframe,.ms-viewareaframe{
vertical-align:top;
height:100%;
width:100%;
background-color:#ffffff;
border-top:1px solid #6f9dd9;
border-right:1px solid #6f9dd9;
border-left:1px solid #6f9dd9;
}
.ms-bodyareaframe{
padding:10px;
}
Copy to Clipboard
.ms-listdescription
List/library description
Font color, family
Background
Padding
Border
Core.CSS 1631
.ms-listdescription{
color:#4c4c4c;
font-family:tahoma;
background:#f8f8f8;
padding:2px 6px 4px 6px;
border-bottom:1px solid #6f9dd9;
}
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
.ms-formtable .ms-formbody,.ms-formtable .ms-formbodysurvey{
line-height:1.3em;
}
.ms-formbody{
font-family:verdana;
font-size:.7em;
vertical-align:top;
background:#ebf3ff;
border-top:1px solid #d8d8d8;
padding:3px 6px 4px 6px;
}
.ms-formbody FONT{
line-height:normal
}
Copy to Clipboard
OWSNOCR.CSS - 33, 43
.ms-formtable .ms-formbody{
line-height:1.3em;
}
.ms-formbody{
text-align:left;
font-family:verdana;
font-size:.7em;
}
Copy to Clipboard
.ms-formlabel
Form label formatting
Text alignment
Font family, size, color, weight
Border
Padding
Core.CSS - 284
.ms-formlabel{
text-align:left;
font-family:verdana;
font-size:.7em;
border-top:1px solid #d8d8d8;
padding-top:3px;
padding-right:8px;
padding-bottom:6px;
color:#525252;
font-weight:bold;
}
Copy to Clipboard
OWSNOCR.CSS - 22
.ms-formlabel{
text-align:left;
font-family:verdana;
font-size:.7em;
font-weight:normal;
color:#808080;
}
Copy to Clipboard
.ms-formline
Bottom line under last form fields
Border
Padding
Core.CSS - 352
.ms-formline{
border-top:1px solid #c4c4c4;
padding-right:8px;
padding-left:8px;
}
Copy to Clipboard
.ms-authoringcontrols
Background for cells with form fields on administrative pages
Background
Font family, size, color
Core.CSS - 1413
.ms-authoringcontrols
{
background-color:#ebf3ff;
font-family:tahoma;
font-size:8pt;
color:#525252;
}
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
.ms-propertysheet{
font-family:verdana;
font-size:.7em;
text-align:left;
color:#4c4c4c;
}
.ms-propertysheet th{
font-family:verdana;
font-size:8pt;
color:#4c4c4c;
font-weight:normal;
}
.ms-propertysheet a{
text-decoration:none;
color:#3966bf;
}
.ms-propertysheet a:hover{
text-decoration:underline;
color:#000000;
}
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 decoration
Background
Core.CSS - 556, 561
.ms-pagebreadcrumb{
padding:2px 3px 3px 11px;
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
}
.ms-pagebreadcrumb,.ms-pagebreadcrumb a{
font-size:8pt;
background-color:#ebf3ff;
color:#666666;
text-decoration:none;
}
Copy to Clipboard
.removeMargins
Adjusts margins around breadcrumb
Margins
PageLayouts.CSS - 105
.removeMargins
{
margin-top:-11px;
margin-left:-11px;
margin-right:-10px;
}
Copy to Clipboard
.breadcrumb
Page level breadcrumbs used on publishing pages
Font Padding Border Margin
Band.CSS - 47, 60, 67
.breadcrumb
{
font-family: tahoma;
color: #656b77;
clear:both;
font-size:9pt;
font-family: tahoma;
padding-left:7px;
padding-bottom:2px;
padding-top:4px;
border-bottom:1px #CCCCCC solid;
margin-bottom:4px;
}
.breadcrumb a, .breadcrumb:active, .breadcrumb a:active
{
padding-left:0px;
padding-right: 0px;
text-decoration:none;
color: #656b77;
}
.breadcrumb a:hover
{
text-decoration:underline;
}
Copy to Clipboard
.breadcrumbCurrent
Current location in page level breadcrumbs used on publishing pages
Font
Band.CSS - 71
.breadcrumbCurrent
{
font-weight:bold;
}
Copy to Clipboard
Page Edit Toolbar (Edit Console)
- Back to Top -
.ms-consolemptablerow
Wrapper around Edit Toolbar - master table cell
Background
Core.CSS - 3203
.ms-consolemptablerow{
background-color:#79a7e3;
}
Copy to Clipboard
.ms-consoletitleareaframe
Edit Toolbar container - sub table cell
Background
Text alignment
Padding
Width
Core.CSS - 1120, 1139, 1142
TD.ms-titleareaframe,Div.ms-titleareaframe,.ms-pagetitleareaframe,.ms-mwspagetitleareaframe,.ms-consoletitleareaframe{
background-image:url("/_layouts/images/pageTitleBKGD.gif");
background-repeat:repeat-x;
background-position:left top;
background-color:#d6e8ff;
text-align:center;
}
.ms-titleareaframe table td.ms-titlearea,.ms-areaseparator table td.ms-titlearea,.ms-pagetitleareaframe table td.ms-titlearea,.ms-consoletitleareaframe{
padding:7px 0px 1px 0px;
}
.ms-consoletitleareaframe
{
width:8px;
}
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
.ms-consoletitleareaframebottom
{
background-color:#d6e8ff;
text-align:center;
padding:0px 0px 0px 0px;
}
Copy to Clipboard
This is the bottom of the sides of the toolbar
.ms-consoleframe
Edit Toolbar container - sub sub table
Border
Core.CSS - 3210, 3223
.ms-consoleframe,.ms-consolestatusframe{
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-style:solid;
}
.ms-consoleframe{
border-top-width:1px;
border-color:#83b0ec;
}
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
.ms-consoleframe,.ms-consolestatusframe{
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-style:solid;
}
.ms-consolestatusframe{
border-top-width:0px;
background-color:#f6fdfd;
background-repeat:repeat-x;
border-color:#FFFFFF;
}
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
td.ms-consolestatusmajorframe,td.ms-consolestatusminorframe,td.ms-consolestatuscheckoutframe{
background-repeat:repeat-x;
}
.ms-consolestatuscheckoutframe,.ms-consoleminiframe{
background-color:#fff8b2;
background:url('/_layouts/images/cnsugrdn.gif');
}
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
.ms-consolestatusminorframe{
background-color:#e3efff;
background:url('/_layouts/images/cnsugrdn.gif');
}
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
.ms-consolehr{
background-color:#CDCDCD;
height:1px;
}
Copy to Clipboard
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 -
.ms-WPSelected
Edit view
Border
Core.CSS - 2503
.ms-WPSelected
{
border:#ffbb77 3px dashed;
}
Copy to Clipboard
.ms-WPHeader
Header area
Border
Core.CSS - 2664
.ms-WPHeader TD{
border-bottom:1px solid #4e7cb7;
border-collapse:collapse;
}
Copy to Clipboard
.ms-WPTitle
Title text
Font weight, family, color
Text decoration
Padding
Cursor
Core.CSS - 2480, 2491, 2497
.ms-WPTitle
{
font-weight:bold;
font-family:tahoma,sans-serif;
color:#4c4c4c;
padding-left:3px;
padding-right:7px;
padding-top:2px;
padding-bottom:2px;
font-size:10pt;
}
.ms-WPTitle A:link,.ms-WPTitle A:visited
{
color:#4c4c4c;
text-decoration:none;
cursor:pointer;
}
.ms-WPTitle A:hover
{
color:#000000;
text-decoration:underline;
cursor:pointer;
}
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
.ms-HoverCellActiveDark
{
background-image:url("/_layouts/images/menubuttonhover.gif");
border:solid 1px #868686;
background-color:#ffbb47;
vertical-align:top;
}
Copy to Clipboard
.ms-WPBody
Body content of web parts
Font size, family, color, decoration
Core.CSS - 2507, 2512, 2516, 2521
.ms-WPBody
{
font-size:8pt;
font-family:verdana,arial,helvetica,sans-serif;
}
.ms-WPBody TABLE,.ms-TPBody TABLE
{
font-size:1em;
}
.ms-WPBody A:link,.ms-WPBody A:visited
{
color:#003399;
text-decoration:none;
}
.ms-WPBody A:hover
{
color:#000000;
text-decoration:underline;
}
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
.ms-WPBorder,.ms-WPBorderBorderOnly
{
border-color:#9ac6ff;
border-width:1px;
border-style:solid;
}
.ms-WPBorder
{
border-top-width:0px;
}
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 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
.link-item, .link-item a, .link-item a:link{
font-family:tahoma;
font-size:8pt;
color: #003399;
text-decoration:none;
}
.link-item a:visited, .link-item a:active{
color: #4167AF;
text-decoration:none;
}
.link-item a:hover{
color: #000000;
text-decoration:underline;
}
Copy to Clipboard
.bullet
Bullets used in web part content
Border
Vertical alignment
Background
Padding
Controls.CSS - 117
.bullet{
border-style: none;
border-color: inherit;
border-width: 0;
vertical-align:top;
background-image:url("/_layouts/images/lstbulet.gif");
background-repeat:no-repeat;
background-position:left;
padding-left:10px;
padding-right: 0px;
}
Copy to Clipboard
.description
Descriptions within web parts
Font size, family, color
Controls.CSS - 91
.description {
font-family:tahoma;
font-size:8pt;
color: #4c4c4c;
}
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
.ms-vb,.ms-vb2,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vb-tall,.ms-pb,.ms-pb-selected
{
vertical-align:top;
}
.ms-vb a,.ms-vb2 a,.ms-GRStatusText a,.ms-vb-user a,.ms-disc a{
color:#003399;
text-decoration:none;
}
.ms-vb a:hover,.ms-vb2 a:hover,.ms-vb-user a:hover,.ms-disc a:hover{
color:#000000;
text-decoration:underline;
}
.ms-vb a:visited,.ms-vb2 a:visited,.ms-GRStatusText a:visited,.ms-vb-user a:visited,.ms-disc a:visited{
color:#000066;
text-decoration:none;
}
.ms-vb a:visited:hover,.ms-vb2 a:visited:hover,.ms-vb-user a:visited:hover,.ms-disc a:visited:hover{
color:#000000;
text-decoration:underline;
}
th .ms-vb,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,th.ms-vh2-nograd,th.ms-vh2-nograd-icon{
color:#b2b2b2;
font-size:8pt;
font-family:tahoma,sans-serif;
}
th .ms-vb a,.ms-vh2-nofilter a,.ms-vh2-nofilter-icon a{
color:#808080;
}
Copy to Clipboard
Proceed carefully with changes to ms-vb, the style is used in multiple places and it's properties are grouped with 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
.ms-rteCustom-ArticleTitle
{
font-weight: bold;
font-family: Arial;
font-size: 14pt;
color: #015263;
text-transform: capitalize;
}
Copy to Clipboard
.ms-rteCustom-ArticleHeadLine
Article Headline in rich text fields
Font size, weight, family, color
HtmlEditorCustomStyles.CSS - 83
.ms-rteCustom-ArticleHeadLine
{
font-size: 12pt;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #01778F;
}
Copy to Clipboard
.ms-rteCustom-ArticleByline
Article Byline in rich text fields
Font size, weight, family, color
HtmlEditorCustomStyles.CSS - 76
.ms-rteCustom-ArticleByline
{
font-family: Arial;
font-style: italic;
font-size: 10pt;
color: #7F7F7F;
}
Copy to Clipboard
.ms-addnew
Link to add new list items
Font weight, family, size, color, decoration Padding
Core.CSS - 1882, 1889, 1893
a.ms-addnew{
font-weight:normal;
font-family:verdana;
font-size:8pt;
color:#003399;
text-decoration:none;
}
a.ms-addnew:Hover{
color:#000000;
text-decoration:underline;
}
td.ms-addnew{
padding-left:1px;
padding-right:7px;
}
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
.ms-partline
{
background-color:#add1ff;
}
Copy to Clipboard
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
.ms-separator img
{
height:16px;
width:1px;
margin:0px 1px 0px 1px;
background:#9ac6ff;
border-bottom:1px solid #f2f8ff;
border-right:1px solid #f2f8ff;
}
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
.ms-splitbuttonhover{
background-image:url("/_layouts/images/menubuttonhover.gif");
border-collapse:collapse;
margin:0px 1px 0px 1px;
}
Copy to Clipboard
.ms-splitbutton
"New" toolbar button
Margin
Core.CSS - 199
.ms-splitbutton{
margin:0px 1px 0px 1px;
}
Copy to Clipboard
.ms-splitbuttontext
Wrapping table cell for toolbar menu item
Padding
Core.CSS - 196, 207
.ms-menutoolbar .ms-splitbuttontext{
padding:0px 6px 1px 8px;
}
.ms-splitbuttonhover .ms-splitbuttondropdown,.ms-splitbuttonhover .ms-splitbuttontext{
border:1px solid #6f9dd9;
cursor:pointer;
}
Copy to Clipboard
.ms-splitbuttondropdown
Separating line between 'New' text and drop down arrow
Padding
Margin
Border
Cursor
Core.CSS - 192, 207, 211
.ms-menutoolbar .ms-splitbuttondropdown{
padding:0px 2px 1px 1px;
margin:1px;
}
.ms-splitbuttonhover .ms-splitbuttondropdown,.ms-splitbuttonhover .ms-splitbuttontext{
border:1px solid #6f9dd9;
cursor:pointer;
}
.ms-splitbuttonhover .ms-splitbuttondropdown{
padding:0px 1px 0px 1px;
}
Copy to Clipboard
.ms-listheaderlabel
"View" text
Font color, size, family
Core.CSS - 132, 135
.ms-listheaderlabel{
color:#204d89;
}
.ms-listheaderlabel,.ms-viewselector,.ms-viewselectortext,.ms-viewselectorhover{
font-size:8pt;
font-family:tahoma;
}
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
.ms-listheaderlabel,.ms-viewselector,.ms-viewselectortext,.ms-viewselectorhover{
font-size:8pt;
font-family:tahoma;
}
.ms-menutoolbar td td.ms-viewselector,.ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselector,.ms-toolbar td td.ms-viewselectorhover,.ms-authoringcontrols td td.ms-viewselector,.ms-authoringcontrols td td.ms-viewselectorhover,td.ms-viewselector{
border:solid 1px #d2b47a;
background-image:url("/_layouts/images/selectednav.gif");
background-repeat:repeat-x;
background-color:#ffe6a0;
font-weight:bold;
padding:0px;
}
div.ms-viewselector,div.ms-viewselectorhover{
border:solid 1px #ffffff;
padding:1px 12px 1px 4px;
background-image:url("/_layouts/images/menudarkspaced.gif");
background-repeat:no-repeat;
background-position:center right;
cursor:pointer;
}
div.ms-viewselector a{
color:#000000;
}
td.ms-viewselector,td.ms-viewselectorhover{
width:125px;
}
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
.ms-listheaderlabel,.ms-viewselector,.ms-viewselectortext,.ms-viewselectorhover{
font-size:8pt;
font-family:tahoma;
}
.ms-menutoolbar td td.ms-viewselector,.ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselector,.ms-toolbar td td.ms-viewselectorhover,.ms-authoringcontrols td td.ms-viewselector,.ms-authoringcontrols td td.ms-viewselectorhover,td.ms-viewselector{
border:solid 1px #d2b47a;
background-image:url("/_layouts/images/selectednav.gif");
background-repeat:repeat-x;
background-color:#ffe6a0;
font-weight:bold;
padding:0px;
}
div.ms-viewselector,div.ms-viewselectorhover{
border:solid 1px #ffffff;
padding:1px 12px 1px 4px;
background-image:url("/_layouts/images/menudarkspaced.gif");
background-repeat:no-repeat;
background-position:center right;
cursor:pointer;
}
.ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselectorhover,.ms-authoringcontrols td td.ms-viewselectorhover{
background-image:url("/_layouts/images/menubuttonhover.gif");
background-color:#ffbb47;
}
td.ms-viewselector,td.ms-viewselectorhover{
width:125px;
}
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
.ms-toolbar,.ms-viewtoolbar,.ms-formtoolbar,.ms-toolbarContainer{
font-family:verdana;
font-size:8pt;
text-decoration:none;
color:#003399;
}
table.ms-toolbar,table.ms-viewtoolbar,.ms-toolbarContainer{
background-image:url("/_layouts/images/toolgrad.gif");
background-repeat:repeat-x;
background-color:#d6e8ff;
}
table.ms-toolbar,.ms-toolbarContainer{
border:1px solid #83b0ec;
border-collapse:collapse;
}
Copy to Clipboard
Also used in the Mini Console
.ms-separator
Button separator
Font color, size
Core.CSS 1399
.ms-separator
{
color:#83b0ec;
font-size:10pt;
}
Copy to Clipboard
Also used in the Mini Console
Calendar
- Back to Top -
** 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
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
Border
Vertical alignment
Background
Calendar.CSS - 235, 240
.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
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 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
.ms-ptabarea, .ms-sctabarea {
margin-top: 0px;
}
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
.ms-ptabcn, .ms-sctabcn {
background: url("/_layouts/images/PortalTabSelected.gif");
background-color: #CAE6F4;
border-top: solid 1px #83b0ec;
border-left: solid 1px #83b0ec;
border-right: solid 1px #83b0ec;
border-bottom: solid 1px #83b0ec;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 10px; color: #000000; vertical-align: middle;
}
Copy to Clipboard
.ms-ptabcnhover
Selected tab hover
Background
Border
Font
Padding
Portal.CSS - 33
.ms-ptabcnhover, .ms-sctabcnhover {
background: url("/_layouts/images/PortalTabHover.gif");
background-color: #fae8d4;
border-top: solid 1px #9e8255;
border-right: solid 1px #9e8255;
border-left: solid 1px #9e8255;
border-bottom: solid 1px #6593cf;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 10px; color: #000000; vertical-align: middle;
}
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
.ms-ptabcn A:link, .ms-ptabcn A:visited,.ms-ptabcnhover A:link, .ms-ptabcnhover A:visited, .ms-sctabcn A:link, .ms-sctabcn A:visited,.ms-sctabcnhover A:link, .ms-sctabcnhover A:visited {
text-decoration: none;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-style: normal;
}
Copy to Clipboard
.ms-ptabcnhover A:hover
Selected tab text hover
Text decoration
Font
Color
Portal.CSS - 52
.ms-ptabcnhover A:hover, .ms-sctabcnhover A:hover {
text-decoration: none;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-style: normal;
}
Copy to Clipboard
.ms-sctabcf
Unselected tab
Border
Font
Padding
Portal.CSS - 118
.ms-sctabcf {
border-bottom: solid 1px #97B4E9;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 11px; color: #7A7A7A; vertical-align: middle;
}
Copy to Clipboard
.ms-ptabcfhover
Unselected tab hover
Background
Border
Font
Padding
Portal.CSS - 71
.ms-ptabcfhover, .ms-sctabcfhover {
background: url("/_layouts/images/PortalTabHover.gif");
background-repeat: repeat-x;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 10px;
color: #7f7f7f; vertical-align: middle;
background-color: #fae8d4;
border-top: solid 1px #9e8255;
border-right: solid 1px #9e8255;
border-left: solid 1px #9e8255;
border-bottom: solid 1px #6593cf;
}
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
.ms-ptabcf A:link, .ms-ptabcf A:visited, .ms-ptabcfhover A:link, .ms-ptabcfhover A:visited, .ms-sctabcf A:link, .ms-sctabcf A:visited, .ms-sctabcfhover A:link, .ms-sctabcfhover A:visited {
text-decoration: none; color: #7f7f7f;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
}
Copy to Clipboard
.ms-ptabcfhover A:hover
Unselected tab text hover
Text decoration
Font
Color
Portal.CSS - 91
.ms-ptabcfhover A:hover, .ms-sctabcfhover A:hover {
text-decoration: none;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #7f7f7f;
font-style: normal;
}
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
.ms-sctabrx {
width: 100%; border-color: #97B4E9; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px;
font-family: Verdana, Arial, Helvetica;
font-size: 0.7em;
font-style: normal; font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 4px; padding-right: 4px; color: #7A7A7A; vertical-align: middle; text-align: left;
}
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
Font
Padding
Portal.CSS - 58
.ms-ptabcf {
background: url("/_layouts/images/topnavdivider.gif");
background-repeat: repeat-y;
background-position : left;
border-top: solid 1px #FFFFFF;
border-left: solid 1px #FFFFFF;
border-bottom: solid 1px #6593cf;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 10px; padding-right: 11px; color: #7f7f7f; vertical-align: middle;
}
Copy to Clipboard
.ms-ptabrx
Line extending past tabs
Width
Background
Border
Font family, size, style, weight
Padding
Vertical alignment
Text alignment
Portal.CSS - 110
.ms-ptabrx {
width: 100%; background-color: #FFFFFF; border-color: #83b0ec; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-left-width: 0px;
font-family: Tahoma, Verdana, Arial, Helvetica;
font-size: 0.7em;
font-style: normal;
font-weight: normal;
padding-bottom: 2px; padding-top: 2px; padding-left: 4px; padding-right: 4px; color: #7f7f7f; vertical-align: middle; text-align: left;
}
Copy to Clipboard
Blog
- Back to Top -
.ms-PostWrapper
Wrap around each post, includes date, title and footer
Font color
Width
Core.CSS - 3510
.ms-PostWrapper,.ms-CommentsWrapper,.ms-blogrss
{
color:#4c4c4c;
width:629px;
}
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
h3.ms-PostDate
{
font-size:8pt;
color:#7f7f7f;
margin:0;
border-bottom:solid 1px #6f9dd9;
padding-bottom:5px;
}
Copy to Clipboard
.ms-PostTitle
Post title
Font size, color
Border
Padding
Position
Text decoration
Core.CSS - 3531, 3536, 3541
.ms-PostTitle{
font-size:16pt;
border-top:solid 1px #e3efff;
padding-top:6px;
}
.ms-PostTitle span{
position:relative;
left:-2px;
right:auto;
}
.ms-PostTitle a
{
color:#4c4c4c;
text-decoration:none;
}
Copy to Clipboard
.ms-PostBody
Post body copy
Font size, color
Line height
Padding
Margin
Core.CSS - 3555, 3563, 3566
.ms-PostBody
{
color:#4c4c4c;
font-size:8pt;
line-height:1.7em;
padding-top:6px;
padding-bottom:12px;
}
.ms-PostBody a{
color:#0000CC;
}
.ms-PostBody p{
margin:0 0 1em 0;
}
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
.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
.ms-CommentBody{
color:#4c4c4c;
font-size:8pt;
line-height:1.7em;
padding-bottom:12px;
padding-top:6px;
}
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
Height
Padding
Background
Core.CSS - 3610, 3616
Copy to Clipboard
.ms-blogAdminLinks
Admin links that show to right of blog posts
List style Margin Padding Background Font color
Core.CSS - 3493, 3499, 3507
ul.ms-blogAdminLinks
{
list-style:none;
margin:4px 10px 0 0;
padding:0 0 0 4px;
}
ul.ms-blogAdminLinks li
{
background:transparent url(/_layouts/images/rect.gif);
background-position:center left;
background-repeat:no-repeat;
margin:0 0 0 0;
padding:0 0 3px 15px;
}
ul.ms-blogAdminLinks li a{
color:#003399;
}
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
.ms-BlogNavigator div.ms-navheader{
background-color:#d6e8ff;
border-top:solid 1px #f2f8ff;
border-left:solid 1px #f2f8ff;
border-bottom:1px solid #add1ff;
padding:1px 6px 3px 6px;
}
.ms-BlogNavigator div.ms-navheader a{
color:#003399;
}
.ms-BlogNavigator div.ms-navheader{
color:#4c4c4c;
font-weight:bold;
}
Copy to Clipboard
.ms-BlogNavigator div.ms-WPBody
Border above navigation headers
Border
Core.CSS - 3704
.ms-BlogNavigator div.ms-WPBody{
border-top:solid 1px #add1ff;
}
Copy to Clipboard
.ms-BlogNavigator div.ms-PartSpacingVertical
Space under items in a navigation block.
Font size Margin
Core.CSS - 3707
.ms-BlogNavigator div.ms-PartSpacingVertical
{
font-size:1pt;
margin-top:0px;
}
Copy to Clipboard
.ms-BlogNavigator td.ms-addnew
Amount of left indention of "Add New..." links
Padding Background
Core.CSS - 3712
.ms-BlogNavigator td.ms-addnew{
padding-left:6px;
background: white;
}
Copy to Clipboard
.ms-BlogNavigator td.ms-addnew img
Amount of left indention after bullet in "Add New..." links
Margin
Core.CSS - 3715
.ms-BlogNavigator td.ms-addnew img{
margin-right:2px;
}
Copy to Clipboard
.ms-CategoryTitleCell
Container and contents formatting for sub navigation items
Padding Display Background Margin
Core.CSS - 3666, 3670
.ms-CategoryTitleCell
{
padding:0px 0px 0px 0px;
}
.ms-CategoryTitleCell a
{
display:block;
background:transparent url("/_layouts/images/navbullet.gif");
background-position:left top;
background-repeat:no-repeat;
margin:0px;
padding:3px 0px 3px 16px;
}
Copy to Clipboard
.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 .
.ms-recentchanges
Bullet image to left of View All Pages in nav
Vertical alignment Padding
Core.CSS - 3459
.ms-recentchanges
{
vertical-align:top;
padding:7px 1px 9px 4px;
}
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 *
div.ms-wikieditouter
{
position:static;
border-bottom: 1px #6393d4 solid;
margin-bottom:8px;
margin-right:5px;
border-right-width:1px;
}
Copy to Clipboard
Core.CSS - 3407
.ms-wikieditouter
{
height:23px;
font-size:8pt;
font-family:tahoma;
position:absolute;
right:9px;
top:30px;
border:1px solid #6393D4;
border-bottom:none;
text-align:center;
border-right-width:2px;
}
Copy to Clipboard
SingleLevel.CSS - 332
div.ms-wikieditouter
{
position:static;
border-bottom: 1px #6393d4 solid;
margin-bottom:3px;
margin-right:5px;
border-right-width:1px;
}
Copy to Clipboard
Tabs.CSS - 419 * SAME AS BAND.CSS & VERTICAL.CSS *
div.ms-wikieditouter
{
position:static;
border-bottom: 1px #6393d4 solid;
margin-bottom:8px;
margin-right:5px;
border-right-width:1px;
}
Copy to Clipboard
Vertical.CSS - 419 * SAME AS BAND.CSS & TABS.CSS *
div.ms-wikieditouter
{
position:static;
border-bottom: 1px #6393d4 solid;
margin-bottom:8px;
margin-right:5px;
border-right-width:1px;
}
Copy to Clipboard
These Mini Console styles are also used in the Site Directory
.ms-wikieditthird
Background of buttons
Background
Padding
Core.CSS - 3423
.ms-wikieditthird
{
background:url(/_layouts/images/toolgrad.gif);
padding-left:3px;
}
Copy to Clipboard
.ms-wikitoolbar a.ms-toolbar
Buttons
Font color
Core.CSS - 3404
.ms-wikitoolbar a.ms-toolbar{
color:#124890;
}
Copy to Clipboard
.ms-wikitoolbar a:hover.ms-toolbar
Hover state of buttons
Text decoration
Font color
Core.CSS - 3437
.ms-wikitoolbar a:hover.ms-toolbar
{
text-decoration:underline;
color:#000000;
}
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
.ms-wikicontent a{
text-decoration:underline;
}
.ms-wikicontent a.ms-wikilink
{
text-decoration:none;
}
.ms-wikicontent a.ms-missinglink
{
text-decoration:none;
border-bottom:1px dashed #000000;
}
.ms-wikicontent
{
color:#333333;
line-height:1.3;
}
Copy to Clipboard