1 / 79

Customizing your SharePoint sites using the SharePoint Theming Engine - PowerPoint PPT Presentation

  • Uploaded on

Customizing your SharePoint sites using the SharePoint Theming Engine. Jonathan Keslin , Senior Developer, Microsoft Lionel Robinson, Program Manager, Microsoft. SPC326. Before we start. Session Feedback channels Yammer on the second screen experience

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Customizing your SharePoint sites using the SharePoint Theming Engine' - barb

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Customizing your sharepoint sites using the sharepoint theming engine
Customizing your SharePoint sites using the SharePoint Theming Engine

Jonathan Keslin, Senior Developer, Microsoft

Lionel Robinson, Program Manager, Microsoft


Before we start
Before we start... Theming Engine



Yammer on the second screen experience

Twitter: #spc326, #spc14, @MSFT_JKeslin, @LionelRo_MSFT

Session evaluations on MySPC

Find us after the talk

Applause is appreciated 

Agenda Theming Engine

Theming overview
Theming overview Theming Engine

Demo Theming Engine

Changing the look in SharePoint

Change the look
Change the look Theming Engine

  • 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

    • Composed looks - choose City

    • Make it your own

      • Change background

      • Pick orange on black palette

      • Pick Oslo layout

      • Pick typewriter font

      • Click try it out

    • Preview

    • Keep it

Under the hood
Under the hood Theming Engine

Color palette

Font scheme

Background image

Core product CSS

Style Library

_themes folder


Theme Gallery

How it works
How it works Theming Engine

Start with un-themed CSS


