Customizing your SharePoint sites using the SharePoint Theming EngineJonathan Keslin, Senior Developer, MicrosoftLionel Robinson, Program Manager, Microsoft

SPC326

Before we start...Session

Feedback channelsYammer on the second screen experienceTwitter: #spc326, #spc14, @MSFT_JKeslin, @LionelRo_MSFTSession evaluations on MySPCFind us after the talkApplause is appreciated

Slides &

Demos (60 min)

Q&A (15 min)

Introduction

Theming overview

Image recolorizatio

n

Theming foreground

images

Theming your site

logoFont

schemes

Composed Looks

What’s next

Closing and Q&A

Agenda

Theming overview

Demo

Changing the look in SharePoint

Ask how many have gone through the UX to gauge speed of demo

Go to SP site Click change the look on getting started carousel

1. Composed looks - choose City2. Make it your own

A. Change backgroundB. Pick orange on black paletteC. Pick Oslo layoutD. Pick typewriter fontE. Click try it out

3. Preview4. Keep it

Change the look

Core product CSSStyle Library

Color paletteFont scheme

Background image

_themes folderOR

Theme Gallery

Un-themed CSS

Theme

specification files

Themed CSS

Under the hood

How it worksStart with un-themed CSS_layouts/15[/<lcid>]/styles/Themable/*.cssStyle Library[/<culture>]/Themable/*.css

For each file, iterate through the “interesting” bitsColors, font declarations, URL references

Transform annotated linesIf there’s an annotation preceding the “interesting” part, transform it based on the theme specification

Example

/*[ReplaceColor(themeColor:"BodyText")]*/ color: #000;

color: #fff;

Why theming?It’s the safest way to change colors and fontsNew features will continue to matchVariety through the ecosystem

Other approaches are fragileOverriding product CSS creates dependencies on continued use of classesCustom CSS that targets product HTML creates dependencies on specific markup

Recoloring images

How it worksfor each themable CSS file {

for each url(…) value in the file {if it is preceded with an annotation {

recolor it}

}}

Example

/*[RecolorImage(themeColor:"BodyText")]*/ background-image:url("myimage.png");

background-image: url("/_catalogs/theme/Themed/<HASH1>/myimage-<hash2>.themedpng");

Recoloring methods

Image recoloring methodsThree methods to recolor with:

Tinting

Blending

Filling

TintingMaintain the luminance and alpha channels of each pixel, but replace the hue and saturation.

BlendingFor each pixel, average the red, blue, and green channels between the old and new colors, while maintaining the alpha channel.

FillingSet each pixel to the new color, but maintain the original alpha channel.

Recoloring regions

Recoloring regions

Rectangular region Multiple regions Image clusters

Example/*[RecolorImage(themeColor:"ErrorText", method:"Filling",

includeRectangle:{x:1,y:30,width:97,height:97})]*/background-image: url("spcommon.png");

Detaching

DetachingRecolor an image or region in more than one wayOutput a separate copy of the image rather than layering recoloring rules

Example/*[RecolorImage(themeColor:"Hyperlink", method:"Tinting")]*/

background-image: url("myimage.png");/*[RecolorImage(themeColor:"ErrorText", method:"Tinting")]*/

background-image: url("myimage.png");

Last annotation wins, both lines

point to the same image

Example/*[RecolorImage(themeColor:"Hyperlink", method:"Tinting")]*/

background-image: url("myimage.png");/*[RecolorImage(themeColor:"ErrorText", method:"Tinting",

detach:"true")]*/background-image: url("myimage.png");

Different images with different recolorings

Example/*[RecolorImage(themeColor:"ErrorText", method:"Filling",

includeRectangle:{x:1,y:30,width:97,height:97})]*/background-image: url("spcommon.png");

/*[RecolorImage(themeColor:"SearchURL", method:"Filling", includeRectangle:{x:1,y:30,width:97,height:97}, detach:"true")]*/background-image: url("spcommon.png");

Theming foreground images

Background vs. foregroundBackground images are defined in CSS filesbackground-image: url(…);

Foreground images are defined in HTML<img src="…" />

Why foreground images?

