• Like
  • Save
SharePoint 2010 Branding For The Masses SPSTC
Upcoming SlideShare
Loading in...5
×
 

SharePoint 2010 Branding For The Masses SPSTC

on

  • 5,326 views

When it comes to the look and feel of your SharePoint site, sometimes all you need is a little bit of custom style to move it to the next level. This session will introduce the topic of branding as it ...

When it comes to the look and feel of your SharePoint site, sometimes all you need is a little bit of custom style to move it to the next level. This session will introduce the topic of branding as it relates to SharePoint 2010 in a way that anyone can approach. We will look at some of the technologies involved in creating branding for SharePoint 2010, which will include creating a custom SharePoint 2010 theme using Microsoft Office, as well as making changes to master pages using SharePoint Designer 2010.

Throughout the session, we will discuss new features that affect branding in SharePoint 2010 such as the Ribbon, Wiki Pages and Visual Upgrade. By the end of the session, attendees will have a basic understanding of how to make their SharePoint 2010 website look more like their existing corporate Web design.

Statistics

Views

Total Views
5,326
Views on SlideShare
2,930
Embed Views
2,396

Actions

Likes
2
Downloads
0
Comments
1

7 Embeds 2,396

http://johnrossjr.wordpress.com 2333
http://popspsdevweb3 48
https://johnrossjr.wordpress.com 10
http://newsblur.com 2
http://reader.aol.com 1
http://prlog.ru 1
http://translate.googleusercontent.com 1
More...

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

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • John
  • Randy
  • John
  • JohnHow many Designer vs. Developers vs. Admin?How many have worked with:2007 branding2010 branding
  • John
  • John
  • RandyJohn to tell “stylist story”
  • JohnPublishing enablesAbility to apply master pages and themes to all sub-sites from the Web UIUseful for keeping branding consistent throughout SharePointMore flexible navigation providersIncludes page layouts for page level templating
  • John
  • Randy
  • Randy
  • John
  • John
  • John
  • Randy
  • JohnThink back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
  • Randy
  • Randy
  • John
  • John
  • John
  • Randy
  • Randy will the audience for a volunteer who’s never created a theme
  • Randy
  • RandyModern web design standards dictate that whenever possible tables are used only for data, not for page layout. In SharePoint 2007, because we are working with HTML written for IE5.5 we often find that table based branding is more efficient
  • Randy
  • Randy
  • Randy
  • Randy
  • Randy
  • Randy
  • Think back to the old days – if you wanted to change the look and feel for a site you had to manually update every page.
  • Can start from v4 or night and day as well
  • Can start from v4 or night and day as well
  • John

