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

Re-Experience SharePointInterface Enhancements inSharePoint 2010 Re-Experience SharePoint

Mark Miller, @euspFounder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint Re-Experience SharePoint

Re-Experience SharePoint

NothingButSharePoint Re-Experience SharePoint

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 VirginiaMy SharePoint Destinations Michigan Florida Denver New York City San Francisco Los Angeles Washington DC Baltimore Philidelphia Boston Re-Experience SharePoint

NothingButBranding Re-Experience SharePoint

#SPTechConTwitter Hash Re-Experience SharePoint

AgendaRe-Experience SharePoint Re-Experience SharePoint

Explore SharePoint 2010 Interface Re-Experience SharePoint

Examine Basic CSS Classes Re-Experience SharePoint

Re-Experience SharePoint Re-Experience SharePoint

SharePoint 2010 Interface OverviewDefault Interface, CSS Refresher Re-Experience SharePoint

Default Interface Re-Experience SharePoint

Areas for Enhancement Re-Experience SharePoint

Enhanced Interface Re-Experience SharePoint

CSSBasic Review for Beginners Re-Experience SharePoint

Basic CSS Changes Re-Experience SharePoint

Font Re-Experience SharePoint

Borders Re-Experience SharePoint

Fill Re-Experience SharePoint

How To Find CSS Classes Re-Experience SharePoint

Browser Tools Re-Experience SharePoint

SharePoint Experience Re-Experience SharePoint

Home Page CSS Reference Re-Experience SharePoint

What the CSS Looks Like Re-Experience SharePoint

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

Borders: Default Interfacebody #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;} Re-Experience SharePoint

Fill: Default Interfacebody #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;} Re-Experience SharePoint

The HeaderCreate a New Experience Re-Experience SharePoint

Header OverviewSite Actions, Site Title, Global Nav Re-Experience SharePoint

Interface: Default Re-Experience SharePoint

Header: Default Re-Experience SharePoint

Header: Enhanced Re-Experience SharePoint

Site Actions: Default CSS Re-Experience SharePoint

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; Re-Experience SharePoint

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

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

Site Actions: Enhanced CSS Re-Experience SharePoint

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

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

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

Title Area: Default CSS Re-Experience SharePoint

Title Area Font: Defaultbody #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;} Re-Experience SharePoint

Title Area Borders: Defaultbody #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;} Re-Experience SharePoint

Title Area Fill: Defaultbody #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;} Re-Experience SharePoint

Title Area: Enhanced CSS Re-Experience SharePoint

Title Area Font: Enhanced.s4-breadcrumb-anchor:hover, .s4-breadcrumb-anchor-open, .ms-qatbutton:hover { border-color:#FFFFFF; background:none; background-color:transparent; font-size: 25px;} Re-Experience SharePoint

Title Area Borders: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* border-top:1px solid #e0e0e0; - HIDDEN/* border-bottom:1px solid #b8babd; - HIDDEN Re-Experience SharePoint

Title Area Fill: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* border-top:1px solid #e0e0e0; - HIDDEN/* border-bottom:1px solid #b8babd; - HIDDEN Re-Experience SharePoint

Global Navigation: Default CSS Re-Experience SharePoint

Global Nav Font: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;/* [ReplaceColor(themeColor:"Light2")] */ background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border-top:1px solid #e0e0e0;/* [ReplaceColor(themeColor:"Light2-Lighter")] */ border-bottom:1px solid #b8babd;} Re-Experience SharePoint

Global Nav Borders: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;/* [ReplaceColor(themeColor:"Light2")] */ background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border-top:1px solid #e0e0e0;/* [ReplaceColor(themeColor:"Light2-Lighter")] */ border-bottom:1px solid #b8babd;} Re-Experience SharePoint

Global Nav Fill: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/selbg.png") repeat-x left top;/* [ReplaceColor(themeColor:"Light2")] */ background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* [ReplaceColor(themeColor:"Light2-Lightest")] */ border-top:1px solid #e0e0e0;/* [ReplaceColor(themeColor:"Light2-Lighter")] */ border-bottom:1px solid #b8babd;} Re-Experience SharePoint

Global Nav: Enhanced CSS Re-Experience SharePoint

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;} Re-Experience SharePoint

Global Nav Borders: Enhancedbody #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;} Re-Experience SharePoint

Global Nav Fill: Enhancedbody #s4-topheader2 { margin-top:20px; /* Add padding on top of the global nav container */ margin-bottom:20px; /* Add padding on bottom of the global navcontainer */ 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 SharePoint

Re-Experience the Header Re-Experience SharePoint

Midnight Black Re-Experience SharePoint

Burgundy Wine Re-Experience SharePoint

