Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010

Re-Experience SharePoint

Interface Enhancements in
SharePoint 2010


Mark Miller, @eusp
Founder and Editor, EndUserSharePoint
Co-Founder, NothingButSharePoint


NothingButSharePoint


International
Montreal
Ottawa
Toronto
Birmingham, UK
London
Nottingham, UK
Dubai
Sydney
Canberra, AU
Wellington, NZ
Philippines
Beijing
Shanghai
Switzerland
France
Uruguay
Argentian
Chile
Antarctica

United States
Virginia

My SharePoint Destinations Michigan
Florida
Denver
New York City
San Francisco
Los Angeles
Washington DC
Baltimore
Philidelphia
Boston


NothingButBranding


#SPTechCon
Twitter Hash


Agenda


Explore SharePoint 2010 Interface


Examine Basic CSS Classes


SharePoint 2010 Interface Overview

Default Interface, CSS Refresher


Default Interface


Areas for Enhancement


Enhanced Interface


CSS
Basic Review for Beginners


Basic CSS Changes


Font


Borders


Fill


How To Find CSS Classes


Browser Tools


SharePoint Experience


Home Page CSS Reference


What the CSS Looks Like


Font: Default Interface
body {
font-family: Verdana,Arial,sans-serif;
font-size: 8pt;
color: #676767;
background-color: white;
margin: 0px;
padding: 0px;
}


Borders: Default Interface

body #s4-leftpanel-content {
padding: 0px 0px 5px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
}


Fill: Default Interface
padding: 0px 0px 5px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
}


The Header
Create a New Experience


Header Overview
Site Actions, Site Title, Global Nav


Interface: Default


Header: Default


Header: Enhanced


Site Actions: Default CSS


Site Actions Font: Default
/* Entire page font inherited from body
font-family: Verdana,Arial,sans-serif;
font-size: 8pt;
color: #676767;
background-color: white;
margin: 0px;
padding: 0px;


Site Actions Border: Default
body #s4-ribbonrow{
min-height:43px; /*
[ReplaceColor(themeColor:"Dark2",themeShad
e:"0.9")] */ background-color:#21374c; overflow-
y:hidden;
/* border: 1px solid red;
}


Site Actions Fill: Default
body #s4-ribbonrow{
min-height:43px;
/* [ReplaceColor(themeColor:"Dark2",
themeShade:"0.9")]
*/ background-color:#21374c; overflow-
y:hidden;
}


Site Actions: Enhanced CSS


Site Actions Font: Enhanced

/* Site action button */
.ms-siteactionsmenuhover {
border-color:#FFFFFF;
background:none;
background-color:transparent;
font-size: 25px !important;
}


Site Actions Borders: Enhanced

background:none;
}


Site Actions Fill: Enhanced

background:none;
}


Title Area: Default CSS


Title Area Font: Default
body #s4-topheader2{
background:url("/_layouts/images/selbg.png") repeat-x
left top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #b8babd;
}


Title Area Borders: Default
left top;
min-height:25px;
}


Title Area Fill: Default
left top;
min-height:25px;
}


Title Area: Enhanced CSS


Title Area Font: Enhanced
.s4-breadcrumb-anchor:hover, .s4-breadcrumb-anchor-
open, .ms-qatbutton:hover {
background:none;
font-size: 25px;
}


Title Area Borders: Enhanced
background:url("/_layouts/images/selbg.png") repeat-x left
top;
min-height:25px;
/* border-top:1px solid #e0e0e0; - HIDDEN
/* border-bottom:1px solid #b8babd; - HIDDEN


Title Area Fill: Enhanced
background:url("/_layouts/images/selbg.png") repeat-x left
top;
min-height:25px;
/* border-top:1px solid #e0e0e0; - HIDDEN
/* border-bottom:1px solid #b8babd; - HIDDEN


Global Navigation: Default CSS


Global Nav Font: Default
/* [RecolorImage(themeColor:"Light1")] */
background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2")] */
min-height:25px;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
}


Global Nav Borders: Default
min-height:25px;
}


Global Nav Fill: Default
min-height:25px;
}


Global Nav: Enhanced CSS


