Thanks to the Sponsors!
About MeSharePoint Consultant @
B&R Business Solutions, based out of NJA 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.
What are we going to cover?What is BrandingPlanningWhat’s New in 2010Tools & Supported BrowsersApproaches to BrandingThemesMaster PagesUpgradingDemo
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
PlanningIntranet or Internet scenarioCollaborational or InformationalDetermine Audience - target browsers, users,
& screen resolutionExisting company style or guidelinesCustom Page LayoutsCustom or 3rd Part ComponentsTimeframeApprovalDeployment
What’s New – ChangesLess Table, mainly DIV basedNew objects – Ribbon, Dialog BoxesIncreased Browser SupportUtilizing Office Theme EngineIncrease Standards Compliance
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
Other Browsers & ToolsFirebug Lite - Compatible
with all major browsers: IE6+, Firefox, Opera, Safari and Chrome;
ChromeBuilt in developer tool bar
OperaDragonfly
No IE 6 Support7 ways to tell your site visitors to upgrade
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.
ThemesSet of graphics and
cascading style sheets that control the look of your site.
Uses Office themes (.THMX)
12 colors, 2 fonts
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
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
Custom Style SheetsLink to your custom CSS in the MasterPage
Upload the CSS to the site, via Alternate CSS (Publishing Only)
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
Search Master PageContains Minimal Components
Converting Custom Master Page into Search Center Master Page
Ribbon
Security Trim RibbonCustomize Ribbon PositionRibbon placement, look, behavior
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
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
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
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 deploymentweb
Questions or Comments? Contact information
Thomas M DalyEmail - [email protected] - http://thomasdaly.netTwitter - _TomDaly_Company Site – http://www.bandrsolutions.com
Recommended