Smooth Slate Re-Experience SharePoint

Indian Turquoise Re-Experience SharePoint

Deep Ocean Aqua Re-Experience SharePoint

The Quick LaunchCreate a New Experience Re-Experience SharePoint

Quick Launch: Default CSS Re-Experience SharePoint

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

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

Quick Launch Fill: Default .s4-ql,.s4-specialNavLinkList{ list-style-type:none; margin:0px 0px 20px 0px; padding:0px; /* No fill } Re-Experience SharePoint

Quick Launch : Enhanced CSS Re-Experience SharePoint

Quick Launch Font: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; /* Inherits body font } Re-Experience SharePoint

Quick Launch Borders: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; } Re-Experience SharePoint

Quick Launch Fill: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; } Re-Experience SharePoint

QL Main Links: Default CSS Re-Experience SharePoint

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; vertical-align:middle; /* Inherits from body } Re-Experience SharePoint

QL Main Links Borders: 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; vertical-align:middle; } Re-Experience SharePoint

QL Main Links Fill: 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; vertical-align:middle; /* No fill } Re-Experience SharePoint

QL Main Links: Enhanced CSS Re-Experience SharePoint

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

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

QL Main Links Fill: Enhanced .menu-vertical > ul.root > li.static > .menu-item { color:#000000; font-size:14px; font-family:Verdana; border-bottom:1px solid #000000; padding-bottom:5px; /* NO FILL } Re-Experience SharePoint

QL Sub Links: CSS Re-Experience SharePoint

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

QL Sub Links Borders: Default .single-level-menu .menu-vertical li.static{ border-bottom: 1px solid #ffffff; } Re-Experience SharePoint

QL Sub Links Fill: Default .single-level-menu .menu-vertical li.static{ border-bottom: 1px solid #ffffff; /* No fill in default } Re-Experience SharePoint

QL Sub Links: Enhanced CSS Re-Experience SharePoint

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; font-family:Verdana; text-decoration:none; } .s4-ql a.selected { background:none; background-color:transparent; border:0px solid transparent !important; } Re-Experience SharePoint

QL Sub Links Borders: 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; font-family:Verdana; text-decoration:none; } .s4-ql a.selected { background:none; background-color:transparent; border:0px solid transparent !important; } Re-Experience SharePoint

QL Sub Links Fill: 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; font-family:Verdana; text-decoration:none; } .s4-ql a.selected { background:none; background-color:transparent; border:0px solid transparent !important; } Re-Experience SharePoint

Re-Experience the Quick Launch Re-Experience SharePoint

Midnight Black Re-Experience SharePoint

Burgundy Wine Re-Experience SharePoint

Smooth Slate Re-Experience SharePoint

Indian Turquoise Re-Experience SharePoint

Deep Ocean Aqua Re-Experience SharePoint

The Content AreaCreate a New Experience Re-Experience SharePoint

Content Area: Default CSS Re-Experience SharePoint

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

Content Area Borders: Default.s4-ca{ /* [ReplaceColor(themeColor:"Light1")] */ background:#fff; margin-left:155px; margin-right:0px; min-height:324px; /* No borders} Re-Experience SharePoint

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

Content Area: Enhanced CSS Re-Experience SharePoint

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

Content Area Borders: Enhanced/* Default used .s4-ca{ /* [ReplaceColor(themeColor:"Light1")] */ background:#fff; margin-left:155px; margin-right:0px; min-height:324px;} Re-Experience SharePoint

Content Area Fill: Enhanced/* Default used .s4-ca{ /* [ReplaceColor(themeColor:"Light1")] */ background:#fff; margin-left:155px; margin-right:0px; min-height:324px;} Re-Experience SharePoint

Re-Experience the Content Area Re-Experience SharePoint

Midnight Black: Content Re-Experience SharePoint

Burgundy Wine: Content Re-Experience SharePoint

Smooth Slate: Content Re-Experience SharePoint

Indian Turquoise: Content Re-Experience SharePoint

Deep Ocean Aqua: Content Re-Experience SharePoint

Re-Experience SharePointPutting it all together Re-Experience SharePoint

Default SharePoint 2010 Interface Re-Experience SharePoint

Enhanced SharePoint 2010 Re-Experience SharePoint

Premium Experiences Re-Experience SharePoint

Conclusion:7000+ Lines of CSS inSharePoint Re-Experience SharePoint

DownloadNBB Community Color Templates Re-Experience SharePoint

Re-Experience SharePointInterface Enhancements inSharePoint 2010 Re-Experience SharePoint

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

by EndUserSharePoint on Jul 25, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 2

Statistics

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

http://us-w1.rockmelt.com	1
https://si0.twimg.com	1