View
1.143
Download
0
Category
Tags:
Preview:
DESCRIPTION
Though most of it was done through live Demos - here is my presentation from SPS Sacramento. Live demos included available Team Site enhancements as well as step by step modifications applied to the OOB team site to upgrade the look and feel. Email me or twitter me @bniaulin for more information or the files used in the presentation including the code etc.
Citation preview
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
share-gate.com@bniaulin
Who is this guy talking?
Benjamin NiaulinSpeaker, Trainer, Consultant, SCRUM MasterBlog
bniaulin.wordpress.comWebsite
share-gate.com nothingbutbranding.com
Email benjamin.niaulin@share-gate.com
TWITTER!: @bniaulin
INTRODUCTION
INTERFACE OVERVIEW
BASIC STRUCTURE
share-gate.com@bniaulin
What we play with
Master PagesCSSWeb Parts (DVWP, CQWP*, CEWP, RSS Feed, etc)jQuery
MASTER PAGES
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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
share-gate.com@bniaulin
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/
CSS BASICS
share-gate.com@bniaulin
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
share-gate.com@bniaulin
Font: Default Interface
body {
font-family: Verdana,Arial,sans-serif;font-size: 8pt;color: #676767;background-color: white;margin: 0px;padding: 0px;
}
share-gate.com@bniaulin
Change the backround
BODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}
share-gate.com@bniaulin
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
DEMO
MASTER PAGESCSS FILESBROWSER TOOLS
HEADER OVERVIEW
share-gate.com@bniaulin
3 main containers in Header
share-gate.com@bniaulin
The Top Bar
BODY #s4-ribbonrow {BACKGROUND-COLOR: #256283
}
share-gate.com@bniaulin
The Title area
.s4-title {BACKGROUND-IMAGE: none; BACKGROUND-
COLOR: transparent}
share-gate.com@bniaulin
The Top Navigation
WordPad Document
QUICKLAUNCH
share-gate.com@bniaulin
The Containers
Containers in containers
div #s4-leftpanel in yellowdiv #s4-leftpanel-content in red.ms-quicklaunchouter in green
share-gate.com@bniaulin
Enhancing Quicklaunch
WordPad Document
share-gate.com@bniaulin
Move it!
body #s4-leftpanel { float: right; width: 230px;}.s4-ca { margin-left: 0px; margin-right: 230px;}
share-gate.com@bniaulin
Last little touches
WordPad Document
Q&A
share-gate.com@bniaulin
THANK YOU!
Follow me on twitter for updates! Tweet me if youneed the files (CSS, jQuery used in demo)
@BNIAULIN
Benjamin Niaulin
Recommended