1. Branding SharePoint Rebooted – Online or OnPrem
Donald Donais
November 9th, 2016
Branding SharePoint Rebooted – Online or OnPrem
Todd C. Bleeker, PhD

2. Agenda
MNSPUG Information
Section 1
BREAK
Section 2
Giveaways

3. User Group Goal / Objectives
Develop and support a local community focused on Microsoft SharePoint Technologies
Educate user group members about SharePoint Technologies
Transfer knowledge within the community
Communicate best practices
Introduce new products / solutions

4. MNSPUG Sponsors Dedicated Sponsors Annual Sponsor
Avtex (
Microsoft (
Atomic Data (
K2 (
SharePoint User Group Support
Sponsorships Levels:
Gold Sponsorship - $500
Silver Sponsorship - $250
Wrox Press ( O’Reilly (

5. MN SharePoint Users Group Website
SharePoint Resource Documents
SharePoint Resource links
RSS Feeds
Meeting Schedule
Past User Group Presentations
Past User Group Recordings
Sponsorship Information

6. Social Networking
Linked In group – The most interactive… includes job postings…
Post Job Posting on the Jobs Discussion page
Twitter tags and #MNSPUG
Yammer – Minnesota SharePoint Users Group

7. Upcoming Schedule Next Meeting Ongoing Schedule
December 14th, 2016 – TBD
Microsoft Technology Center, Edina, MN
Check for updates!
Ongoing Schedule
2nd Wednesday of every month
9:00 to 11:30 am
Microsoft Technical Center – Edina

8. Local and Online Events
SPTechCon – December 5th – 8th at San Fransico Bay Area
Registration is OPEN -
$200 User Group Discount (Use Code SPUG)
SharePoint Fest – December 6th – 9th at Chicago
Registration is OPEN -
$200 Discount (Use Code HaaseChicago200)
Minnesota SharePint – December 20th, 4:30 p.m. at JJ’s Club House in Golden Valley
Anything Else?

9. Evaluations & Giveaways!

10. Speaker

11. Todd C. Bleeker, PhD Manager at RSM Manage DSM http://MSOUG.com
SharePoint MVP for a dozen years
Social
Bio:
Fun Fact: Spent New Years Eve breakdancing with Singaporean natives; that was many years ago.

12. Section 1

13. Why Change?
See MS PnP leader Vesa Juvonen's deck from Ignite 2015:

14. Summary From Vesa's Slide Deck – Minimize Future Maintenance
SMSG Readiness
5/7/2018
Summary From Vesa's Slide Deck – Minimize Future Maintenance
Avoid Master Pages
Changes to the OOB master pages require the constant need to modify custom Master Pages
Avoid Features (Imperative or Declarative)
Feature framework elements create dependency to xml files on the disk
Avoid Solutions (WSPs)
Even Sandbox solutions will impact future maintenance costs
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. A Lot Has Changed
Design View was eliminated from SharePoint Designer 2013
Composed Looks replaced Themes
Design Manager: Master Pages, Page Layouts, and Publishing Pages
Server-side code not allowed: Web Parts, Event Receivers, Imperative Workflow, Timer Jobs, etc.
No Full Trust or even Sandboxed WSPs: Features, Solutions (WSPs)
SharePoint Online is booming
Avoid Alternate CSS
Requires Publishing Site or custom code
Does not affect every page
Must be manually cascaded in future child Sites

16. Yet businesses still want a custom UX in SharePoint
Add jQuery, custom JavaScript, and custom CSS to every page in every SharePoint site within a Site Collection, even future Sites
This approach works in:
SharePoint Foundation/Server 2010
SharePoint Foundation/Server 2013
SharePoint Server 2016
SharePoint Online Classic Views
Accomplished using a special Custom Action called ScriptLink and some client-side JavaSript

17. Change virtually anything you want
Change the color, size, background of virtually any element
Hide elements that you don’t want the user to see, provide a UX to resurface it if you wish
Alter the color for each calendar in SharePoint Calendar Overlays
Alter the OOB styles used for Publishing Pages
Remove "Pages" from the SharePoint breadcrumb
Add animations and transitions, anything jQuery can do really
And so much more!

18. One Page CSS Primer Case sensitive language Inheritance Selectors
Specificity: Element (pseudo) > Class (pseudo) > Attribute > Id > Inline
The Cascade
!important should be used sparingly and then only to override inline styles
Inline style (adorning an HTML element)
External and Internal style sheets (in the head)
Browser default
SharePoint Elements, .Classes, #IDs
Custom Elements, .Classes, #IDs

19. CSS Demo
TIMING [10:30 – 10:45]

20. Tools jsLint.com or jsHint.com To validate JavaScript jsFiddle.net
To prototype HTML, CSS, and JavaScript (as well as popular Frameworks)
Paint : )
Notepad++

21. Editors Any text editor
Notepad, Notepad++, SPD, or Visual Studio can all be used
Free new Visual Studio Code
Notepad++ is a favorite:
Color coded makes it easier to read
Alt+N to Collapse, Alt+Shift+N to Expand
Edit > Blank Operations > TAB to Space
OR Settings > Preferences > Tab Settings > Replace by space
Alt+Shift+S (sans trailing spaces)

22. One Page jQuery Primer
Simplifies working with elements in the Document Object Model (DOM)
$ or jQuery or window.jQuery are all one in the same
Download a copy of jQuery (there are now three major versions)
OR reference a Content Delivery Network (CDN)
Selectors are just like CSS
$("p") selects all the paragraphs
$("div a") selects all the links within any div
Includes .functions that are great for animating elements

23. One Page JavaScript Primer
Case sensitive language
Isolate (encapsulate)
Run from the bottom up
Dev Toolbars
Debugging, Breakpoints, and the Console
Page Ready jQuery vs SharePoint Ready
Getting ahead of Page Ready

24. JavaScript Demo
TIMING [10:30 – 10:45]

25. Code Download: https://1drv.ms/u/s!AvzBFW_03uOpgTkbPGJneEo3N5b0
Break Time
Code Download:
TIMING [10:30 – 10:45]

26. Section 2

27. Standard Team Site (with a few changes)
Deactivated Minimal Download Strategy (MDS) Feature
It prevents JavaScript from running when SharePoint thinks its cached
Deactivated Site Notebook
Added a Tasks List
Put Site Pages onto the Quick Launch

28. Asset Locations Most assets go into folders in Site Assets: html
images js
Style Library for css (some use Site Assets)
Site Pages for pages (of course)

29. Assets Get Link from Version History in the new Modern experience
Access Assets from File Explorer
Via that Ribbon
Or File Explorer's Add a Network Location
Direct Edit using any text editor
Or drag and drop to update

30. Locating Assets Demo
TIMING [10:30 – 10:45]

31. Branding SharePoint Demo
TIMING [10:30 – 10:45]

32. Think About These Reduce page content flicker
Time JavaScript files to load at the correct time
Deference to CSS whenever possible
Protocol-less //ajax.googleapis.com CDN
Vet your JavaScript using jsLint.com
Keep good "AJAX" design characteristics in mind

33. Uncertain Tomorrow
SharePoint Online page structure is changing in O365 as Microsoft rolls out tomorrow's responsive vision by way of new "Modern" experiences
Modern Site Contents:
Modern Document Libraries:
This modern UX but it does not currently include CustomActions or jsLink:

34. Questions
TIMING [10:30 – 10:45]

35. Resources
Closing :: 11:20 – 11:30

36. Thanks for coming! Last But Not Least Please Fill Out Evaluations
Drawings for Giveaways
Online Participants Eval
Today’s Presenters:
Todd C. Bleeker, PhD
Thanks for coming!