Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
-
Upload
benjamin-niaulin -
Category
Technology
-
view
1.137 -
download
0
description
Transcript of Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
![Page 1: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/1.jpg)
Benjamin NiaulinPresented at: SharePoint Saturday Sacramento
SharePoint Geek
Re-Experience SharePoint
Interface Enhancements inSharePoint 2010
![Page 2: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/2.jpg)
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
![Page 3: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/3.jpg)
share-gate.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
![Page 4: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/4.jpg)
INTRODUCTION
![Page 8: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/8.jpg)
INTERFACE OVERVIEW
![Page 12: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/12.jpg)
BASIC STRUCTURE
![Page 13: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/13.jpg)
share-gate.com@bniaulin
What we play with
Master PagesCSSWeb Parts (DVWP, CQWP*, CEWP, RSS Feed, etc)jQuery
![Page 14: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/14.jpg)
MASTER PAGES
![Page 15: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/15.jpg)
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
![Page 16: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/16.jpg)
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
![Page 17: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/17.jpg)
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/
![Page 18: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/18.jpg)
CSS BASICS
![Page 20: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/20.jpg)
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
![Page 22: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/22.jpg)
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;
}
![Page 23: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/23.jpg)
share-gate.com@bniaulin
Change the backround
BODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}
![Page 24: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/24.jpg)
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
![Page 25: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/25.jpg)
DEMO
MASTER PAGESCSS FILESBROWSER TOOLS
![Page 26: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/26.jpg)
HEADER OVERVIEW
![Page 29: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/29.jpg)
share-gate.com@bniaulin
3 main containers in Header
![Page 30: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/30.jpg)
share-gate.com@bniaulin
The Top Bar
BODY #s4-ribbonrow {BACKGROUND-COLOR: #256283
}
![Page 31: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/31.jpg)
share-gate.com@bniaulin
The Title area
.s4-title {BACKGROUND-IMAGE: none; BACKGROUND-
COLOR: transparent}
![Page 32: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/32.jpg)
share-gate.com@bniaulin
The Top Navigation
WordPad Document
![Page 34: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/34.jpg)
QUICKLAUNCH
![Page 35: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/35.jpg)
share-gate.com@bniaulin
The Containers
Containers in containers
div #s4-leftpanel in yellowdiv #s4-leftpanel-content in red.ms-quicklaunchouter in green
![Page 36: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/36.jpg)
share-gate.com@bniaulin
Enhancing Quicklaunch
WordPad Document
![Page 37: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/37.jpg)
share-gate.com@bniaulin
Move it!
body #s4-leftpanel { float: right; width: 230px;}.s4-ca { margin-left: 0px; margin-right: 230px;}
![Page 38: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/38.jpg)
share-gate.com@bniaulin
Last little touches
WordPad Document
![Page 39: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/39.jpg)
Q&A
![Page 40: Re-Experience SharePoint: Interface Enhancements in SharePoint 2010](https://reader038.fdocuments.us/reader038/viewer/2022103110/5485609bb4af9f76258b4586/html5/thumbnails/40.jpg)
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