Global Nav Font: Enhanced
.s4-toplinks .s4-tn a {
background:none;
border:0px;
color:#cccccc;
font-family:'Verdana';
font-size:14px;
padding:0px;
margin:0px;
height:50px;
text-decoration:none !important;
}


Global Nav Borders: Enhanced
body #s4-topheader2 {
margin-top:20px;
margin-bottom:20px;
height:50px;
background-
image:url("/Style%20Library/Images/bg_globalnav.png");
border-top:none;
border-bottom:none;
}


Global Nav Fill: Enhanced
body #s4-topheader2 {
margin-top:20px; /* Add padding on top of the global nav container */
margin-bottom:20px; /* Add padding on bottom of the global nav
container */
height:50px; /* Set the height of the global nav container */
background-image:url("/Style%20Library/Images/bg_globalnav.png");
/* Change background image to the global nav container */
border-top:none;
border-bottom:none;
}


Re-Experience the Header


Midnight Black


Burgundy Wine


Smooth Slate


Indian Turquoise


Deep Ocean Aqua


The Quick Launch


Quick Launch: Default CSS


Quick Launch Font: Default
.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}


Quick Launch Border: Default
padding:0px;
}


Quick Launch Fill: Default
padding:0px;
/* No fill
}


Quick Launch : Enhanced CSS


Quick Launch Font: Enhanced
border:none; /* Remove the QL borders */
/* Inherits body font
}


Quick Launch Borders: Enhanced
}


Quick Launch Fill: Enhanced
}


QL Main Links: Default CSS


QL Main Links Font: Default
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")]
*/ color:#3b4f65; white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
/* Inherits from body
}


QL Main Links Borders: Default
padding:4px 10px;
height:15px;
}


QL Main Links Fill: Default
padding:4px 10px;
height:15px;
/* No fill
}


QL Main Links: Enhanced CSS


QL Main Links Font: Enhanced
.menu-vertical > ul.root > li.static > .menu-item {
color:#000000;
font-size:14px;
border-bottom:1px solid #000000;
padding-bottom:5px;
}


QL Main Links Borders: Enhanced
color:#000000;
font-size:14px;
padding-bottom:5px;
}


QL Main Links Fill: Enhanced
color:#000000;
font-size:14px;
padding-bottom:5px;
/* NO FILL
}


QL Sub Links: CSS


QL Sub Links Font: Default
.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
/* Fonts inherited from body
}


QL Sub Links Borders: Default
}


QL Sub Links Fill: Default
/* No fill in default
}


QL Sub Links: Enhanced CSS


QL Sub Links Font: Enhanced
.menu-vertical > ul.root > li.static > ul.static > li.static {
padding-left:10px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static:hover {
background-color:#cccccc;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a {
color:#000000;
font-size:14px;
text-decoration:none;
}
.s4-ql a.selected {
background:none;
border:0px solid transparent !important;
}


QL Sub Links Borders: Enhanced
padding-left:10px;
}
}
color:#000000;
font-size:14px;
}
.s4-ql a.selected {
background:none;
}


QL Sub Links Fill: Enhanced
padding-left:10px;
}
}
color:#000000;
font-size:14px;
}
.s4-ql a.selected {
background:none;
}


Re-Experience the Quick Launch


The Content Area


Content Area: Default CSS


Content Area Font: Default
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
/* Inherited from body
}


Content Area Borders: Default
.s4-ca{
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
/* No borders
}


Content Area Fill: Default
.s4-ca{
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}


Content Area: Enhanced CSS


Content Area Font: Enhanced
/* Default used
.s4-ca{
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}


Content Area Borders: Enhanced
/* Default used
.s4-ca{
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}


Content Area Fill: Enhanced
/* Default used
.s4-ca{
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}


Re-Experience the Content Area


Midnight Black: Content


Burgundy Wine: Content


Smooth Slate: Content


Indian Turquoise: Content


Deep Ocean Aqua: Content


Putting it all together


Default SharePoint 2010 Interface


Enhanced SharePoint 2010


Premium Experiences


Conclusion:
7000+ Lines of CSS in
SharePoint


Download
NBB Community Color Templates


Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010

Ähnlich wie Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010 (20)

Mehr von EndUserSharePoint

Mehr von EndUserSharePoint (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010

Hinweis der Redaktion