re-experience sharepoint: interface enhancements in sharepoint 2010

Benjamin NiaulinPresented at: SharePoint Saturday Sacramento

SharePoint Geek

Re-Experience SharePoint

Interface Enhancements inSharePoint 2010

share-gate.com@bniaulin

Description

In this session, we'll examine a default team site created in SharePoint 2010. We'll rip apart the presentation layer, piece by piece, exposing the underlying structure and CSS to see what can be done to create a more intuitive and aesthetically pleasing site.User Experience and Adoption is largely the result of a good-looking Site. Let’s work together and Re-experience SharePoint.#SPSSAC

http://en.share-gate.com/

http://twitter.com/bniaulin


Who is this guy talking?

Benjamin NiaulinSpeaker, Trainer, Consultant, SCRUM MasterBlog

bniaulin.wordpress.comWebsite

share-gate.com nothingbutbranding.com

Email [email protected]

TWITTER!: @bniaulin

http://bniaulin.wordpress.com/


mailto:[email protected]

http://twitter.com/

http://twitter.com/



INTRODUCTION

INTERFACE OVERVIEW


Default Interface




Areas for Enhancement




Enhanced



BASIC STRUCTURE


What we play with

Master PagesCSSWeb Parts (DVWP, CQWP*, CEWP, RSS Feed, etc)jQuery



MASTER PAGES


What is it?HTML that says where things are on the pageControls flow of the pageDefaults visitor to IE8 even if using IE9Content PlaceHolders are placed to tell SharePoint where to load it’s features

Huh?List of content placeholders http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content-placeholders-HA010165120.aspx

Standardize brand across sites with a single pageLoaded firstLoads resources like CSS or jQuery Libraries

http://office.microsoft.com/en-us/sharepoint-designer-help/modify-the-default-sharepoint-content-placeholders-HA010165120.aspx







Can be used to add a footer

<div class="s4-notdlg" style="clear: both; background-color#E36C09; padding: 10px;">© Copyright 2012 Benjamin Niaulin – Sharegate Geek</div>

Added after dev dashboard




downloads

Heather Solomon’s just the essentialshttp://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/#more-29

Starters by Randy Drisgillhttp://startermasterpages.codeplex.com/

http://blog.sharepointexperience.com/2011/09/09/just-the-essentials-sharepoint-master-pages/



http://startermasterpages.codeplex.com/



CSS BASICS


Basic CSS




What is it?

Add colors and design to the HTML structureHTML uses ID and CLASS to tell which CSS to applyStart learning by overriding CSSTools:

Heather Solomon’s ChartMy home page CSS summaryRibbon CSS explainedBrowser Tools (F12)Branding Series for beginners

Learn CSS in 24 hours

http://sharepointexperience.com/csschart/csschart.html

https://www.nothingbutsharepoint.com/sites/eusp/Pages/Brand-SharePoint-SharePoint-Home-Page-CSS-Reference.aspx

http://www.nothingbutbranding.com/blog/2012/september/sharpoint-ribbon-css-explained

http://bniaulin.wordpress.com/2012/06/27/my-sharepoint-branding-series-on-nothingbutsharepoint/

http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/




What 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;

}




Change the backround

BODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}




Tools & Techniques

CSS Reset by Kyle SchaefferSharePoint CSS will override you every step of the way

http://caniuse.com/Make sure your CSS or HTML can be used by your browsers

Content Editor Web PartAllows to write CSS to affect the page on which the Web Part has been added. Can be linked to a centralized text fileUseful to test CSS

Use the Style Library to store your files

http://kyleschaeffer.com/sharepoint/css-reset/

http://caniuse.com/

http://caniuse.com/



DEMO

MASTER PAGESCSS FILESBROWSER TOOLS

HEADER OVERVIEW


Header: Default




Header: Enhanced




3 main containers in Header




The Top Bar

BODY #s4-ribbonrow {BACKGROUND-COLOR: #256283

}




The Title area

.s4-title {BACKGROUND-IMAGE: none; BACKGROUND-

COLOR: transparent}




The Top Navigation

WordPad Document




Our Enhancements



QUICKLAUNCH


The Containers

Containers in containers

div #s4-leftpanel in yellowdiv #s4-leftpanel-content in red.ms-quicklaunchouter in green




Enhancing Quicklaunch

WordPad Document




Move it!

body #s4-leftpanel { float: right; width: 230px;}.s4-ca { margin-left: 0px; margin-right: 230px;}




Last little touches

WordPad Document




THANK YOU!

Follow me on twitter for updates! Tweet me if youneed the files (CSS, jQuery used in demo)

@BNIAULIN

Benjamin Niaulin





re-experience sharepoint: interface enhancements in sharepoint 2010

Technology

basic css

beginnerslearn css

files css

css basics

kyle schaeffersharepoint

background color

px margin

default interface body