Getting Started with SharePoint Branding
-
date post
21-Oct-2014 -
Category
Technology
-
view
524 -
download
2
description
Transcript of Getting Started with SharePoint Branding
![Page 1: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/1.jpg)
Intro to SharePoint 2010 Branding
Thomas Daly, [email protected] @ NYC SharePoint Users Group
4/6/2011
![Page 2: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/2.jpg)
Who am I?A SharePoint developer who specializes in
implementing designs and creating web components to enhance the user interface and user experience.
![Page 3: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/3.jpg)
OutlineWhat is BrandingPlanningWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingThemesMaster PagesUpgradingDemo
![Page 4: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/4.jpg)
What is SharePoint Branding?Creating a visual identity in SharePointCovers everything, from editing pages,
webparts, css, master pages, themes, page layouts, jquery/javascript, xslt, CAML, SharePoint Designer . . .
Why brand SharePoint?Create a unique lookMaintain company visual identityCreate distinct web areasMake it not look like SharePoint
![Page 5: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/5.jpg)
PlanningIntranet or Internet scenarioCollaborational or InformationalDetermine Audience - target browsers, users,
& screen resolutionExisting company style or guidelinesCustom Page LayoutsCustom or 3rd Part ComponentsTimeframeApprovalDeployment
![Page 6: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/6.jpg)
What’s New – ChangesLess Table, mainly DIV basedNew objects – Ribbon, Dialog BoxesIncreased Browser SupportUtilizing Office Theme EngineIncrease Standards Compliance
![Page 7: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/7.jpg)
Tools & Supported BrowsersTools
IE Dev Toolbar (embedded in IE8)Firebug / Firebug LiteSharePoint Designer 2010ColorPicMultiple Versions
IE Firefox
vmware, virtual pc, or virtual box
Supported BrowsersInternet Explorer 7 & 8Mozilla Firefox 3.6Safari 4.04
![Page 8: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/8.jpg)
Other Browsers & ToolsFirebug Lite - Compatible
with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;
ChromeBuilt in developer tool bar
OperaDragonfly
![Page 9: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/9.jpg)
No IE 6 Support7 ways to tell your site visitors to upgrade
![Page 10: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/10.jpg)
Approaches to BrandingBasic
End User situation – none or limited knowledge of html or CSS
Updating theme, adding logo, selecting new master page.
IntermediateRequires – some ability to understand, write CSS,
htmlModifying current MasterPage, adding some custom
CSSAdvanced
Create Custom Master Page, custom CSS.
![Page 11: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/11.jpg)
ThemesSet of graphics and
cascading style sheets that control the look of your site.
Uses Office themes (.THMX)
12 colors, 2 fonts
![Page 12: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/12.jpg)
Themes3 Approaches to
creating/updating the themeExisting 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
![Page 13: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/13.jpg)
Theme EngineAttach Custom CSS – EnableCssTheming
Enable custom CSS to see themes - /Style Library/en-us/Themable
Capabilities – refReplace colors, Replace fontsRecolor images - Blending, Tinting, Fill
![Page 14: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/14.jpg)
Custom Style SheetsLink to your custom CSS in the MasterPage
Upload the CSS to the site, via Alternate CSS (Publishing Only)
![Page 15: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/15.jpg)
Master PagesStarter Master Pages – new term for Minimal
Master Pageshttp://startermasterpages.codeplex.com/
Includes 3 master pages: regular, foundations, meeting workspaces
Provides clean starting point for brandingWell documented for easy understanding
V3 Master Page Support
![Page 16: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/16.jpg)
jQuery’s Role in BrandingCreating interactive web componentsManipulating the DOM after the factAdd / Remove classesAdjust CSS stylesPerform adjustments to page base on other
criteriaAdd flare
![Page 17: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/17.jpg)
Upgrading BrandingTheme
No direct methodMaster Page
MSDN Article - Upgrading an Existing Master Page to the SharePoint Foundation Master Page http://msdn.microsoft.com/en-us/library/ee539981.aspx
![Page 18: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/18.jpg)
Deployment OptionsVaries depending on your branding effortSharePoint Designer Based
Upload master pages, images, CSS, & scriptsManual process per site
Solution Based DeploymentUpload master pages, images, CSS, & scriptsAutomatically activate theme, apply master
pages, build out site components.Repeatable branding application,
programmatically across sites
![Page 19: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/19.jpg)
DemoTheme
Create through PowerPoint, ImportUpdate through UITheme Tool
Alternate CSS methodShow V3 Master Page Support
OOTB v3.masterHeather base master page
Show Starter MasterApply Blank Master PageApply Customized Master Page
DeploymentFeature driven deployment
![Page 20: Getting Started with SharePoint Branding](https://reader036.fdocuments.in/reader036/viewer/2022070301/5446e8daafaf9f69178b47a8/html5/thumbnails/20.jpg)
Questions? Questions / Comments
Contact informationThomas M DalyEmail: [email protected] – http://thomasdaly.netTwitter - _TomDaly_