Customizing your sharepoint sites using the sharepoint theming engine
Sponsored Links
This presentation is the property of its rightful owner.
1 / 79

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

  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Customizing your SharePoint sites using the SharePoint Theming Engine

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

Jonathan Keslin, Senior Developer, Microsoft

Lionel Robinson, Program Manager, Microsoft


Before we start...



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 


Theming overview


Changing the look in SharePoint

Change the look

  • 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

Color palette

Font scheme

Background image

Core product CSS

Style Library

_themes folder


Theme Gallery

How it works

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


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

color: #fff;

Why theming?

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

How it works

for each themable CSS file {

for each url(…) value in the file {

if it is preceded with an annotation {

recolor it






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

Recoloring methods

Image recoloring methods

Three methods to recolor with:


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


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


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

Recoloring regions

Recoloring regions

Image clusters

Multiple regions

Rectangular region


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



Recolor an image or region in more than one way

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


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


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


/*[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. foreground

Background images are defined in CSS files

background-image: url(…);

Foreground images are defined in HTML

<imgsrc="…" />

Why foreground images?

How to theme foreground images

Part 1: CSS

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: CSS

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

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.NET

<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#

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


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

Demo script – site logo theming

  • 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

  • Using font schemes and WebFonts

    Web safe vs. Web fonts

    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






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

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





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

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





    Sample font scheme – web 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" />






    Making a custom font scheme using web fonts

    Demo script – custom font scheme

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

    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

    What’s in a look


    Fun with composed looks

    Demo script – composed looks

    • 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

    What’s next for SharePoint Theming

    Theming today

    Client-side theming


    Client-side theming

    Demo script – client-side theming

    • In Chrome, go to client-side theming VM

    • Run through custom buttons that change theme

    Client-side theming

    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 theming

    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


    More info

    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

    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)


    Sponsored by


    Evaluate sessionson MySPC using yourlaptop or mobile device:

    connect. reimagine. transform.

  • Login