slide1
Download
Skip this Video
Download Presentation
Customizing your SharePoint sites using the SharePoint Theming Engine

Loading in 2 Seconds...

play fullscreen
1 / 79

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


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

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 

slide6
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[/]/styles/Themable/*.css

Style Library[/]/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

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//myimage-.themedpng");

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 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");

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");

background vs foreground
Background vs. foreground

Background images are defined in CSS files

background-image: url(…);

Foreground images are defined in HTML

part 1 css
Part 1: CSS

hashOverridemakes the output filename predictable

/_catalogs/theme/Themed//myimage-.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

part 2 asp net1
Part 2: ASP.NET

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

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

slide58
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

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

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)

myspc
Sponsored byMySPC

Evaluate sessionson MySPC using yourlaptop or mobile device:

myspc.sharepointconference.com

connect. reimagine. transform.

ad