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

Re-Experience SharePoint

Interface Enhancements in

SharePoint 2010

Mark Miller, @eusp

Founder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint

NothingButSharePoint

My SharePoint Destinations

International

Montreal

Ottawa

Toronto

Birmingham, UK

London

Nottingham, UK

Sydney

Canberra, AU

Wellington, NZ

Philippines

Beijing

Shanghai

Switzerland

France

Uruguay

Argentian

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

Basic Review for Beginners

Basic CSS Changes

Borders

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

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

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

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

Deep-Ripping and DecompactionDeep Ripping and Decompaction practice, which prepares the site for the appropriate long-term lawn/ground cover mix including deep taproot plants such

SUITABILITY STUDY OF RIPPER -DOZER COMBINATION IN … · 2018-12-05 · Working of the ripping machine2.4 27 Ripping mechanism2.5 28 Attachment of the dozer blade or2.6 pusher blade

with Trump denying her a handshake and Pelosi ripping apart ......Avenue was at ~1.41 trillion, which was ~2,777 crore more than that of Wipro’s ~1.38 tril-lion valuation on the

A Tablesaw Primer: Ripping and Crosscutting - …ebenisteriepatton.50megs.com/Techniques/Tech_securitaire_banc_de... · A Tablesaw Primer Ripping and Crosscutting The proper techniques

Caterpillar Ripping Techniques

Kindynis, T. 2014. Ripping up the map: Criminology and cartography …research.gold.ac.uk/23440/3/Kindynis, T. 2014. Ripping up... · 2020-04-30 · The history of crime mapping is

R.A.W Magazine Issue No. 1 - Ripping You A New One

Ripping your s apart

Using GUI Ripping for Automated Testing of Android Apps

Ted’s SACD Ripping Guide - Version 4.0 Feb 25, 2014 · PDF fileTed’s SACD Ripping Guide - Version 4.0 Feb 25, 2014 As we approach two and a half years of this ripping project life

Brokenness · SoulCare that I very much valued. What he said to me is this; he said, “Something has come up that I don’t know how to handle, and it is ripping me apart, and I

“Ain’t It a Ripping Night”: Alcoholism and the Legacies of ...eprints.bournemouth.ac.uk/29565/15/Ain t It a Ripping Night Alcoholi… · Midnight’s Children would provide

Table Saw Ripping Jig

2016 Ripping Runways Magazine D.C. Fashion Week Edition

Effects of Deep Ripping on Cropping Soils and Crop Production

Flirtbuddies.Com is a Scam and Its Ripping You Off

Teaching with Video in the 21st Century RIPPING …reframe.sussex.ac.uk/audiovisualessay/files/2015/03/...RIPPING AND CLIPPING YOUR DVDS Teaching with Video in the 21st Century KELLI

Ripping Up the Map: Criminology and Cartography Reconsidered

Magic? Levitation Harrison Ford and a Lemons Katy Perry and a Rabbit? Beach trick Ripping Bodies apart Compare: African Shaman (from Ch. 6Compare: African.

Hand Book of Ripping