• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Re-Experience SharePoint: Interface Enhancements in SharePoint 2010
 

Re-Experience SharePoint: Interface Enhancements in SharePoint 2010

on

  • 907 views

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 ...

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.

Statistics

Views

Total Views
907
Views on SlideShare
899
Embed Views
8

Actions

Likes
0
Downloads
21
Comments
0

1 Embed 8

https://twitter.com 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Re-Experience SharePoint: Interface Enhancements in SharePoint 2010 Re-Experience SharePoint: Interface Enhancements in SharePoint 2010 Presentation Transcript

    • Re-Experience SharePoint Interface Enhancements in SharePoint 2010 Benjamin NiaulinPresented at: SharePoint Saturday SharePoint GeekSacramento
    • Description In this session, well examine a default team site created in SharePoint 2010. Well 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@bniaulin share-gate.com
    • Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog bniaulin.wordpress.com Website share-gate.com nothingbutbranding.com Email benjamin.niaulin@share-gate.com TWITTER!: @bniaulin @bniaulin share-gate.com
    • INTRODUCTION
    • @bniaulin share-gate.com
    • @bniaulin share-gate.com
    • @bniaulin share-gate.com
    • INTERFACE OVERVIEW
    • Default Interface @bniaulin share-gate.com
    • Areas for Enhancement@bniaulin share-gate.com
    • Enhanced@bniaulin share-gate.com
    • BASIC STRUCTURE
    • What we play with Master Pages CSS Web Parts (DVWP, CQWP*, CEWP, RSS Feed, etc) jQuery@bniaulin share-gate.com
    • MASTER PAGES
    • What is it? HTML that says where things are on the page Controls flow of the page Defaults visitor to IE8 even if using IE9 Content 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 page Loaded first Loads resources like CSS or jQuery Libraries @bniaulin share-gate.com
    • Can be used to add a footer <div class="s4-notdlg" style="clear: both; background- color#E36C09; padding: 10px;">&copy; Copyright 2012 Benjamin Niaulin – Sharegate Geek</div>Added after dev dashboard@bniaulin share-gate.com
    • downloads Heather Solomon’s just the essentials http://blog.sharepointexperience.com/2011/09/09/just-the-essentials- sharepoint-master-pages/#more-29 Starters by Randy Drisgill http://startermasterpages.codeplex.com/@bniaulin share-gate.com
    • CSS BASICS
    • Basic CSS@bniaulin share-gate.com
    • What is it? Add colors and design to the HTML structure HTML uses ID and CLASS to tell which CSS to apply Start learning by overriding CSS Tools: Heather Solomon’s Chart My home page CSS summary Ribbon CSS explained Browser Tools (F12) Branding Series for beginners Learn CSS in 24 hours @bniaulin share-gate.com
    • What CSS Looks Like@bniaulin share-gate.com
    • Font: Default Interface body { font-family: Verdana,Arial,sans-serif; font-size: 8pt; color: #676767; background-color: white; margin: 0px; padding: 0px; } @bniaulin share-gate.com
    • Change the backroundBODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}@bniaulin share-gate.com
    • Tools & Techniques CSS Reset by Kyle Schaeffer SharePoint 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 Part Allows to write CSS to affect the page on which the Web Part has been added. Can be linked to a centralized text file Useful to test CSS Use the Style Library to store your files@bniaulin share-gate.com
    • DEMOMASTER PAGESCSS FILESBROWSER TOOLS
    • HEADER OVERVIEW
    • Header: Default@bniaulin share-gate.com
    • Header: Enhanced@bniaulin share-gate.com
    • 3 main containers in Header@bniaulin share-gate.com
    • The Top BarBODY #s4-ribbonrow { BACKGROUND-COLOR: #256283}@bniaulin share-gate.com
    • The Title area .s4-title { BACKGROUND-IMAGE: none; BACKGROUND- COLOR: transparent } @bniaulin share-gate.com
    • The Top Navigation@bniaulin share-gate.com
    • Our Enhancements@bniaulin share-gate.com
    • QUICKLAUNCH
    • The Containers Containers in containers div #s4-leftpanel in yellow div #s4-leftpanel-content in red .ms-quicklaunchouter in green@bniaulin share-gate.com
    • Enhancing Quicklaunch@bniaulin share-gate.com
    • Move it! body #s4-leftpanel { float: right; width: 230px; } .s4-ca { margin-left: 0px; margin-right: 230px; } @bniaulin share-gate.com
    • Last little touches @bniaulin share-gate.com
    • Q&A
    • THANK YOU!Follow me on twitter for updates! Tweet me if youneed the files (CSS, jQuery used in demo)@BNIAULIN Benjamin Niaulin@bniaulin share-gate.com