1. Themes in SharePoint 2013 Steve Peschka Sr. Principal Architect
Microsoft SharePoint
9/21/2018
Themes in SharePoint 2013
Steve Peschka
Sr. Principal Architect
Microsoft Corporation
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Themes Theme styling has been dramatically improved:
Everything is now based on XML instead of a proprietary format
PowerPoint is no longer used to create custom themes
We support “web fonts”, enabling web site designers to build a custom look without having to worry whether clients have the fonts installed locally
You get much richer themes and common building blocks for customizing them
A background image, palette and fonts with live preview
The ability to preview how a site theme will look has been streamlined and no longer requires the publishing feature to work
In SharePoint 2013 the theme styling engine has been really improved. Everything is now based on an XML format instead of a proprietary format. That means you won’t be able to use PowerPoint anymore to create custom themes as you could have done in SharePoint 2010, but we benefit from having a standardized format for the theming files. We also support web fonts, which means that your theme can include links to font files as part of the theme definition. So you no longer have to limit yourself to the handful of generic fonts that are installed everywhere – instead you can stylize your theme however you want and if the client doesn’t have those fonts installed locally, they’ll be automatically downloaded and installed so your site still looks great. We also offer very rich building blocks for developing a theme. We have an easy to use background image, palatte and fonts. In addition you can flip through different options and get a live preview of what the theme will look like. Finally the ability to preview how a site theme will look has been streamlined. In SharePoint it could only be done on a site that had enabled the publishing feature, but in SharePoint 2013 it can be done on any site type, with or without the publishing feature.
******************************
From Lionel’s
Thanks for sending this out. With regards to the slides around theming:
I would remove the sentence about HTML5. Theming doesn’t really do anything special to support HTML5 even though we definitely don’t do anything to not support it. It just works.
I would call out the support for web fonts in our font schemes. This is a big win for web designers and power users that want a specific look for their site and want to take advantage of awesome fonts without worrying if they are installed on user machines.
On slide 35 you refreshed the thumbnail screenshot but not the instant preview thumbnail. We should definitely update this especially because the stale screenshot is of a masterpage that got cut and no longer ships with the product.
On the general messaging I would just note the following so you don’t get called out on anything while presenting.
Previewing a theme before applying existed in O14. Though this is what is better:
You don’t need publishing on to use it.
It’s streamlined as part of the theming experience.
We removed the need to re-run the engine if you preview and then apply so in the end you get to your themed site faster.
Sure here is the quick overview of web fonts.
With any website you pretty much have two options when choosing a font for your site.
The first option is that you stick to a set of fonts that are pretty much guaranteed to be installed on client machine.
These are called web-safe fonts and there are only around 8. There’s no definitive list (here is an example of good one but it pretty much boils down to fonts like Arial, Times new roman, and Tahoma.
You would also set a fallback stack just in case someone doesn’t have the first choice font installed they can fallback to a third, fourth, etc.
The second option is specify a web-font. In this case you give the browser the URL to the right font file and it gets downloaded along with the site.
This is the best way to make sure visitors to your site see the site as it was designed. Especially with heavy trends of site designs that depend on typography to portray a distinct personality.
You still need the fallback stack for browsers that don’t support web fonts though.
In SharePoint theming all you need to give us is:
In the font scheme file for the font slot you want:
Four URLs to the web-font files (4 for cross browser support).
Two images for us to render in the font picker (we don’t want to trigger the download of a limitless number of font files when you open the font picker).
And we take care of the rest J.
Is there an upgrade story for o14 THMX files? Well, we support them as a legacy file format in SharePoint 2013, and you will not be able to create new themes in PowerPoint 15.
Pg. 54

3. Theming Experience
This is what the theme experience looks like now, along with a sample of a site based on a customized theme:
Here are a couple of examples of what the theming experience looks like in SharePoint On the left side of the page you see the theme thumbnail gallery. It displays the out of the box themes that you can use as is, or you can customize them to look exactly like you want. On the right hand side of the page is an example of a site that has had a custom theme applied. In this case we just started with an out of the box theme, spent about 2 minutes customizing the layout, background picture, colors and fonts and that was it – we were ready to go. You can see how quickly you can make a site that doesn’t look anything like SharePoint if you want.
******************************
From my testing

4. Theme Selection and Configuration
This is the theme configuration page. In this case we’ve selected one of the out of the box themes, but you can see how easy it is to change it. For the background image we can just drag and drop a new image on the existing one to change it out. In the Colors drop down we get a complete list of all the color palette combinations. The important thing to note here is that these are really palettes – meaning a collection of colors that are applied to the site, so you don’t have to manually pick one item at a time and try and change will still trying to create an artistically appealing combination. Understanding the palette combinations is very easy too – all you have to do is hover over any of the color combinations and the display will be instantly updated to show how it looks. The same holds true for the site layout and fonts drop downs. Once you’ve made all your selections click the Try It Out button. A rendering of what your home page will look like with the theme you’ve chosen will be shown. At that point you can start using it, or you can choose to try again and continue to modify your selections until you find a combination you like.
Now lets take a look at a demo of the new theming capabilities in SharePoint 2013.
******************************
From my test

5. Themes
Demo

6. 9/21/2018 2:14 PM
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.