SharePoint Branding for the Rest of Us
John Ross
John Ross
• Trainer for Critical Path Training
http://www.criticalpathtraining.com
• Sr. SharePoint Consultant for SharePoint911
http://www.sharepoint911.com
• Author MOSS Explained Wrox: Professional SharePoint 2007 Design
• Blog:
http://www.rossonmoss.com • Twitter: http://twitter.com/johnrossjr
• Orlando, FL (originally from Bradenton, FL for those folks in the 2nd row)
And the Audience?
Agenda
• What is branding? • Why bother with it? • We answer the question, “I’m not a designer, can I still make my site look nice?”
What does branding mean?
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.
• The word “design” can often be confused with Software Design (planning for software development)
WSS vs. MOSS
• Windows SharePoint Services v3 or WSS is the free version of SharePoint
Focused on collaboration with documents and light editing of web pages
• Microsoft Office SharePoint Server 2007 (MOSS) is the licensed version of SharePoint
Includes among other capabilities the Publishing Feature Much better platform for creating a strongly branded web site
Branding Methods for SharePoint
• SharePoint Themes
• Master Pages
• Page Layouts • SharePoint Page Elements
Field Controls, Web Part Zones, Web Parts, etc.
• Almost everything relies on Cascading Style Sheets
Themes
• Think of it as painting the walls • You can only change:
Background images Colors Fonts Hide certain elements Make minor movements and size changes
• Themes can style the Application pages (those with _layouts in the URL)
OOTB Themes
Custom Themes
Master Pages
• Master pages allow you to change the look and feel for an entire site simply by making changes to a single file
Unlike themes, Master Pages allow full control over the HTML of the page
• Can’t have a SharePoint site without it – even if you use a theme!
OOTB Master Pages
Custom Master Pages
Master Page vs. Theme
• Which option is best for your environment?
Anatomy of a SharePoint page
Master Page
Page Layout
Master Page
Field Control Web Part Zone Web Part Zones
Field Control
SharePoint Specific Elements
What exactly is simple branding?
• The OOTB stuff just isn’t cutting it
Colors don’t match corporate brand Change header
• You aren’t a design ninja but want to make a few simple changes • But where do you start…..?
Becoming a design ninja
• Step 1 - Size up your opponent • Step 2 – Learn the tools of the ninja
• Step 3 – Unleash your design ninja fury!
Tools of the Design Ninja
SharePoint Designer
• WYSIWYG Design View or use the Code View
Shows all branding currently being applied
• No compiled code
• Intellisense style code completion for HTML and ASP.net
We can’t do this all day…
• Not sold in stores
• Made in Redmond
• Beware of imitators
• SharePoint Designer
▫ http://doiop.com/SPD
Firebug and IE Dev Toolbar
• 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 • Useful for debugging when things are looking “funky”
IE Developers Toolbar
Firebug
Here’s how to order!
• SharePoint Designer
▫ http://doiop.com/SPD
• IE Dev Toolbar
▫ http://doiop.com/iedevtoolbar
• Firebug:
▫ http://getfirebug.com/
Alternate CSS
• Available in MOSS w/ Publishing
Need to use inline CSS or referenced CSS if you have WSS
• Impacts design on ALL pages like a theme
Called after SharePoint CSS Easy way to override styles!
• Apply a SharePoint Theme • Open a SharePoint site in SPD • Change the header with Alternate CSS in a custom Master Page
Recreating for your SP site…
1. Pick a theme that has colors close to what you are looking for 2. Use a header with approx these measurements:
Height: 102 px
Width: 1430 px
3. Use the sample alternate CSS 4. Tweak as needed
Contact Information
• Blog:
http://www.rossonmoss.com
• Twitter:
http://twitter.com/johnrossjr
• Email
john@sharepoint911.com