Office 365: SharePoint Online :
Branding your SharePoint 2013
Site
This session is focused on "How to make your SharePoint...




http://letsgetalittletechnical.blogspot.com/







@pallavis_tweets

Twitter: @SPSChicago Hashtag #SPSChicago...







Twitter: @SPSChicago Hashtag #SPSChicago

3

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

4

| SharePoint Saturday Chicago 2013
software plus services






Twitter: @SPSChicago Hashtag #SPSChicago

5

| SharePoint Saturday Chicago 2013
SharePoint 2007

• SharePoint Designer 2007
• Master Pages & CSS

SharePoint 2010
•
•
•
•

SharePoint Designer 2010
Master...
Twitter: @SPSChicago Hashtag #SPSChicago

7

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

8

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

9

| SharePoint Saturday Chicago 2013
https://sponlinedemo-public.sharepoint.com/

Twitter: @SPSChicago Hashtag #SPSChicago

10

| SharePoint Saturday Chicago 2...
•
•
•
•
•

SharePoint with publishing enabled
Create designs outside of SharePoint, Use existing design software
Snippets ...
Twitter: @SPSChicago Hashtag #SPSChicago

12

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

13

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

14

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

15

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

16

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

17

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

18

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

19

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

20

| SharePoint Saturday Chicago 2013
Copy and paste this snippet at the desired location in your HTML design file. Note
that many HTML preview regions are read...
Twitter: @SPSChicago Hashtag #SPSChicago

22

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

23

| SharePoint Saturday Chicago 2013










Twitter: @SPSChicago Hashtag #SPSChicago

24

| SharePoint Saturday Chicago 2013





Twitter: @SPSChicago Hashtag #SPSChicago

25

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

26

| SharePoint Saturday Chicago 2013








Twitter: @SPSChicago Hashtag #SPSChicago

27

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

28

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

29

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

30

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

31

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

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

37

| SharePoint Saturday Chicago 2013
Twitter: @SPSChicago Hashtag #SPSChicago

38

| SharePoint Saturday Chicago 2013




Twitter: @SPSChicago Hashtag #SPSChicago

39

| SharePoint Saturday Chicago 2013
1.
2.
3.

http://www.yammer.com
https://www.yammer.com/microsoftmidwestcustomers

4.

https://www.yammer.com/microsoftmidw...




Pallavi.Sharma@Neudesic.com
@pallavis_tweets
http://letsgetalittletechnical.blogspot.com

Twitter: @SPSChicago Hash...
Thanks to Our Sponsors!

Twitter: @SPSChicago Hashtag #SPSChicago

42

| SharePoint Saturday Chicago 2013
Upcoming SlideShare
Loading in...5
×

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

