Download
1 / 79

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


  • 205 Views
  • 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

SPC326


Before we start
Before we start... Theming Engine

Session

Feedbackchannels

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

OR

Theme Gallery


How it works
How it works Theming Engine

Start with un-themed CSS

_layouts/15[/<lcid>]/styles/Themable/*.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
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

}

}

}


Example1
Example Theming Engine

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

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
Tinting Theming Engine

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


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


Example2
Example Theming Engine

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


Detaching
Detaching Theming Engine


Detaching1
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


Example3
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


Example4
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


Example5
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

/_catalogs/theme/Themed/<HASH1>/myimage-<hash2>.themedpng

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

GetThemedImageUrl("myimage");

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

    Arial

    Century Gothic

    Verdana

    Palatino Linotype

    Georgia

    Bodoni MT

    Lucida Console

    Tahoma

    Times New Roman

    Trebuchet MS

    Rockwell

    Impact

    Courier New

    Lucida Sans Unicode

    Tw Century MT

    Comic Sans MS

    Broadway

    Playbill

    Garamond

    Tw Century MT Condensed

    Eras Medium


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

    <?xmlversion="1.0"encoding="utf-8"?>

    <s:fontSchemename="Georgia"previewSlot1="title"previewSlot2="body"xmlns:s="http://schemas.microsoft.com/sharepoint/">

    <s:fontSlots>

    <s:fontSlotname="title">

    <s:latintypeface="Georgia"/>

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

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

    ...

    </s:fontSlot>

    <s:fontSlotname="navigation">

    <s:latintypeface="Georgia"/>

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

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

    ...

    </s:fontSlot>

    </s:fontSlots>

    </s:fontScheme>


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

    <?xmlversion="1.0"encoding="utf-8"?>

    <s:fontSchemename="Georgia"previewSlot1="title"previewSlot2="body"xmlns:s="http://schemas.microsoft.com/sharepoint/">

    <s:fontSlots>

    <s:fontSlotname="title">

    <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" />

    ...

    </s:fontSlot>

    </s:fontSlots>

    </s:fontScheme>


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


    Myspc

    Sponsored by Theming Engine

    MySPC

    Evaluate sessionson MySPC using yourlaptop or mobile device:

    myspc.sharepointconference.com

    connect. reimagine. transform.


    ad