Design Archives - Bool Tech

In SharePoint 2013 the creation and application of themes has been revamped with the intent of making it easier to use, as well as more powerful (now including optional fonts and images). The new concept added is the Composed Look, a combination of a master page, color scheme and optional fonts, as well as an image. Using the design manager even a non-technical end user could create a complete design package, ready to deploy. What’s even better, you can mix and match parts, taking color scheme from one theme and the font from another, all from a web based wizard.

Although there is some material written already, much of it on Elio Struyf’s blog, I still struggled to make the various code snippets I found work together. With this article on SharePoint theming I hope to add to the available documentation and examples, as well as giving a light tutorial on creating a composed look to be used with a custom master page which includes custom elements and CSS.

To use the examples I give in this article you need to have the SharePoint Server Publishing Infrastructure (this in turn requires SharePoint Server, not Foundation) Site Collection feature activated, as well as the SharePoint Server Publishing Site feature.

SPColor

SharePoint 2013 color schemes are defined in the .spcolor file type. The easiest way to get started is grabbing an existing palette from the hive, in my case found at

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\GLOBAL\Lists\themes

1	C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\GLOBAL\Lists\themes

Alternatively you can grab one from /_catalogs/theme/15/ on a running site. Rename it to your wishes and take a look inside. It’s a pretty straight forward XML file, where each color is defined using hexadecimal. It does not handle RGB, and has an uncommon format for defining transparency. To create an 80% transparent black background (black is #000000) you would use CC000000. The two first characters define the transparency, the rest is a regular hexadecimal color.

Once you have your .spcolor edited to your liking, you’ll want to check out its effects on a live page. The fastest way would be to upload the .spcolor file to /_catalogs/theme/15 library. After this, it should be available as a color scheme in the Design Manager.

SPFont

Just like with the SPColor file, we can define our own fonts using the .spfont file type. It can be found in the same place as the .spcolor files on both hive and live sites. The XML is slightly more involved than the color scheme one, but far from complicated.

Looking at the existing font scheme files, you’ll see that it contains a list of fontSlots, where each fontSlot is given a name. The fontSlots in turn contain s:latin, s:ea and s:cs elements. These correspond to western, east asian and complex script languages. All three are required.

If your typeface is standard, you can simply stick it in there, but if you have your own font it requires a few extra steps. First of all, the s:latin element requires a few more attributes, namely svgsrc, eotsrc, woffsrc, ttfsrc, largeimgsrc and smallimgsrc. You have to set all of them if you set one. Just give them empty strings if you don’t want them. Each src attribute corresponds to the URL where the font will be hosted. The standard location will be /_layouts/15/fonts/ and maps to:

C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\Fonts

1	C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\Fonts

Note that the eot-file is required to display the font in Internet Explorer 8 and earlier. A second issue is that Chrome will not handle anti-aliasing correctly for woff/ttf files. It only shows svg fonts well. But sadly, it will use the first one given to it and SharePoint wont let you choose the order. If you have a working fix for this, please email me!

Custom Master Page

Just like the .spcolor file, creating the custom master page simply involves copying an existing one. I went with the Seattle file, but Oslo should work fine. You can grab it from the hive at

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\GLOBAL

1	C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\GLOBAL

or on a live site at /_catalogs/masterpage/Forms/AllItems.aspx. Once copied and renamed, you can upload it to the library at that URL. In order for this master page to be available as a Composed Look in the Design Manager, we also need a preview page. I will go into this a bit more later, but for now, make a copy of the corresponding preview file, rename it as you did the master page, and upload it appropriately.

If you want to make sure you are seeing your custom master page in the next step, add an element or just some text somewhere.

One simple way to set the master page is to open up the design manager (remember that you need to have activated the Publishing Server Site Collection feature, as well as the Publishing Site feature, for this to be available), choosing any Composed Look from the pre-installed looks, then selecting your custom master page in the Site Layout select menu. Apply this Composed Look and check it out, you should see your custom elements/text. You can also pick your color scheme from the color scheme select menu, but since they don’t have names, it may be hard to make out exactly which one is yours! Use the preview window to the right of the menu to determine what theme is correct.

Composed Look

In order not to have to generate this composed look by selecting the appropriate color scheme every time you change the theme, you can save a specific composed look. To do this, in Site Settings, under the Web Designer Galleries header, you should find the Composed Looks link. Clicking on it will take you to a list containing all the saved themes. Click new item and fill in the information to store your specific combination. Give it a useful name, as this will show up in the gallery.

Custom CSS

In order to accommodate all these different color themes SharePoint actually “compiles” all CSS files it has access to and replaces colors where the appropriate comments exist. For this to work, your CSS file must be registered on the custom master page using a directive like this:

&lt;SharePoint:CssRegistration 
    runat="server" 
    ID="css" 
    EnableCssTheming="true" 
    Name="my_stylesheet.css" 
    After="corev15.css" /&gt;

<SharePoint:CssRegistration

runat="server"

ID="css"

EnableCssTheming="true"

Name="my_stylesheet.css"

After="corev15.css" />

As an example, in order to replace a color in a CSS file with the color defined by the theme’s color scheme, you use the special “ReplaceColor” directive to the SharePoint theming engine. It looks something like this:

/* [ReplaceColor(“ContentAccent1”)] */ background-color: black;

1	/* [ReplaceColor(“ContentAccent1”)] */ background-color: black;

If properly run through the SharePoint theming engine, the background color will not be black, but rather whatever color is set in the color scheme (.spcolor file). In the same way, “ReplaceFont” handles fonts defined in the .spfont file:

/* [ReplaceFont(themeFont:”body”)] */ font-family: Verdana;

1	/* [ReplaceFont(themeFont:”body”)] */ font-family: Verdana;

Master Page Preview File

Now, a small gotcha. If you look at your master page preview file, you see it has a very custom format. The one thing that stands out is on the first line, the default color scheme. What caused me three days of headaches is my assumption that for a certain master page, the intended default .spcolor file should be here. This however causes a slightly surprising thing. The CSS files included in the master page will not be compiled when this .spcolor file is chosen in the composed look. Any replacecolor directives will be ignored. This is only for the .spcolor defined in the preview file. Any other color scheme chosen in the design manager will trigger the appropriate process. This of course works for the built-in master pages as the default color scheme is already defined in the CSS files. No replacements are required.

For example, the Seattle master page preview file defines Palette001.spcolor on its first line. If this combination is chosen, it will still render correctly, because all CSS files associated with this master page have these colors as default. The ReplaceColor directives are ignored.

If you, like me, have added custom elements and custom CSS on the master page however, your own files will also not be compiled. Even worse, if you’ve set your custom .spcolor in the preview file, you will be tearing your hair out trying to figure out why all other themes work but yours.

A simple solution is to define no .spcolor file on top of the master page preview. SharePoint handles this perfectly fine and all color schemes will trigger the replacement process in the SharePoint theming engine.

Putting it all together

Finally, let’s build an example project. We’ll create a color scheme, a custom master page with preview, a custom CSS file with ReplaceColor and tie it all together in a composed look.

Using the files we’ve found so far, we can put together a project that looks something like this:

Composed Looks Example Project

The color scheme and master page are provisioned through the feature:

Declarative Feature

We create our composed look and apply it using an EventReciever.

namespace SPExample.Features.Feature1
{
    using System;
    using System.Runtime.InteropServices;
    using Microsoft.SharePoint;

    [Guid("868c1fb8-44ed-4ee2-bd93-1f7910015dd9")]
    public class ApplyComposedLookEventReceiver : SPFeatureReceiver
    {
        public override void FeatureActivated(SPFeatureReceiverProperties properties)
        {
            var web = properties.Feature.Parent as SPWeb;
            if (web == null)
            {
                return;
            }

            var uri = new Uri(web.Url);
            var url = uri.AbsolutePath;

            if (url.Equals("/"))
            {
                url = string.Empty;
            }

            var colorPaletteUrl = url + "/_catalogs/theme/15/Bool.spcolor";
            var fontSchemeUrl = url + "/_catalogs/theme/15/Bool.spfont";
            string backgroundImageUrl = null;
            const bool shareGenerated = true;

            web.ApplyTheme(colorPaletteUrl, fontSchemeUrl, backgroundImageUrl, shareGenerated);
        }
    }
}

namespace SPExample.Features.Feature1

{

using System;

using System.Runtime.InteropServices;

using Microsoft.SharePoint;

[Guid("868c1fb8-44ed-4ee2-bd93-1f7910015dd9")]

public class ApplyComposedLookEventReceiver : SPFeatureReceiver

{

public override void FeatureActivated(SPFeatureReceiverProperties properties)

{

var web = properties.Feature.Parent as SPWeb;

if (web == null)

{

return;

}

var uri = new Uri(web.Url);

var url = uri.AbsolutePath;

if (url.Equals("/"))

{

url = string.Empty;

}

var colorPaletteUrl = url + "/_catalogs/theme/15/Bool.spcolor";

var fontSchemeUrl = url + "/_catalogs/theme/15/Bool.spfont";

string backgroundImageUrl = null;

const bool shareGenerated = true;

web.ApplyTheme(colorPaletteUrl, fontSchemeUrl, backgroundImageUrl, shareGenerated);

}

Sources:

http://tommdaly.wordpress.com/2012/12/19/deploying-a-custom-composed-look-in-sharepoint-2013/
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://www.estruyf.be/blog/how-to-create-a-master-page-that-is-available-for-the-composed-looks/
http://www.estruyf.be/blog/creating-a-new-color-palette-for-a-sharepoint-2013-composed-look/
http://spitems.wordpress.com/2011/01/17/using-theme-settings-in-style-sheets/

Kategoriarkiv: Design

Privat läge i Safari iOS7

Complete walkthrough on Composed Looks in SharePoint 2013