7/30/2019 SP Branding
1/27
SharePoint Branding 101:Its Not Your GrandDaddys HTML
Dux Raymond Sy, PMP
7/30/2019 SP Branding
2/27
Presentation Objectives
After completing this presentation, you will be able toleverage various techniques in SharePoint branding:
Browser-based site customization
Differentiating Application pages and Site pages Updating Core.css Leveraging Master and Content pages Creating Site Themes
7/30/2019 SP Branding
3/27
7/30/2019 SP Branding
4/27
Agenda
The Basics of SharePoint Branding Why Master Pages are Important Utilizing Core.css Creating a Site Theme Questions and Answers
7/30/2019 SP Branding
5/27
Heres What You Get Out of the Box
7/30/2019 SP Branding
6/27
Heres What Your Users Want
7/30/2019 SP Branding
7/27
Im A Web Design Guru, Doesnt that Count?
Branding in SharePoint is different Expertise in HTML, CSS and Photoshop is not enough
Comprehensive understanding of SharePoint is necessary
Tools to customize SharePoint branding Browser SharePoint Designer Text Editor Graphics software
7/30/2019 SP Branding
8/27
Fundamentals of SharePoint Pages
Application pages Generated for administration tasks and for maintaining lists/
libraries
Can be customized in SharePoint Designer but not throughbrowser
Considered trusted Site pages
New pages can be added via browser and in SharePointDesigner
Editable within the browser User with privileges may add or customize Web Parts Considered untrusted
Any controls must be registered as safe in web.config
7/30/2019 SP Branding
9/27
Example: SharePoint Application Page
7/30/2019 SP Branding
10/27
Example: SharePoint Site Page
7/30/2019 SP Branding
11/27
12 Hive
Special location on the web server C:\program files\common files\microsoft shared\webserver extensions\12
Being used by all SharePoint sites Critically affects the entire SharePoint server and all sites
12 Hive contains Main CSS file called Core.css XML configuration files Logs Some help files Common images files Themes Language-specific files
7/30/2019 SP Branding
12/27
Browser-based Customization
Site Theme Navigation
Top Link Bar Quick Launch
7/30/2019 SP Branding
13/27
Demonstration
Customizing a SharePoint sites look and feel from
the browser
7/30/2019 SP Branding
14/27
Agenda
The Basics of SharePoint Branding Why Master Pages are Important Utilizing Core.css Creating a Site Theme Questions and Answers
7/30/2019 SP Branding
15/27
Browser-based Customization is Limited
Theres only so much you can do Page layout cannot be altered
Fonts cannot be changed New Web Part zones cannot be defined
SharePoint Designer is your friend Enables you to further
customize a SharePointsites branding
7/30/2019 SP Branding
16/27
Master Pages
Provides reusable page structure Provide consistent look and feel for a group of pages
Saved as templates Found in Master Page Gallery within _Catalogs folder Changes to default Master Page are made to a copy, not to
the original
Master Pages are used in conjunction with Content Pages Not enough content to be displayed on their own Both are merged to provide the actual page displayed by the
browser
All sites come with a default master page calledDefault.master
7/30/2019 SP Branding
17/27
Content Placeholders
Content areas that will be used to insert content Defined in the Master Page within content regions
And in the Content Page
Master Page can define default content Can be overridden in Content Pages Simply define a content area with the required name
7/30/2019 SP Branding
18/27
Demonstration
Creating and applying a new Master page
7/30/2019 SP Branding
19/27
Agenda
The Basics of SharePoint Branding Why Master Pages are Important Utilizing Core.css Creating a Site Theme Questions and Answers
7/30/2019 SP Branding
20/27
SharePoints CSS File
Core.css Main style sheet per site collection
Found at C:\Program Files\Common Files\MicrosoftShared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
Modified using SharePoint Designer, not by navigating todisk file
A copy is made and added to your site from the site collectionautomatically
Can be reset to the original Referenced by within head section of a page
7/30/2019 SP Branding
21/27
Demonstration
Updating Core.css
7/30/2019 SP Branding
22/27
Agenda
The Basics of SharePoint Branding Why Master Pages are important Utilizing Core.css Creating a Site Theme Questions and Answers
7/30/2019 SP Branding
23/27
SharePoint Site Theme
Groups of CSS files and images Contained within a theme folder
Located at 12/TEMPLATES/THEMES
Theme folder INF file with theme name must also be present Folder name is the name of the theme e.g. Arctic
List of available themes defined in spthemes.xml 12/TEMPLATES/LAYOUTS/1033/SPThemes.xml
Referenced in Default.master Theme css files referenced after core.css Theme styles take precedence
7/30/2019 SP Branding
24/27
Demonstration
Creating a site theme
7/30/2019 SP Branding
25/27
Agenda
The Basics of SharePoint Branding Why Master Pages are important Utilizing Core.css Creating a Site Theme Questions and Answers
7/30/2019 SP Branding
26/27
Questions?
E-Mail: [email protected]
LinkedIn: meetdux.com/li
Blog: meetdux.com
Twitter: meetdux
How did you like the presentation?http://sp.meetdux.com/post_feedback.aspx
7/30/2019 SP Branding
27/27
Thank
You!
Top Related