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

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


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

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

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 overview

Theming overview


Customizing your sharepoint sites using the sharepoint theming engine

Demo

Changing the look in SharePoint


Change the look

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

Under the hood

Color palette

Font scheme

Background image

Core product CSS

Style Library

_themes folder

OR

Theme Gallery


How it works

How it works

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

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

color: #fff;


Why theming

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

Recoloring images


How it works1

How it works

for each themable CSS file {

for each url(…) value in the file {

if it is preceded with an annotation {

recolor it

}

}

}


Example1

Example

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

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


Recoloring methods

Recoloring methods


Image recoloring methods

Image recoloring methods

Three methods to recolor with:


Tinting

Tinting

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


Blending

Blending

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


Filling

Filling

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


Recoloring regions

Recoloring regions


Recoloring regions1

Recoloring regions

Image clusters

Multiple regions

Rectangular region


Example2

Example

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


Detaching

Detaching


Detaching1

Detaching

Recolor an image or region in more than one way

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


Example3

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


Example4

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


Example5

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

Theming foreground images


Background vs foreground

Background vs. foreground

Background images are defined in CSS files

background-image: url(…);

Foreground images are defined in HTML

<imgsrc="…" />


Why foreground images

Why foreground images?


How to theme foreground images

How to theme foreground images


Part 1 css

Part 1: CSS

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

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

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

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

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

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


Customizing your sharepoint sites using the sharepoint theming engine

Demo

Theming your site logo


Demo script site logo theming

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

    Using font schemes and WebFonts


    Web safe vs web fonts

    Web safe vs. Web fonts

    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 font 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 – web 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>


    Customizing your sharepoint sites using the sharepoint theming engine

    Demo

    Making a custom font scheme using web fonts


    Demo script custom font scheme

    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

    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

    Composed looks


    What s in a look

    What’s in a look


    Customizing your sharepoint sites using the sharepoint theming engine

    Demo

    Fun with composed looks


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

    What’s next for SharePoint Theming


    Theming today

    Theming today


    Client side theming

    Client-side theming


    Customizing your sharepoint sites using the sharepoint theming engine

    Demo

    Client-side theming


    Demo script 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 theming1

    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 theming2

    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


    Recap

    Recap


    More info

    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

    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)


    Customizing your sharepoint sites using the sharepoint theming engine

    Q&A


    Myspc

    Sponsored by

    MySPC

    Evaluate sessionson MySPC using yourlaptop or mobile device:

    myspc.sharepointconference.com

    connect. reimagine. transform.


  • Login