SharePoint 2010 Branding For The Masses SPSTC SharePoint 2010 Branding For The Masses SPSTC Presentation Transcript

  • SharePoint 2010Branding for the Masses
  • Randy Drisgill
    MVP SharePoint Server
    Branding and Design Lead – SP911
    Author
    Professional SharePoint 2010 Branding
    http://bit.ly/sp2010-brandingbook
    Real World SharePoint 2010
    Professional SharePoint 2007 Design
    Blog:
    http://blog.drisgill.com
    Twitter:
    http://twitter.com/Drisgill
    Orlando, FL
  • John Ross
    MVP SharePoint Server
    Sr. SharePoint Consultant – SP911
    Author
    Professional SharePoint 2010 Branding
    http://bit.ly/sp2010-brandingbook
    Real World SharePoint 2010
    Blog:
    http://www.sharepoint911.com/blogs/john
    Twitter:
    http://twitter.com/johnrossjr
    Blue Ribbon in Analogies 5th Grade
    Orlando, FL
  • And the Audience?
  • Agenda
    Important Terms
    Intro to the new User Experience
    Approaches to Branding
    Page Editing
    SharePoint 2010 Themes
    Alternate CSS
    Master Pages
  • What does branding mean?
    Personal Branding
  • What does branding mean?
    Branding:
    The act of building a specific image or identity that people recognize in relation to your company
    Website Branding:
    The colors, fonts, logos, and supporting graphics that make up the general look and feel of a corporate website.
    Branding for SharePoint:
    Master pages, page layouts, CSS, web parts, XSLT, images, etc.
  • Clarification
    The word “design” can often be confused with Software Design (planning for software development)
  • Vocabulary Lesson
    SharePoint Foundation 2010 is the free version of SharePoint
    Focused on collaboration with documents and light editing of web pages
    SharePoint Server 2010 is the licensed version of SharePoint
    Includes among other capabilities the Publishing Feature
    Much better platform for creating a strongly branded web site
  • Introduction
    Overview of the SharePoint 2010 User Experience
  • Web Standards Enhancements
    Web Content Accessibility Guidelines (WCAG) 2
    Cross-browser support: IE, Firefox, Safari
    NO IE6
    Less HTML Tables
    More XHTML compliant HTML
    CSS Sprites – Better caching for icons
  • Browsers in 2010
    Supported browsers on Windows:
    Internet Explorer 7+ 32-bit
    Supported browser options with known limitations:
    Internet Explorer 7+ 64-bit
    Firefox 3.6+ 32-bit on Windows
    Firefox 3.6+ on non Windows operating systems
    Safari 4.04+ on non Windows operating systems
    Warning: SharePoint 2010 does not support Internet Explorer 6 for content authoring
  • Approaches to Branding in SP2010
  • Low Effort Branding
    Default SharePoint UI + Themes
  • Wiki Sites vs. Publishing Sites
    Wiki
    New Team Site
    Easy page editing / linking
    Text Layouts = Quick prebuilt page layouts
    Add images and Web Parts easily
    Collaboration
    Publishing
    Enterprise Wiki replaces Collaboration Portal
    Wiki pages + Publishing
    Page Layouts, Workflows, Master pages, caching, etc.
    Communication
  • Wiki Pages
  • Page Editing Demo
  • Master Pages
    Master pages allow you to change the look and feel for an entire site simply by making changes to a single file
    Can’t have a SharePoint site without one – even if you use a theme!
  • Out of the Box Master Pages
    Default.master – Used with Visual Upgrade, very similar to the 2007 default.master
    Minimal.master – Used on sites that have their own navigation on need more space (like the Search Center)
    V4.master – The default master page for most of SharePoint 2010 including Foundation and Team Sites
    NightandDay.master – Included only with Publishing sites. Similar to Blueband.master in 2007, but with a different look and feel.
    Minimal.master is not the same as minimal master pages were in SharePoint 2007
  • OOTB Master Pages
  • New Theming Infrastructure
    SharePoint 2007 Themes
    Were hard to build
    Only worked with default.master
    “Had a nice personality”
  • SharePoint 2010 Themes
    Themes in SharePoint 2010 are completely different than SharePoint 2007
    Based on THMX files created by Office 2007 and above
    Define 12 colors and 2 fonts that can be applied throughout SharePoint including your own custom CSS
    Replace existing colors and fonts in CSS rather than applying another CSS file
    They do not include custom images or any HTML formatting
  • SharePoint 2010 Themes
  • SharePoint 2010 Themes
    SharePoint Server allows theme colors to be adjusted in the browser!
    CSS has comment’s in the markup that tell SharePoint what colors and fonts to replace
    Can apply to your custom branding if you use the comments / themeable folder
    /* [ReplaceColor(themeColor:"Light1")] */
    background-color:#fff;
  • Themes Demo
  • Medium Effort Branding
    Custom CSS
  • Why is CSS important with SharePoint?
    CSS used to override default SharePoint branding
    OOTB SharePoint uses a LOT of CSS
    Primary CoreV4.css file has over 7000 lines of CSS
    Besides the theming specific comments how many descriptive comments are in CoreV4.css?
  • Tools for Working with SharePoint & CSS
    SharePoint Designer 2010
    No easier way to interact with a SharePoint site
    Be careful in Production. Go wild in a local VM
    Can be more restricted by Admins
    CSS Tools
    IE8 Developer Tools AND Firebug for Firefox
    Highlight elements in the browser and see…
    What style is being applied to the HTML element
    How CSS classes are overriding each other
    Immediately see impact of CSS changes
  • F12 Developer Tools
  • Firebug
  • Firebug / IE Dev Tools Demo
  • Here’s how to order!
    SharePoint Designer 2010
    www.microsoft.com/spd
     IE Developer Tools
    Built in to IE8 and IE9 – Tools > (F12) Developer Tools
    IE7 – http://bit.ly/iedevtoolbar
    Firebug:
    http://getfirebug.com/
  • Custom CSS Options
    CSS Applied to a page with Content Editor Web Part
    Easy to do but only applies to a single page
    CSS Applied to a custom master page
    Requires some knowledge of master pages
    Using the Alternate CSS feature of SharePoint Server Publishing sites
    Easy to do but requires SharePoint Server Publishing
    Also possible with Powershell if you don’t have Publishing
  • Alternate CSS
  • Alternate CSS Demo
  • Applying Themes to Custom Branding
    When a theme is applied, SharePoint looks for specific CSS comments and replaces colors and fonts:
    /* [ReplaceColor(themeColor:"Light2")] */
    background-color:#707070;
    /* [RecolorImage(themeColor:"Dark2", method:"Tinting")] */
    background-image:url("/Style Library/images/logo.png");
    /* [ReplaceFont(themeFont: "MajorFont")] */
    font-family: verdana;
    Themable Locations – Theme comments only work here (or any sub-folder beneath each)
    14TEMPLATELAYOUTS1033STYLESThemable
    /Style Library/Themable/
    /Style Library/en-us/Themable/
  • Theme Comments Demo
  • Recreating in Your Environment
    Create a wide header graphic
    Apply header with Alternate CSS
    Add a logo by setting the site icon
    Add theme comments and apply a theme
  • Intro to Full Effort Branding
    Master Pages
    Likely we have ~10 minutes left – this will be fast
  • Master Pages
    Unlike themes, Master Pages allow full control over the contents of the page including HTML
    Adventure Works 2010 MSDN Article: http://bit.ly/Real-World-Branding
  • SharePoint Functional Elements
  • Creating New Master Pages
    One option is to copy one of the OOTB master pages
    V4.master
    NightAndDay.master
    Good for when you only need to make minor changes
    665 lines of code… how many comments?
    Ribbon takes up 1/3 of the code
  • Using a Starter Master Page
    The 2007 term “Minimal Master Page” has been replaced with “Starter Master Page”
    My SharePoint Server 2010 and SharePoint Foundation 2010 Starter Master Pages:
    startermasterpages.codeplex.com
    VERY Minimal Starter Master Page from Microsoft:
    code.msdn.microsoft.com/odcSP14StarterMaster
  • Starter Master Page
  • Contact Information
    Our Book:
    http://bit.ly/sp2010-brandingbook
    Blog:
    http://blog.drisgill.com
    http://www.sharepoint911.com/blogs/john
    Twitter:
    http://twitter.com/drisgill
    http://twitter.com/johnrossjr
  • Questions
  • SharePoint911
    Established in 2004 by SharePoint MVP Shane Young
    Full service SharePoint Consulting
    Project Planning
    Architecture
    Branding
    Development
    Help Desk
    We truly are “The SharePoint Authority.”
    http://www.sharepoint911.com