1,151
-1

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,151
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • In previous versions of SharePoint, branding a site required specific technical expertise about things like what content placeholders are required on a master page, or how a master page implements certain classes of styles. SharePoint 2013 introduces Design Manager—a new interface and central hub for managing all aspects of branding your SharePoint site. You can find the Design Manager in the top-level site for your site collection. It is a part of the Publishing Portal site collection template in SharePoint 2013.
  • SharePoint 2013 contains many ready-to-use components—like Web Parts and controls—that you can add to your site's pages. For example, by inserting a SharePoint component such as a search box or navigation control into your HTML master page, you can quickly and easily build a lot of functionality into your pages.
  • Enterprise managed metadata (EMM) capabilities introduced in are improved and extended in SharePoint 2013 for better performance, easier access through the UI, and taxonomy-driven navigation—called managed navigation.Managed navigation is the taxonomy-based alternative to the traditional SharePoint navigation feature—called structured navigation
  • SP Online Admin SiteSP Online Publishing siteSP Online Public SiteSP Online Public Site Change the look - ThemesCreate a minimal Master PageAdd a snippet for Minimal Master PageChange NavigationsAdd logo, Change Title etc.
  • Before you can use Design Manager, you need a design. You can create your own, or use a ready-made website template. A "design" is simply a group of files that implement the visual design of your site, most commonly:
  • Design packages are not available in the public-facing website in Office 365. 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.
  • In the public-facing website in Office 365, but not in on-premises SharePoint Server 2013 installations, Design Manager has the option of creating themes and composed looks
  • Sharepoint saturday Chicago - SP2013 Online Branding - Pallavi Sharma Nv 2 2013

    1. 1. Office 365: SharePoint Online : Branding your SharePoint 2013 Site This session is focused on "How to make your SharePoint Site" not look like SharePoint" .. Pallavi Sharma Twitter: @SPSChicago Hashtag #SPSChicago 1 | SharePoint Saturday Chicago 2013
    2. 2.    http://letsgetalittletechnical.blogspot.com/      @pallavis_tweets Twitter: @SPSChicago Hashtag #SPSChicago 2 | SharePoint Saturday Chicago 2013
    3. 3.       Twitter: @SPSChicago Hashtag #SPSChicago 3 | SharePoint Saturday Chicago 2013
    4. 4. Twitter: @SPSChicago Hashtag #SPSChicago 4 | SharePoint Saturday Chicago 2013
    5. 5. software plus services      Twitter: @SPSChicago Hashtag #SPSChicago 5 | SharePoint Saturday Chicago 2013
    6. 6. SharePoint 2007 • SharePoint Designer 2007 • Master Pages & CSS SharePoint 2010 • • • • SharePoint Designer 2010 Master Pages & CSS XSLT Page Layouts SP2013 Twitter: @SPSChicago Hashtag #SPSChicago        Minimal SP knowledge necessary Use any HTML Design Files HTML 5 and CSS Design Manger Snippet Gallery Managed Metadata Navigation And more….. 6 | SharePoint Saturday Chicago 2013
    7. 7. Twitter: @SPSChicago Hashtag #SPSChicago 7 | SharePoint Saturday Chicago 2013
    8. 8. Twitter: @SPSChicago Hashtag #SPSChicago 8 | SharePoint Saturday Chicago 2013
    9. 9. Twitter: @SPSChicago Hashtag #SPSChicago 9 | SharePoint Saturday Chicago 2013
    10. 10. https://sponlinedemo-public.sharepoint.com/ Twitter: @SPSChicago Hashtag #SPSChicago 10 | SharePoint Saturday Chicago 2013
    11. 11. • • • • • 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 Twitter: @SPSChicago Hashtag #SPSChicago 11 | SharePoint Saturday Chicago 2013
    12. 12. Twitter: @SPSChicago Hashtag #SPSChicago 12 | SharePoint Saturday Chicago 2013
    13. 13. Twitter: @SPSChicago Hashtag #SPSChicago 13 | SharePoint Saturday Chicago 2013
    14. 14. Twitter: @SPSChicago Hashtag #SPSChicago 14 | SharePoint Saturday Chicago 2013
    15. 15. Twitter: @SPSChicago Hashtag #SPSChicago 15 | SharePoint Saturday Chicago 2013
    16. 16. Twitter: @SPSChicago Hashtag #SPSChicago 16 | SharePoint Saturday Chicago 2013
    17. 17. Twitter: @SPSChicago Hashtag #SPSChicago 17 | SharePoint Saturday Chicago 2013
    18. 18. Twitter: @SPSChicago Hashtag #SPSChicago 18 | SharePoint Saturday Chicago 2013
    19. 19. Twitter: @SPSChicago Hashtag #SPSChicago 19 | SharePoint Saturday Chicago 2013
    20. 20. Twitter: @SPSChicago Hashtag #SPSChicago 20 | SharePoint Saturday Chicago 2013
    21. 21. Copy 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. Twitter: @SPSChicago Hashtag #SPSChicago 21 | SharePoint Saturday Chicago 2013
    22. 22. Twitter: @SPSChicago Hashtag #SPSChicago 22 | SharePoint Saturday Chicago 2013
    23. 23. Twitter: @SPSChicago Hashtag #SPSChicago 23 | SharePoint Saturday Chicago 2013
    24. 24.          Twitter: @SPSChicago Hashtag #SPSChicago 24 | SharePoint Saturday Chicago 2013
    25. 25.      Twitter: @SPSChicago Hashtag #SPSChicago 25 | SharePoint Saturday Chicago 2013
    26. 26. Twitter: @SPSChicago Hashtag #SPSChicago 26 | SharePoint Saturday Chicago 2013
    27. 27.        Twitter: @SPSChicago Hashtag #SPSChicago 27 | SharePoint Saturday Chicago 2013
    28. 28. Twitter: @SPSChicago Hashtag #SPSChicago 28 | SharePoint Saturday Chicago 2013
    29. 29. Twitter: @SPSChicago Hashtag #SPSChicago 29 | SharePoint Saturday Chicago 2013
    30. 30. Twitter: @SPSChicago Hashtag #SPSChicago 30 | SharePoint Saturday Chicago 2013
    31. 31. Twitter: @SPSChicago Hashtag #SPSChicago 31 | SharePoint Saturday Chicago 2013
    32. 32. Twitter: @SPSChicago Hashtag #SPSChicago 32 | SharePoint Saturday Chicago 2013
    33. 33. Twitter: @SPSChicago Hashtag #SPSChicago 33 | SharePoint Saturday Chicago 2013
    34. 34. Twitter: @SPSChicago Hashtag #SPSChicago 34 | SharePoint Saturday Chicago 2013
    35. 35. Twitter: @SPSChicago Hashtag #SPSChicago 35 | SharePoint Saturday Chicago 2013
    36. 36. Twitter: @SPSChicago Hashtag #SPSChicago 36 | SharePoint Saturday Chicago 2013
    37. 37.   Twitter: @SPSChicago Hashtag #SPSChicago 37 | SharePoint Saturday Chicago 2013
    38. 38. Twitter: @SPSChicago Hashtag #SPSChicago 38 | SharePoint Saturday Chicago 2013
    39. 39.   Twitter: @SPSChicago Hashtag #SPSChicago 39 | SharePoint Saturday Chicago 2013
    40. 40. 1. 2. 3. http://www.yammer.com https://www.yammer.com/microsoftmidwestcustomers 4. https://www.yammer.com/microsoftmidwestcustomers/groups/spschicago 5. Twitter: @SPSChicago Hashtag #SPSChicago 40 | SharePoint Saturday Chicago 2013
    41. 41.    Pallavi.Sharma@Neudesic.com @pallavis_tweets http://letsgetalittletechnical.blogspot.com Twitter: @SPSChicago Hashtag #SPSChicago 41 | SharePoint Saturday Chicago 2013
    42. 42. Thanks to Our Sponsors! Twitter: @SPSChicago Hashtag #SPSChicago 42 | SharePoint Saturday Chicago 2013
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×