Re-Experience SharePoint: Interface Enhancements in SharePoint 2010

1,188 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Re-Experience SharePoint: Interface Enhancements in SharePoint 2010

  1. 1. Re-Experience SharePoint Interface Enhancements in SharePoint 2010 Benjamin NiaulinPresented at: SharePoint Saturday SharePoint GeekSacramento
  2. 2. 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
  3. 3. 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
  4. 4. INTRODUCTION
  5. 5. @bniaulin share-gate.com
  6. 6. @bniaulin share-gate.com
  7. 7. @bniaulin share-gate.com
  8. 8. INTERFACE OVERVIEW
  9. 9. Default Interface @bniaulin share-gate.com
  10. 10. Areas for Enhancement@bniaulin share-gate.com
  11. 11. Enhanced@bniaulin share-gate.com
  12. 12. BASIC STRUCTURE
  13. 13. What we play with Master Pages CSS Web Parts (DVWP, CQWP*, CEWP, RSS Feed, etc) jQuery@bniaulin share-gate.com
  14. 14. MASTER PAGES
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. CSS BASICS
  19. 19. Basic CSS@bniaulin share-gate.com
  20. 20. 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
  21. 21. What CSS Looks Like@bniaulin share-gate.com
  22. 22. 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
  23. 23. Change the backroundBODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}@bniaulin share-gate.com
  24. 24. 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
  25. 25. DEMOMASTER PAGESCSS FILESBROWSER TOOLS
  26. 26. HEADER OVERVIEW
  27. 27. Header: Default@bniaulin share-gate.com
  28. 28. Header: Enhanced@bniaulin share-gate.com
  29. 29. 3 main containers in Header@bniaulin share-gate.com
  30. 30. The Top BarBODY #s4-ribbonrow { BACKGROUND-COLOR: #256283}@bniaulin share-gate.com
  31. 31. The Title area .s4-title { BACKGROUND-IMAGE: none; BACKGROUND- COLOR: transparent } @bniaulin share-gate.com
  32. 32. The Top Navigation@bniaulin share-gate.com
  33. 33. Our Enhancements@bniaulin share-gate.com
  34. 34. QUICKLAUNCH
  35. 35. The Containers Containers in containers div #s4-leftpanel in yellow div #s4-leftpanel-content in red .ms-quicklaunchouter in green@bniaulin share-gate.com
  36. 36. Enhancing Quicklaunch@bniaulin share-gate.com
  37. 37. Move it! body #s4-leftpanel { float: right; width: 230px; } .s4-ca { margin-left: 0px; margin-right: 230px; } @bniaulin share-gate.com
  38. 38. Last little touches @bniaulin share-gate.com
  39. 39. Q&A
  40. 40. 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

×