Click here to load reader
Upload
slides2sharefrompallavi
View
1.769
Download
2
Embed Size (px)
Citation preview
1 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
This session is focused on "How to make your SharePoint Site" not look like SharePoint" ..
Pallavi Sharma
Office 365: SharePoint Online : Branding your SharePoint 2013 Site
2 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
Speaker Neudesic – Principal Consultant in the Portals and Collaboration Practice
SP2010 MCTS
SP2007, SP2010, SP2013, o365
Blog http://letsgetalittletechnical.blogspot.com/
Earlier Speaker sessions : Migration across SharePoint Platforms for the "Chicago's SharePoint Migration
Breakfast Seminar Series" in May 2013 SharePoint Office 365 solution case study for Hyatt in "SharePoint Fest
Chicago" in 2012.
Twitter: @pallavis_tweets
3 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
Outline & Agenda SP2013 on the cloud What's new in SP2013 in branding? Design Manager Design Manager Snippets Gallery – Demo Apply Branding to o365 SP2013 site Demo
4 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
Branding in SP2013
5 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
The cloud .. o365 & SPOOffice 365 is a subscription-based online office and software plus services suite which offers access to various services and software built around the Microsoft Office platform.
Exchange Lync SharePoint Office web apps Office Suite
6 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
What’s new in SP2013: Branding
SP2013 Minimal SP knowledge necessary Use any HTML Design Files HTML 5 and CSS Design Manger Snippet Gallery Managed Metadata Navigation And more…..
SharePoint 2010• SharePoint Designer 2010• Master Pages & CSS• XSLT• Page Layouts
SharePoint 2007• SharePoint Designer 2007• Master Pages & CSS
7 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
Rendered SP 2013 Page
8 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
SP2013 Online : UI
9 | SharePoint Saturday Chicago 2013Twitter: @SPSChicago Hashtag #SPSChicago
Change the OOB look
10 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Public Site SPOnline
https://sponlinedemo-public.sharepoint.com/
11 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Design Manager• SharePoint with publishing enabled• Create designs outside of SharePoint, Use existing design software• Snippets Gallery and HTML editor• Convert HTML design into SharePoint Master Page• Master Page and HTML file joined together
12 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Snippet GalleryReady-to-use components
13 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Managed Metadata Navigation
14 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Metadata Navigation
15 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Navigation Links
16 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Minimal Master Page
17 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Publish the Master Page / Apply
18 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Custom Master Page
19 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
New Look .. Minimal Master
20 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Customize Minimal Master
21 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
SnippetsCopy and paste this snippet at the desired location in your HTML design file. Note that many HTML preview regions are read-only but will render properly on your site.
22 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Add a snippet for Search Box
23 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Page Layouts
24 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
DEMO : Public Site SP Online Admin Site SP Online Publishing site SP Online Public Site
SP Online Public Site Change the look - Themes Create a minimal Master Page Add a snippet for Minimal Master Page Change Navigations Add logo, Change Title etc.
25 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Design Manager : Before you begin At least one HTML file that will be
converted into a SharePoint master page One or more CSS files JavaScript files Images Other supporting files
26 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Working with Design Files
27 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
DEMO SP Online Public Site
Design Manager Import a HTML Design Convert Master Add Snippets Publish WOW site !!
28 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Publishing Site : Create Design Package
29 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Import Design Package
30 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Demo
Import Design package from the publishing site
31 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Believe it or not… It’s SP2013 site..
32 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
33 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
34 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
35 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
36 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
SPOnline Public Sites only - Design packages are not available in the public-facing website in Office 365 – CANNOT import and create packages.
To implement a fully custom design with Design Manager, you can invite a designer into your site by temporarily granting that person the Designer permission level.
37 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
SPOnline Public sites only Creating Themes Create Composed Looks
38 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
THANKS !!
39 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Housekeeping Please remember to submit your session
evaluation using our mobile application
Follow SharePoint Saturday Chicago on Twitter @spschicago & use hashtag #spschicago
40 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
YammerHow to Join the Conversation1. Download the Yammer phone app from the iTunes, Windows Phone, or
Android App Store.2. Join your company network, if you haven't already, at
http://www.yammer.com.3. Go to https://www.yammer.com/microsoftmidwestcustomers and click
"request an invitation". When you receive the invitation click "accept."4. Go to
https://www.yammer.com/microsoftmidwestcustomers/groups/spschicago and click "join." You will receive a welcome message in 24-72 hrs.
5. Once you have access you will be able to download posted presentations, ask questions of any of the subject matter experts and participate in any conversations going on in the group
41 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Questions? Email :[email protected] Twitter Id : @pallavis_tweets Blog :
http://letsgetalittletechnical.blogspot.com
42 | SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago
Thanks to Our Sponsors!