re-experience sharepoint - ripping apart the interface on sharepoint 2010

Re-Experience SharePoint


Interface Enhancements in

SharePoint 2010

http://www.nothingbutbranding.com/


Mark Miller, @eusp

Founder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint



NothingButSharePoint



My SharePoint Destinations

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

Michigan

Florida

Denver

New York City

San Francisco

Los Angeles

Washington DC

Baltimore

Philidelphia

Boston



NothingButBranding



#SPTechConTwitter 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



Midnight Black



Burgundy Wine



Smooth Slate



Indian Turquoise



Deep Ocean Aqua



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




Interface Enhancements in

SharePoint 2010


re-experience sharepoint - ripping apart the interface on sharepoint 2010

Technology