As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.
2. Speaker Bio
Cathy
Dew
Consultant at Planet Technologies
Graphic Designer, Consultant and SharePoint MVP
Over 6 years of SharePoint
branding experience
Author: SharePoint 2010: Six in One
catpaint1 on Twitter
www.sharepointcat.com
17. Edit your Custom Master Page
HTML
file editing
Through your desired
program
Dreamweaver
in this demo
Map drive to your
machine
Or
open Windows Explorer View
19. Tips for Custom Master Page
If
working with HTML file… Don’t touch the
.master file
Editing the .master will invalidate the HTML file
20. Make use of Preview Pages
Create
a couple custom Preview Pages of
different site types.
Allows you to view your branding with content
from different sites and pages.
23. Look for Additions to HTML
On
import the Design Manager will insert some
<div>s to contain content and the head tags for
SharePoint
Ribbon
MainContentPlaceholder
25. Customize Master Page
In this demo we will add a code snippet to the
master page HTML file for our HTML converted file.
We will show the file in the Preview page.
26. Publish & Apply Custom
Master
In
order to apply the custom designs you have
created with publishing and the design
manager
Publish all files
CSS
Page
Layouts
Master Pages (HTML only)
Apply
the Master Page from the List
Publishing only
28. Create Custom CSS
Reference
a Custom CSS file with your Custom
Master Page
<link href="style.css" rel="stylesheet" type="text/css"
/>
29. Take it Further with CSS
With
the Color Palette you can use the palette
colors in your Custom CSS files
{
/* [ReplaceFont(themeFont:”title”)] */ font-family:
“Segoe UI Light”, “Segoe UI”, “Segoe”,
Tahoma,Helvetica,Arial,sans-serif;
/* [ReplaceColor(themeColor: “SiteTitle”)] */
color:#005050;
}
30. How to apply in O365
Solutions
are still the best
Apps can be created to house your branding
Visual Studio
Design Manager
Package
your Design
Add to the Solution Gallery
Apply
to Multiple Site Collections