1. Challenges of Branding
SharePoint
•
Consistency
•
Audience expectations
•
Audience needs
•
Internal buy-off of
SharePoint
•
Security; anonymous access
vs. forms authorization
•
Content Editing experience
2.
Simple
and Advanced options
•
Simple OOB customization
•
Update Logo
•
Apply a Theme
•
Adding web parts
•
Choose a different OOB
Master Page
•
More advanced customization
•
Master Pages
•
Layout pages
•
Creating custom themes
•
CSS
•
Simple OOB customization
demonstration
•
Update site with logo
•
Change site theme
•
Choose different Master
Page Template
•
Other master page templates
are available for download
•
Views in libraries
•
Content editor web part
(inline styling)
3.
Page
Rendering
4.
Tools
•
IE Developer Toolbar (free,
from Microsoft)
•
FireFox Firebug (free)
•
InstantSource
•
SharePoint Designer
5.
Advance
Customization: Master Pages
•
What is a Master page?
•
Navigation
•
Logos
•
Search box
•
Login control
•
Editing controls
•
CSS References
•
Content Regions
6.
Advanced
Customization: Working with CSS
•
There are 26 style sheets
used in SharePoint
•
Majority located on server:
•
Server Drive:\Program
Files\Common Files\Microsoft Shared\web server
extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
•
Some located in Style
Library (accessible via SPD)
•
Editing core.css is NOT
recommended
•
Core.css will load last,
unless you specify your custom css in Site Settings, or override the css in the
master page
7.
Advance
Customization: Custom Theme
•
Does NOT require SharePoint
Designer
•
Themes can be found on the
server in:
•
Server Drive:\Program
Files\Common Files\Microsoft Shared\web server
extensions\12\TEMPLATE\THEMES\[Theme Name]
•
Copy folder, rename
•
Rename .INF file, change
theme names in .INF file
•
Modify theme.css with
design changes
•
Store preview of theme in
TEMPLATE\IMAGES
•
Modify
TEMPLATE\Layouts\1033\spthemes.xml
8.
Advance
Customization: Layout Pages
•
What is a Layout Page?
•
Template for content
•
Based on a content type
•
Holds:
•
Field controls
•
Web Parts
•
Web Part Zones
•
Custom CSS, in-line styles
•
Careful when editing; don’t
rely on “Reset to Site Definition”; make a backup first
•
Override content
placeholders
•
Add web part zones
•
Configure web part zones
•
Add web parts
•
Either in or out of web
part zones
•
Insert content fields
•
Configure content fields
•
If need more content
fields, will need to create a new content type
•
Pages based upon a page
layout will be able to switch to another page layout that uses the same content
type as the original page layout
9.
Advance
Customization: Content Editor WP Styles
•
If NOT using theme: edit
HTML Editor CSS
•
Make a copy from the
server, save in Style Library
•
Add styles (prefix with
“.ms-rteCustom-”; e.g., .ms-rteCustom-FabrikamTitle)
•
Register css in master page
•
New styles will appear
in Content Editor Style dropdown
•
If you are using a theme,
you can add the styles you like into your theme’s css file.
10.
Advance
Customization: Search Results
•
Create new page
•
Use Search Results Page
Layout (this page layout can be customized if the layout needs to be changed)
•
Or create your own custom
search results page
•
Customize new page
•
Search control
•
Search results xslt
•
Go to Site Settings, Search
Settings and point to this new page
11.
Advance
Customization: Search Control
•
Modify CSS
•
Import customized search
control from search results page
•
On search results page,
customize the search control, then export the web part
•
Import web part into master
page
•
More difficult to customize
from the master page since it is a web part
•
Modify search results
control properties
•
Copy search control from
blueband.master
•
Register control
•
Modify tag properties of
control
•
“Ghosted” and “Unghosted
pages”
•
Performance impact of ~10%
