Re-Experience SharePoint: Interface Enhancements in SharePoint 2010


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
  3. 3. Who is this guy talking? Benjamin Niaulin Speaker, Trainer, Consultant, SCRUM Master Blog Website Email TWITTER!: @bniaulin @bniaulin
  5. 5. @bniaulin
  6. 6. @bniaulin
  7. 7. @bniaulin
  9. 9. Default Interface @bniaulin
  10. 10. Areas for Enhancement@bniaulin
  11. 11. Enhanced@bniaulin
  13. 13. What we play with Master Pages CSS Web Parts (DVWP, CQWP*, CEWP, RSS Feed, etc) jQuery@bniaulin
  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 placeholders-HA010165120.aspx Standardize brand across sites with a single page Loaded first Loads resources like CSS or jQuery Libraries @bniaulin
  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
  17. 17. downloads Heather Solomon’s just the essentials sharepoint-master-pages/#more-29 Starters by Randy Drisgill
  18. 18. CSS BASICS
  19. 19. Basic CSS@bniaulin
  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
  21. 21. What CSS Looks Like@bniaulin
  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
  23. 23. Change the backroundBODY {Background-image: url("http://portal/Style Library/demo/abstract-background.png")}@bniaulin
  24. 24. Tools & Techniques CSS Reset by Kyle Schaeffer SharePoint CSS will override you every step of the way 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
  27. 27. Header: Default@bniaulin
  28. 28. Header: Enhanced@bniaulin
  29. 29. 3 main containers in Header@bniaulin
  30. 30. The Top BarBODY #s4-ribbonrow { BACKGROUND-COLOR: #256283}@bniaulin
  31. 31. The Title area .s4-title { BACKGROUND-IMAGE: none; BACKGROUND- COLOR: transparent } @bniaulin
  32. 32. The Top Navigation@bniaulin
  33. 33. Our Enhancements@bniaulin
  35. 35. The Containers Containers in containers div #s4-leftpanel in yellow div #s4-leftpanel-content in red .ms-quicklaunchouter in green@bniaulin
  36. 36. Enhancing Quicklaunch@bniaulin
  37. 37. Move it! body #s4-leftpanel { float: right; width: 230px; } .s4-ca { margin-left: 0px; margin-right: 230px; } @bniaulin
  38. 38. Last little touches @bniaulin
  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