Part of the page flow Links

Tooltips, alternate text High contrast mode

How to theme foreground images

CSS to tell the engine how to

theme the image

Code to find out where to find the

themed image

Part 1: CSS

hashOverride makes the output filename predictable/_catalogs/theme/Themed/<HASH1>/myimage-<hash2>.themedpngdetach keeps the foreground use separate from any background usesDoesn’t need to be loaded – just present in a themable path

/*[RecolorImage(themeColor:"Hyperlink", method:"Filling", hashOverride:"myimage", detach:"true")]*/src: url("myimage.png");

Part 1: CSS

Works for clusters tooJust skip the detach parameter

/*[RecolorImage(themeColor:"Hyperlink", method:"Filling", hashOverride:"myimage", includeRectangle:{x:100,y:50,width:32,height:32})]*/src: url("myimage.png");

ThemeKey attribute maps to the hashOverride in CSSIf the site is themed, show the themed imageElse, fall back to the original imageSubclasses ASP.NET Image control

Other attributes like CssClass and AlternateText work too

Part 2: ASP.NET

<SharePoint:ThemedForegroundImage runat="server" ThemeKey="myimage" ImageUrl="myimage.png" />

Part 2: ASP.NET

Many other image controls accept ThemeKey attributeClusteredImage, ClusteredHyperlink, see MSDN documentation for more

<SharePoint:ClusteredImage runat="server" ThemeKey="myimage" ImageUrl="myimage.png" OffsetX="100" OffsetY="50" Width="32" Height="32" />

Part 2: C#

Get the expected URL for the themed imageNot ideal – prefer the ASP.NET approach

SPUtility.GetThemedImageUrl("myimage.png" /* url */,"myimage" /* ThemeKey */);

Part 2: JS

Get the expected URL for the themed imageOnly works within a CSR context

Must register for the image in server-code for a Web PartOverride GetThemedImages() and/or GetThemedLocalizedImages()

GetThemedImageUrl("myimage");

Theming your site logo

Demo

Theming your site logo

Show partner portal site and say we want to apply a logo to it Show logo image

Explain that we want to theme three regions Create CSS

In SPD, go to Style Library Create Themable folder Create blank CSS file inside Add theme annotation rule with appropriate theme key Save AND CHECK IN/PUBLISH the file

Edit master page Edit seattle.master Add ThemeKey attribute to SiteLogoImage control Save

Add logo image via site settings in browser Site settings -> Title, Description, and Icon Add icon

Show site with new icon Theme site Show themed icon

Demo script – site logo theming

Using font schemes and WebFonts

Web safe vs. Web fonts

Georgia Palatino Linotype

Times New Roman

Arial

Comic Sans MSImpact

Tahoma Trebuchet MS

Verdana

Courier NewLucida Sans Unicode

Lucida ConsoleBodoni MTCentury Gothic

Harlow Solid Italic

RockwellTw Century MT

BroadwayTw Century MT Condensed Eras Medium

Franklin Gothic Medium

Edwardian ScriptOld English Text

GaramondPlaybill

OCR A Extended

Sample font scheme – web-safe fonts<?xml version="1.0" encoding="utf-8"?><s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"

xmlns:s="http://schemas.microsoft.com/sharepoint/"> <s:fontSlots> <s:fontSlot name="title"> <s:latin typeface="Georgia"/> <s:font script="Arab" typeface="Tahoma" /> <s:font script="Deva" typeface="Mangal" /> ... </s:fontSlot> <s:fontSlot name="navigation"> <s:latin typeface="Georgia"/> <s:font script="Arab" typeface="Tahoma" /> <s:font script="Deva" typeface="Mangal" /> ... </s:fontSlot> </s:fontSlots></s:fontScheme>

Sample font scheme – web fonts<?xml version="1.0" encoding="utf-8"?><s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"

xmlns:s="http://schemas.microsoft.com/sharepoint/"><s:fontSlots>

<s:fontSlot name="title"><s:latin typeface="Bodoni Book"

