Making SharePoint Look Good!


Published on

This presentation walks users through what to expect when trying to make SharePoint look good with emphasis on some of the points that should be considered before diving in. The presentation covers the publishing features, the components of a publishing solution and helpful tips to consider when designing for SharePoint. Additionally, the demo at the end shows to two most common tasks when it comes to creating a publishing site: building a page layout and using the content query web part for content roll up. Learn more about Eastridge at

Published in: Technology
1 Comment
  • Nice presentation. Let me introduce you Bind Tuning a tool that comes to revolutionize the way how SharePoint sites are branded, with a lot of themes that are fully customizable you can give to the sharepoint site a unique design in just a few clicks.
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Before you brand consider this:You bought SharePointConsider the usability testing Microsoft has done on the productThink about training and having to update training materials for the new brandThink about reference materials such as blogs, books, video training that is done on OOTB brandingIf you move UI components in order to make it “not look like SharePoint” you’re going to potentially open a door that makes maintenance more difficult and confuses users that may be familiar with SharePoint alreadyPlan for future investments in your branding solution. 2010 introduces the Ribbon and social features such as tagging, notes, ratings, etc that need to be integrated into the brand
  • Start in SharePoint Designer. Show Page layouts Started by copying and pasting from ArticleLeft.aspxJump to SharePoint Show Content Type Show Content Type Association Show Content Type added to Pages Library Jump to SharePoint Designer Add Fields Build HTMLBack to SharePoint Create Page Cory Peters Change Page Layout Fill in information PublishSite Settings Modify Available Page Layouts Set default page layout Create a new page and then delete for demo
  • Go to employees homepage Add content query web part Target query to pages library Target content type to employee page Sort by title ASC Select Image on left Add in PublishingPageContent Publish PageRestore Employee Profiles CQWP
  • Making SharePoint Look Good!

    1. Making SharePoint Look Good!<br />Cory Peters<br />Chief SharePoint Architect<br />Eastridge Technology, Inc.<br />
    2. About Me<br />Chief SharePoint Architect at Eastridge Technology, Inc.<br />MCP, MCTS, VTSP<br />Gamer, gadget geek, speaker<br />Working with SharePoint since Portal Server 2003<br />Comp Science from NCSU<br />Worked with all aspects of SharePoint including<br />Architecture<br />Administration<br />Implementation<br />Development<br />Branding<br />
    3. Agenda<br />What You Think You Want vs. What You Need<br />SharePoint Publishing<br />The Pieces<br />Common Goals<br />Branding Tips<br />
    4. I want SharePoint<br />But I Don’t want It to look like SharePoint<br />
    5. What do you need?<br />Out of the box!<br />Master page<br />Theme<br />Let’s talk about effort<br />Custom master page<br />Custom page layouts<br />Custom theme/CSS<br />Custom web parts<br />$<br />OOTB master page<br />Custom Theme<br />Custom CSS<br />$$<br />$$$<br />
    6. SharePoint Publishing<br />What it is and when to use it<br />
    7. Publishing Features<br />Create page level templates (page layouts)<br />Better control over navigation<br />Allows administrators to <br />Change the welcome page<br />Change the master page<br />Apply custom CSS to all sites within the collection<br />Apply a theme to all sites within the collection<br />
    8. When to use publishing<br />Anytime you need high levels of branding customization<br />Internet facing sites<br />Driven by the marketing team<br />Few authors, many readers<br />Tightly controlled – workflow approval on content edits<br />Need to support multiple browsers<br />Internal facing sites<br />Company intranet<br />To maintain brand or provide consistent look and feel across sites<br />Add a footer or additional content into all pages<br />
    9. The pieces<br />What makes up a branding solution<br />
    10. Master pages<br />Contains all<br />Content placeholders<br />Images<br />Styles<br />Controls<br />Ribbon (2010)<br />Top Navigation<br />Left Navigation<br />
    11. Page layouts<br />Contains web part zones<br />Page structure<br />Additional resources<br />CSS<br />JavaScript<br />
    12. Content Type<br />Content areas<br />Custom fields<br />Images<br />Date<br />Text<br />Dropdowns<br />etc<br />
    13. Building the structure<br />Master Page<br />Page Layout<br />My Bio<br />Page Title Placeholder<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />Content Type<br />Web Part Zone & Web Parts<br />Name<br />WP Zone<br />Email<br />Phone<br />Body<br />
    14. Building the structure<br />Master Page<br />Page Layout<br />My Bio<br />Page Title Placeholder<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />Content Type<br />Web Part Zone & Web Parts<br />Name<br />WP Zone<br />Email<br />Phone<br />Body<br />
    15. Building the structure<br />Master Page<br />Page Layout<br />My Bio<br />Page Title Placeholder<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />WP Zone<br />Web Part Zone & Web Parts<br />Name<br />Email<br />Phone<br />Body<br />
    16. Building the structure<br />Master Page<br />Page Layout<br />My Bio<br />Page Title Placeholder<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />WP Zone<br />Name<br />Email<br />Phone<br />Body<br />
    17. Building the structure<br />My Bio<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />Name<br />Email<br />WP Zone<br />Phone<br />Body<br />
    18. Applying the CSS<br />My Bio<br />Left Nav<br />Placeholder<br />Main<br />Content Area<br />Placeholder<br />My Bio<br />Left Nav<br />Placeholder<br />Name<br />Name<br />WP Zone<br />Email<br />Email<br />Phone<br />Phone<br />Body<br />Body<br />WP Zone<br />
    19. Themes<br />In 2007<br />Full ability to customize CSS<br />Difficult to deploy / manage<br />In 2010<br />Customize colors and fonts using 12 colors and 2 fonts<br />Easy to deploy<br />Easy to develop<br />Limited capability<br />
    20. SP2010 Themes<br />
    21. Branding tips<br />Things to consider<br />
    22. #1 – Branding Navigation<br />2007<br />Navigation is a series of nested tables<br />Very difficult to brand<br />2010<br />Navigation uses a UL (Unordered List)<br />Much easier to brand<br />Simpler CSS<br />Very flexible<br />
    23. 2010<br />
    24. #2 – Handle flyouts<br />Be sure to consider and be aware of flyouts and multiple level flyouts<br />
    25. #3 – Don’t reinvent the wheel<br />Take advantage of the starter master pages<br />Microsoft<br /><br />Randy Drisgill<br /><br />These help with<br />Favicon<br />Footer<br />Fixed width designs<br />Extra comments to understand what’s going on<br />
    26. #4 – user controls<br />Don’t delete controls if you’re not using them… instead move them to a <asp:Panelrunat=“server” visible=“false”></asp:Panel> at the bottom of your master page<br />
    27. #5 – Configuring Page Layouts<br />Make sure you set a default page layout (2010)<br />Don’t use web parts on your default layout<br />Make sure you configure which page layouts are available (2007 and 2010)<br />Site Settings > Page layouts and site templates<br />
    28. #6 – Referencing Fields<br />When referencing fields use the internal name rather than the ID of the field for maintainability<br />
    29. #7 – Web Part Design<br />Stay away from rounded corner designs (Especially for an intranet or read only users)<br />Make sure your web part designs can grow in both width and height<br />Web Part Title<br />This is the body of a sample web part. What happens if the user puts this web part in a zone that is too wide for the web part design?<br />
    30. #8 – Centering your Site<br />Add class=“s4-nosetwidth”<br />
    31. Common Branding Goals<br />Demos<br />
    32. Demo: page layout<br />Building an employee profile page<br />
    33. Demo: content rollup <br />Reusing content across your site<br />
    34. Questions?<br />Contact Us<br />201 West Third Street<br />Suite 1250<br />Winston-Salem, NC 27101<br />(336) 831-9800<br />Software Services for Customer Success<br />Our Partners<br />Stay Connected<br /><br />!/EastridgeTechnology<br /><br />