1 / 20

Intro to SharePoint 2010 Branding

Who am I?. A SharePoint developer who specializes in implementing designs and creating web components to enhance the user interface and user experience.. Outline. What is BrandingPlanningWhat's New in 2010Tools

fauve
Download Presentation

Intro to SharePoint 2010 Branding

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    1. Intro to SharePoint 2010 Branding Thomas Daly, tdaly@bandrsolutions.com Presented @ NYC SharePoint Users Group 4/6/2011

    2. Who am I? A SharePoint developer who specializes in implementing designs and creating web components to enhance the user interface and user experience.

    3. Outline What is Branding Planning What’s New in 2010 Tools & Supported Browsers Approaches to Branding Themes Master Pages Upgrading Demo

    4. What is SharePoint Branding? Creating a visual identity in SharePoint Covers everything, from editing pages, webparts, css, master pages, themes, page layouts, jquery/javascript, xslt, CAML, SharePoint Designer . . . Why brand SharePoint? Create a unique look Maintain company visual identity Create distinct web areas Make it not look like SharePoint

    5. Planning Intranet or Internet scenario Collaborational or Informational Determine Audience - target browsers, users, & screen resolution Existing company style or guidelines Custom Page Layouts Custom or 3rd Part Components Timeframe Approval Deployment

    6. What’s New – Changes Less Table, mainly DIV based New objects – Ribbon, Dialog Boxes Increased Browser Support Utilizing Office Theme Engine Increase Standards Compliance

    7. Tools & Supported Browsers Tools IE Dev Toolbar (embedded in IE8) Firebug / Firebug Lite SharePoint Designer 2010 ColorPic Multiple Versions IE Firefox vmware, virtual pc, or virtual box Supported Browsers Internet Explorer 7 & 8 Mozilla Firefox 3.6 Safari 4.04

    8. Other Browsers & Tools Firebug Lite - Compatible with all major browsers: IE6+, Firefox, Opera, Safari and Chrome; Chrome Built in developer tool bar Opera Dragonfly

    9. No IE 6 Support 7 ways to tell your site visitors to upgrade

    10. Approaches to Branding Basic End User situation – none or limited knowledge of html or CSS Updating theme, adding logo, selecting new master page. Intermediate Requires – some ability to understand, write CSS, html Modifying current MasterPage, adding some custom CSS Advanced Create Custom Master Page, custom CSS.

    11. Themes Set of graphics and cascading style sheets that control the look of your site. Uses Office themes (.THMX) 12 colors, 2 fonts

    12. Themes 3 Approaches to creating/updating the theme Existing theme can be modified in UI (Publishing Features) New theme can be created in PowerPoint and imported Microsoft Theme Builder Tool http://connect.microsoft.com/themebuilder

    13. Theme Engine Attach Custom CSS – EnableCssTheming Enable custom CSS to see themes - /Style Library/en-us/Themable Capabilities – ref Replace colors, Replace fonts Recolor images - Blending, Tinting, Fill

    14. Custom Style Sheets Link to your custom CSS in the MasterPage Upload the CSS to the site, via Alternate CSS (Publishing Only)

    15. Master Pages Starter Master Pages – new term for Minimal Master Pages http://startermasterpages.codeplex.com/ Includes 3 master pages: regular, foundations, meeting workspaces Provides clean starting point for branding Well documented for easy understanding V3 Master Page Support

    16. jQuery’s Role in Branding Creating interactive web components Manipulating the DOM after the fact Add / Remove classes Adjust CSS styles Perform adjustments to page base on other criteria Add flare

    17. Upgrading Branding Theme No direct method Master Page MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx

    18. Deployment Options Varies depending on your branding effort SharePoint Designer Based Upload master pages, images, CSS, & scripts Manual process per site Solution Based Deployment Upload master pages, images, CSS, & scripts Automatically activate theme, apply master pages, build out site components. Repeatable branding application, programmatically across sites

    19. Demo Theme Create through PowerPoint, Import Update through UI Theme Tool Alternate CSS method Show V3 Master Page Support OOTB v3.master Heather base master page Show Starter Master Apply Blank Master Page Apply Customized Master Page Deployment Feature driven deployment

    20. Questions? Questions / Comments Contact information Thomas M Daly Email: tdaly@bandrsolutions.com Blog – http://thomasdaly.net Twitter - _TomDaly_

More Related