spsnyc 2011 getting started with share point branding
Post on 21-Oct-2014
598 views
DESCRIPTION
SharePoint Saturday NYC slide deck for Intro to SharePoint BrandingTRANSCRIPT
![Page 2: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/2.jpg)
Who am I?A SharePoint Developer – specializing in UI
objects (webparts, user controls) both ASP.NET & jQuery components.
A SharePoint Brander – transform designs into css/images to skin SharePoint.
![Page 3: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/3.jpg)
OutlineWhat is BrandingPlanningWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingThemesMaster PagesUpgradingDemo
![Page 4: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/7.jpg)
Tools & Supported BrowsersTools
IE Dev Toolbar (embedded in IE8)Firebug / Firebug LiteSharePoint Designer 2010ColorPicMultiple Versions
IE Firefox
vmware workstation, virtual pc, or virtual box
Supported BrowsersInternet Explorer 7 & 8Mozilla Firefox 3.6Safari 4.04
![Page 8: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/9.jpg)
No IE 6 Support7 ways to tell your site visitors to upgrade
![Page 10: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/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: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/16.jpg)
Search Master PageContains Minimal Components
Converting Custom Master Page into Search Center Master Page
![Page 17: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/17.jpg)
RibbonSecurity Trim RibbonCustomize Ribbon PositionRibbon placement, look, behavior
![Page 18: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/18.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 19: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/19.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 20: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/20.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 21: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/21.jpg)
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
Jquery Conditional CSS Enhance OOTB elements DOM Changes
Deployment Feature driven deployment
![Page 22: Spsnyc 2011 getting started with share point branding](https://reader035.vdocument.in/reader035/viewer/2022062613/5446e8f0afaf9f59178b4805/html5/thumbnails/22.jpg)
Questions? Questions / Comments
Contact informationThomas M DalyEmail: [email protected] – http://thomasdaly.netTwitter - _TomDaly_