eotsrc="/_layouts/15/fonts/BodoniBook.eot"woffsrc="/_layouts/15/fonts/BodoniBook.woff"ttfsrc="/_layouts/15/fonts/BodoniBook.ttf"svgsrc="/_layouts/15/fonts/BodoniBook.svg" largeimgsrc="/_layouts/15/fonts/BodoniBookLarge.png" smallimgsrc="/_layouts/15/fonts/BodoniBookSmall.png" />

<s:font script="Arab" typeface="Tahoma" /><s:font script="Deva" typeface="Mangal" />...

</s:fontSlot></s:fontSlots>

</s:fontScheme>

Demo

Making a custom font scheme using web fonts

Show the pieces we need 4 font files per font 2 images per font, large and small. These are for the font menu

In IE, go to Site Assets and drag+drop upload font files and large and small preview image

Create blank font scheme Create new txt file, rename to spc.spfont

Fill in font scheme with copy paste XML from existing scheme Open fontscheme007.spfont, copy whole file and paste into new font scheme

Replace /_layouts/15/fonts/ with /SiteAssets/ Replace TypewriterElite with WeberHandBold Replace Typewriter Elite with WeberHand Bold Replace Calibri with WeberHand Save Drag and drop into theme gallery\15 In IE, go to Change the Look, choose one of the looks, then show our scheme in the

dropdown Apply font scheme, show final result Next: composed looks

Demo script – custom font scheme

Where do I store my web-fonts?Font schemes just need the URL to the files

Self HostYou control the storage and availabilityTends to be more expensive

Font serviceGreater varietyFonts get updated tooEach service provider handles URLs to files differently

Composed looks

What’s in a lookThe pieces File type Where they goColor palette *.spcolor Theme gallery \ 15

folderFont scheme *.spfont Theme gallery \ 15

folderSite layout *.master + *.preview Masterpage galleryBackground image

*.jpg, *.bmp, *.png, *.gif

Site assets

Demo

Fun with composed looks

Show site that was processed through our tool The custom master page on it The design gallery Options within the dropdowns on the design builder

Go to VS to show the code sample Adds custom spcolor, spfont, and master files to setup path Elements manifest to add ghosted files for all of the above Event receiver to run code on site provisioning Receiver code that:

Sets custom master page Deletes OOB composed looks Deletes OOB master pages Empties theme gallery 15 folder and replaces it Provisions custom composed looks

Back to IE, create a subsite and show that all these things apply Note that code will be available online

Next: client-side theming

Demo script – composed looks

What’s next for SharePoint Theming

Theming todayChoose a

look

Generat

e files

Preview the look

Commi

t

View

site

Client-side theming

Choose a look

Preview the look

Commit

View site

Demo

Client-side theming

In Chrome, go to client-side theming VM Run through custom buttons that change theme

Demo script – client-side theming

Client-side themingLots of upsideApplying a theme is fasterTheming is no longer a snapshot operationThemed files no longer take up your storage quotaPublic Javascript API to theme annotated CSS on demand

Little to no affect to youSame CSS annotationsSame theme specification filesSame end-user experienceSame browser support

Client-side themingComing soonIn development nowComing to SharePoint Online soonAlready themed sites will continue to work

Getting ready for itAvoid using C# and JS foreground image APIs - ASP.NET control is betterDeploy modern browsers

Recap

How theming works

Image recolorizatio

n

Theming foreground

images

Theming your site

logo

More infoShow Off Your Style with SharePoint ThemingA blog post by Lionel on the theming experience and underlying file formats

SPColor, SPFont, and SPTheme on MSDNClass documentation on the theming API

Theme Annotations in SharePoint 2010Documentation on the CSS annotations for theming. Mostly the same for SharePoint 2013

SharePoint Color Palette ToolVisual tool to build and customize SPColor palettes

Related sessionsBranding Internet facing web sites with SharePoint in the cloudJohn Ross & Randy DrisgillToday, 3:15pm-4:30pm, Delphino 4001-4102, #SPC290 (more info)

Site provisioning techniques with SharePoint appsBert Jansen & Vesa JuvonenThursday, 9:00am-10:15am, Palazzo Ballroom K,L, #SPC403 (more info)

Q&A

MySPC Sponsored by

connect. reimagine. transform.

Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com