Upload
barb
View
77
Download
4
Tags:
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
Customizing your SharePoint sites using the SharePoint Theming EngineJonathan Keslin, Senior Developer, MicrosoftLionel Robinson, Program Manager, Microsoft
SPC326
Before we start...Session
Feedback channelsYammer on the second screen experienceTwitter: #spc326, #spc14, @MSFT_JKeslin, @LionelRo_MSFTSession evaluations on MySPCFind us after the talkApplause is appreciated
Slides &
Demos (60 min)
Q&A (15 min)
Introduction
Theming overview
Image recolorizatio
n
Theming foreground
images
Theming your site
logoFont
schemes
Composed Looks
What’s next
Closing and Q&A
Agenda
Theming overview
Demo
Changing the look in SharePoint
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
1. Composed looks - choose City2. Make it your own
A. Change backgroundB. Pick orange on black paletteC. Pick Oslo layoutD. Pick typewriter fontE. Click try it out
3. Preview4. Keep it
Change the look
Core product CSSStyle Library
Color paletteFont scheme
Background image
_themes folderOR
Theme Gallery
Un-themed CSS
Theme
specification files
Themed CSS
Under the hood
How it worksStart with un-themed CSS_layouts/15[/<lcid>]/styles/Themable/*.cssStyle Library[/<culture>]/Themable/*.css
For each file, iterate through the “interesting” bitsColors, font declarations, URL references
Transform annotated linesIf there’s an annotation preceding the “interesting” part, transform it based on the theme specification
Example
/*[ReplaceColor(themeColor:"BodyText")]*/ color: #000;
color: #fff;
Why theming?It’s the safest way to change colors and fontsNew features will continue to matchVariety through the ecosystem
Other approaches are fragileOverriding product CSS creates dependencies on continued use of classesCustom CSS that targets product HTML creates dependencies on specific markup
Recoloring images
How it worksfor each themable CSS file {
for each url(…) value in the file {if it is preceded with an annotation {
recolor it}
}}
Example
/*[RecolorImage(themeColor:"BodyText")]*/ background-image:url("myimage.png");
background-image: url("/_catalogs/theme/Themed/<HASH1>/myimage-<hash2>.themedpng");
Recoloring methods
Image recoloring methodsThree methods to recolor with:
Tinting
Blending
Filling
TintingMaintain the luminance and alpha channels of each pixel, but replace the hue and saturation.
BlendingFor each pixel, average the red, blue, and green channels between the old and new colors, while maintaining the alpha channel.
FillingSet each pixel to the new color, but maintain the original alpha channel.
Recoloring regions
Recoloring regions
Rectangular region Multiple regions Image clusters
Example/*[RecolorImage(themeColor:"ErrorText", method:"Filling",
includeRectangle:{x:1,y:30,width:97,height:97})]*/background-image: url("spcommon.png");
Detaching
DetachingRecolor an image or region in more than one wayOutput a separate copy of the image rather than layering recoloring rules
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
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
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
Background vs. foregroundBackground images are defined in CSS filesbackground-image: url(…);
Foreground images are defined in HTML<img src="…" />
Why foreground images?
Part of the page flow Links
Tooltips, alternate text High contrast mode
How to theme foreground images
CSS to tell the engine how to
theme the image
Code to find out where to find the
themed image
Part 1: CSS
hashOverride makes the output filename predictable/_catalogs/theme/Themed/<HASH1>/myimage-<hash2>.themedpngdetach keeps the foreground use separate from any background usesDoesn’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
Works for clusters tooJust skip the detach parameter
/*[RecolorImage(themeColor:"Hyperlink", method:"Filling", hashOverride:"myimage", includeRectangle:{x:100,y:50,width:32,height:32})]*/src: url("myimage.png");
ThemeKey attribute maps to the hashOverride in CSSIf the site is themed, show the themed imageElse, fall back to the original imageSubclasses ASP.NET Image control
Other attributes like CssClass and AlternateText work too
Part 2: ASP.NET
<SharePoint:ThemedForegroundImage runat="server" ThemeKey="myimage" ImageUrl="myimage.png" />
Part 2: ASP.NET
Many other image controls accept ThemeKey attributeClusteredImage, ClusteredHyperlink, see MSDN documentation for more
<SharePoint:ClusteredImage runat="server" ThemeKey="myimage" ImageUrl="myimage.png" OffsetX="100" OffsetY="50" Width="32" Height="32" />
Part 2: C#
Get the expected URL for the themed imageNot ideal – prefer the ASP.NET approach
SPUtility.GetThemedImageUrl("myimage.png" /* url */,"myimage" /* ThemeKey */);
Part 2: JS
Get the expected URL for the themed imageOnly works within a CSR context
Must register for the image in server-code for a Web PartOverride GetThemedImages() and/or GetThemedLocalizedImages()
GetThemedImageUrl("myimage");
Theming your site logo
Demo
Theming your site logo
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
Demo script – site logo theming
Using font schemes and WebFonts
Web safe vs. Web fonts
Georgia Palatino Linotype
Times New Roman
Arial
Comic Sans MSImpact
Tahoma Trebuchet MS
Verdana
Courier NewLucida Sans Unicode
Lucida ConsoleBodoni MTCentury Gothic
Harlow Solid Italic
RockwellTw Century MT
BroadwayTw Century MT Condensed Eras Medium
Franklin Gothic Medium
Edwardian ScriptOld English Text
GaramondPlaybill
OCR A Extended
Sample font scheme – web-safe fonts<?xml version="1.0" encoding="utf-8"?><s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"
xmlns:s="http://schemas.microsoft.com/sharepoint/"> <s:fontSlots> <s:fontSlot name="title"> <s:latin typeface="Georgia"/> <s:font script="Arab" typeface="Tahoma" /> <s:font script="Deva" typeface="Mangal" /> ... </s:fontSlot> <s:fontSlot name="navigation"> <s:latin typeface="Georgia"/> <s:font script="Arab" typeface="Tahoma" /> <s:font script="Deva" typeface="Mangal" /> ... </s:fontSlot> </s:fontSlots></s:fontScheme>
Sample font scheme – web fonts<?xml version="1.0" encoding="utf-8"?><s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body"
xmlns:s="http://schemas.microsoft.com/sharepoint/"><s:fontSlots>
<s:fontSlot name="title"><s:latin typeface="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:font script="Arab" typeface="Tahoma" /><s:font script="Deva" typeface="Mangal" />...
</s:fontSlot></s:fontSlots>
</s:fontScheme>
Demo
Making a custom font scheme using web fonts
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 WeberHand Bold 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 Next: composed looks
Demo script – custom font scheme
Where do I store my web-fonts?Font schemes just need the URL to the files
Self HostYou control the storage and availabilityTends to be more expensive
Font serviceGreater varietyFonts get updated tooEach service provider handles URLs to files differently
Composed looks
What’s in a lookThe pieces File type Where they goColor palette *.spcolor Theme gallery \ 15
folderFont scheme *.spfont Theme gallery \ 15
folderSite layout *.master + *.preview Masterpage galleryBackground image
*.jpg, *.bmp, *.png, *.gif
Site assets
Demo
Fun with composed looks
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 subsite and show that all these things apply Note that code will be available online
Next: client-side theming
Demo script – composed looks
What’s next for SharePoint Theming
Theming todayChoose a
look
Generat
e files
Preview the look
Commi
t
View
site
Client-side theming
Choose a look
Preview the look
Commit
View site
Demo
Client-side theming
In Chrome, go to client-side theming VM Run through custom buttons that change theme
Demo script – client-side theming
Client-side themingLots of upsideApplying a theme is fasterTheming is no longer a snapshot operationThemed files no longer take up your storage quotaPublic Javascript API to theme annotated CSS on demand
Little to no affect to youSame CSS annotationsSame theme specification filesSame end-user experienceSame browser support
Client-side themingComing soonIn development nowComing to SharePoint Online soonAlready themed sites will continue to work
Getting ready for itAvoid using C# and JS foreground image APIs - ASP.NET control is betterDeploy modern browsers
Recap
How theming works
Image recolorizatio
n
Theming foreground
images
Theming your site
logo
More infoShow Off Your Style with SharePoint ThemingA blog post by Lionel on the theming experience and underlying file formats
SPColor, SPFont, and SPTheme on MSDNClass documentation on the theming API
Theme Annotations in SharePoint 2010Documentation on the CSS annotations for theming. Mostly the same for SharePoint 2013
SharePoint Color Palette ToolVisual tool to build and customize SPColor palettes
Related sessionsBranding Internet facing web sites with SharePoint in the cloudJohn Ross & Randy DrisgillToday, 3:15pm-4:30pm, Delphino 4001-4102, #SPC290 (more info)
Site provisioning techniques with SharePoint appsBert Jansen & Vesa JuvonenThursday, 9:00am-10:15am, Palazzo Ballroom K,L, #SPC403 (more info)
Q&A
MySPC Sponsored by
connect. reimagine. transform.
Evaluate sessionson MySPC using yourlaptop or mobile device:myspc.sharepointconference.com