Sharepoint saturday Chicago - SP2013 Online Branding - Pallavi Sharma Nv 2 2013

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


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

http://letsgetalittletechnical.blogspot.com/

https://twitter.com/pallavis_tweets


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


Branding in SP2013


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


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


Rendered SP 2013 Page


SP2013 Online : UI


Change the OOB look

10 | SharePoint Saturday Chicago 2013

Twitter: @SPSChicago Hashtag #SPSChicago

Public Site SPOnline

https://sponlinedemo-public.sharepoint.com/






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



Snippet GalleryReady-to-use components



Managed Metadata Navigation



Metadata Navigation



Navigation Links



Minimal Master Page



Publish the Master Page / Apply



Custom Master Page



New Look .. Minimal Master



Customize Minimal Master



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.



Add a snippet for Search Box



Page Layouts



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.



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



Working with Design Files



DEMO SP Online Public Site

Design Manager Import a HTML Design Convert Master Add Snippets Publish WOW site !!



Publishing Site : Create Design Package



Import Design Package



Demo

Import Design package from the publishing site



Believe it or not… It’s SP2013 site..



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.



SPOnline Public sites only Creating Themes Create Composed Looks



THANKS !!



Housekeeping Please remember to submit your session

evaluation using our mobile application

Follow SharePoint Saturday Chicago on Twitter @spschicago & use 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

http://www.yammer.com/

https://www.yammer.com/microsoftmidwestcustomers

https://www.yammer.com/microsoftmidwestcustomers/groups/spschicago

https://www.yammer.com/microsoftmidwestcustomers/groups/spschicago



Questions? Email :[email protected] Twitter Id : @pallavis_tweets Blog :

http://letsgetalittletechnical.blogspot.com

mailto:[email protected]

https://twitter.com/pallavis_tweets

http://letsgetalittletechnical.blogspot.com/



Thanks to Our Sponsors!

Sharepoint saturday Chicago - SP2013 Online Branding - Pallavi Sharma Nv 2 2013

Technology

Transcript of Sharepoint saturday Chicago - SP2013 Online Branding - Pallavi Sharma Nv 2 2013