Style Library[/<culture>]/Themable/*.css

For each file, iterate through the “interesting” bits

Colors, font declarations, URL references

Transform annotated lines

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

Example Theming Engine

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

color: #fff;

Why theming
Why theming? Theming Engine

It’s the safest way to change colors and fonts

New features will continue to match

Variety through the ecosystem

Other approaches are fragile

Overriding product CSS creates dependencies on continued use of classes

Custom CSS that targets product HTML creates dependencies on specific markup

Recoloring images
Recoloring images Theming Engine

How it works1
How it works Theming Engine

for each themable CSS file {

for each url(…) value in the file {

if it is preceded with an annotation {

recolor it




Example Theming Engine


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

Recoloring methods
Recoloring methods Theming Engine

Image recoloring methods
Image recoloring methods Theming Engine

Three methods to recolor with:

Tinting Theming Engine

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

Blending Theming Engine

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

Filling Theming Engine

Set each pixel to the new color, but maintain the original alphachannel.

Recoloring regions
Recoloring regions Theming Engine

Recoloring regions1
Recoloring regions Theming Engine

Image clusters

Multiple regions

Rectangular region

Example Theming Engine

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

Detaching Theming Engine

Detaching Theming Engine

Recolor an image or region in more than one way

Output a separate copy of the image rather than layering recoloring rules

Example Theming Engine

/*[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 Theming Engine

/*[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 Theming Engine

/*[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");

Background vs foreground
Background vs. foreground Theming Engine

Background images are defined in CSS files

background-image: url(…);

Foreground images are defined in HTML

<imgsrc="…" />

Why foreground images
Why foreground images? Theming Engine

Part 1 css
Part 1: CSS Theming Engine

hashOverridemakes the output filename predictable


detachkeeps the foreground use separate from any background uses

Doesn’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 css1
Part 1: CSS Theming Engine

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

Works for clusters too

Just skip the detach parameter

Part 2 asp net
Part 2: ASP.NET Theming Engine

ThemeKey attribute maps to the hashOverride in CSS

If the site is themed, show the themed image

Else, fall back to the original image

Subclasses ASP.NET Image control

Other attributes like CssClass and AlternateText work too

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

Part 2 asp net1
Part 2: ASP.NET Theming Engine

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

Many other image controls accept ThemeKey attribute

ClusteredImage, ClusteredHyperlink, see MSDN documentation for more

Part 2 c
Part 2: C# Theming Engine

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

Get the expected URL for the themed image

Not ideal – prefer the ASP.NET approach

Part 2 js
Part 2: JS Theming Engine


Get the expected URL for the themed image

Only works within a CSR context

Must register for the image in server-code for a Web Part

Override GetThemedImages() and/or GetThemedLocalizedImages()

Theming your site logo
Theming your site logo Theming Engine

Demo Theming Engine

Theming your site logo

Demo script site logo theming
Demo script – site logo theming Theming Engine

  • 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

  • Web safe vs web fonts
    Web safe vs. Web fonts Theming Engine

    Old English Text

    Franklin Gothic Medium

    Harlow Solid Italic

    OCR A Extended

    Edwardian Script


    Century Gothic


    Palatino Linotype


    Bodoni MT

    Lucida Console


    Times New Roman

    Trebuchet MS



    Courier New

    Lucida Sans Unicode

    Tw Century MT

    Comic Sans MS




    Tw Century MT Condensed

    Eras Medium

    Sample font scheme web safe fonts
    Sample Theming Enginefont scheme– web-safe fonts






    <s:fontscript="Arab"typeface="Tahoma" />

    <s:fontscript="Deva"typeface="Mangal" />





    <s:fontscript="Arab"typeface="Tahoma" />

    <s:fontscript="Deva"typeface="Mangal" />





    Sample font scheme w eb fonts
    Sample font scheme – Theming Engineweb fonts





    <s:latintypeface="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:fontscript="Arab"typeface="Tahoma" />

    <s:fontscript="Deva"typeface="Mangal" />





    Demo Theming Engine

    Making a custom font scheme using web fonts

    Demo script custom font scheme
    Demo script – custom font scheme Theming Engine

    • Next: composed looks

    • 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 WeberHandBold

    • 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

    Where do i store my web fonts
    Where do I store my web-fonts? Theming Engine

    Font schemes just need the URL to the files

    Self Host

    You control the storage and availability

    Tends to be more expensive

    Font service

    Greater variety

    Fonts get updated too

    Each service provider handles URLs to files differently

    Composed looks
    Composed looks Theming Engine

    What s in a look
    What’s in a look Theming Engine

    Demo Theming Engine

    Fun with composed looks

    Demo script composed looks
    Demo script – composed looks Theming Engine

    • Next: client-side theming

    • 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 subsiteand show that all these things apply

    • Note that code will be available online

    Theming today
    Theming today Theming Engine

    Client side theming
    Client-side theming Theming Engine

    Demo Theming Engine

    Client-side theming

    Demo script client side theming
    Demo script – client-side theming Theming Engine

    • In Chrome, go to client-side theming VM

    • Run through custom buttons that change theme

    Client side theming1
    Client-side theming Theming Engine

    Lots of upside

    Applying a theme is faster

    Theming is no longer a snapshot operation

    Themed files no longer take up your storage quota

    Public JavascriptAPI to theme annotated CSS on demand

    Little to no affect to you

    Same CSS annotations

    Same theme specification files

    Same end-user experience

    Same browser support

    Client side theming2
    Client-side theming Theming Engine

    Coming soon

    In development now

    Coming to SharePoint Online soon

    Already themed sites will continue to work

    Getting ready for it

    Avoid using C# and JS foreground image APIs - ASP.NET control is better

    Deploy modern browsers

    Recap Theming Engine

    More info
    More info Theming Engine

    Show Off Your Style with SharePoint Theming

    A blog post by Lionel on the theming experience and underlying file formats

    SPColor, SPFont, and SPTheme on MSDN

    Class documentation on the theming API

    Theme Annotations in SharePoint 2010

    Documentation on the CSS annotations for theming. Mostly the same for SharePoint 2013

    SharePoint Color Palette Tool

    Visual tool to build and customize SPColor palettes

    Related sessions
    Related sessions Theming Engine

    Branding Internet facing web sites with SharePoint in the cloud

    John Ross & Randy Drisgill

    Today, 3:15pm-4:30pm, Delphino 4001-4102, #SPC290 (more info)

    Site provisioning techniques with SharePoint apps

    Bert Jansen & VesaJuvonen

    Thursday, 9:00am-10:15am, Palazzo Ballroom K,L, #SPC403 (more info)

    Q&A Theming Engine


    Sponsored by Theming Engine


    Evaluate sessionson MySPC using yourlaptop or mobile device:

    connect. reimagine. transform.