Deploying a custom ‘Composed Look’ in SharePoint 2013

There are two ways to deploy your custom composed look. Via XML / Elements file – the declarative way, or via feature receiver / C# the imperative way.

This article will cover both methods, it’s up to you to ultimately decide which way you prefer.

First I will explain how to put together the the Visual Studio 2012 project with the assets for the composed look. If you already know how to deploy these assets or they already exist in SharePoint skip down to the bottom.

The Project

Starting with an empty SharePoint Project – farm solution.

First we need to add 4 things which are used by the Composed Look.

• Master Page
• Theme (Colors)
• Font Scheme (Optional)
• Background Image (Optional)

Adding the Master Page

In the Visual Studio Project, right click the solution, select Add, select New Item

Select Module –> Name: MasterPage

In the MasterPage module, Delete the sample.txt

Copy in your masterpage

Edit the elements file, make it look like this.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPage" Url="_catalogs/masterpage">
    <File Url="MyMasterPage.master" Type="GhostableInLibrary" 
          Path="MasterPage\MyMasterPage.master" IgnoreIfAlreadyExists="true">
      <Property Name="UIVersion" Value="15" />
      <Property Name="ContentTypeId" Value="0x010105" />
    </File>
  </Module>
</Elements>

This completes this section.

Adding the Theme

In the Visual Studio Project, right click the solution, select Add, select New Item

Select Module –> Name: Theme

In the Theme module, Delete the sample.txt

Copy in your {theme}.spcolor

Edit the elements file, make it look like this.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Theme" Url="_catalogs/theme/15">
    <File Path="Theme\MyTheme.spcolor" Url="MyTheme.spcolor" 
          Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />
  </Module>
</Elements>

This completes this section.

Adding the Font Scheme

In the Theme module, add in your {fontScheme}.spfont

Edit the elements file, make it look like this

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Theme" Url="_catalogs/theme/15">
    <File Path="Theme\MyTheme.spcolor" Url="MyTheme.spcolor" 
          Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" />

<File Path=”Theme\MyFontScheme.spfont” Url=”MyFontScheme.spfont”
Type=”GhostableInLibrary” IgnoreIfAlreadyExists=”TRUE” />

  </Module>
</Elements>

This completes this section.

Adding the Background Image

In the Visual Studio Project, right click the solution, select Add, select New Item

Select, SharePoint “Images” Mapped Folder [Alternatively you can deploy this to the layouts]

Add your background image to that folder

This completes this section.

Adding a Composed Look – the Declarative Method

In the Visual Studio Project, right click the solution, select Add, select New Item

Select Empty Element –> Name: MyComposedLook

Edit the elements file

Make sure to match up the MasterPageUrl, ThemeUrl, ImageUrl, FontSchemeUrl.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <ListInstance FeatureId="{00000000-0000-0000-0000-000000000000}" 
                TemplateType="124" Title="Composed Looks" 
 Description="Use this list to store composed looks. These looks can be applied to this site by navigating to Site Settings and choosing Change the look." 
 Url="_catalogs/design" HyperlinkBaseUrl="http://intranet" RootWebOnly="FALSE">
    <Data>
      <Rows>
        <Row>
          <Field Name="ContentTypeId">0x0060A82B9F5D2F6A44A6A5723277B06731</Field>
          <Field Name="ID">100</Field>
          <Field Name="Title">My New Composed Look</Field>
          <Field Name="_ModerationStatus">0</Field>
          <Field Name="FSObjType">0</Field>
          <Field Name="FileLeafRef">2_.000</Field>
          <Field Name="Name">My New Composed Look</Field>
          <Field Name="MasterPageUrl">http://intranet/_catalogs/masterpage/MyMasterPage.master, /_catalogs/masterpage/MyMasterPage.master</Field>
          <Field Name="ThemeUrl">http://intranet/_catalogs/theme/15/MyTheme.spcolor, /_catalogs/theme/15/MyTheme.spcolor</Field>
          <Field Name="ImageUrl">http://intranet/_layouts/15/images/MyComposedLook/bg.gif, /_layouts/15/MyComposedLook/images/bg.gif</Field>
          <Field Name="FontSchemeUrl">http://intranet/_catalogs/theme/15/MyFontScheme.spfont, /_catalogs/theme/15/MyFontScheme.spfont</Field>
          <Field Name="DisplayOrder">1.0000000000000</Field>
        </Row>
      </Rows>
    </Data>
  </ListInstance>
</Elements>

This completes this section.

Adding a Composed Look – the Imperative Method

In the Visual Studio Project, right click the feature, select Add Event Receiver

Inside the FeatureActivated add the following

^{**This is experimental code, make sure to do your own testing if using**}

        const string CustomLookName = "MyComposedLook";
        const string MasterPageUrl = "_catalogs/masterpage/MyMasterPage.master";
        const string ThemeUrl = "_catalogs/theme/15/MyTheme.spcolor";
        const string FontSchemeUrl = "_catalogs/theme/15/MyFontScheme.spfont";
        const string ImageUrl = "_layouts/15/images/MyComposedLook/bg.gif";

            var site = properties.Feature.Parent as SPSite;

            if (site != null)
            {
                var serverRelativeUrl = site.RootWeb.ServerRelativeUrl;
                SPList list = site.RootWeb.Lists["Composed Looks"];

                bool match = false;
                foreach (SPListItem listItem in list.Items)
                {
                    if (listItem.Name == CustomLookName)
                    {
                        match = true;
                    }
                }

                if (!match)
                {
                    SPListItem item = list.AddItem();

                    item["Title"] = CustomLookName;
                    item["Name"] = CustomLookName;

                    SPFieldUrlValue masterUrl = new SPFieldUrlValue();
                    masterUrl.Url = serverRelativeUrl + MasterPageUrl;
                    masterUrl.Description = serverRelativeUrl + MasterPageUrl;
                    item["MasterPageUrl"] = masterUrl;

                    SPFieldUrlValue themeUrl = new SPFieldUrlValue();
                    themeUrl.Url = serverRelativeUrl + ThemeUrl;
                    themeUrl.Description = serverRelativeUrl + ThemeUrl;
                    item["ThemeUrl"] = themeUrl;

                    SPFieldUrlValue imageUrl = new SPFieldUrlValue();
                    imageUrl.Url = "";
                    imageUrl.Description = "";
                    item["ImageUrl"] = imageUrl;

                    SPFieldUrlValue fontSchemeUrl = new SPFieldUrlValue();
                    fontSchemeUrl.Url = "";
                    fontSchemeUrl.Description = "";
                    item["FontSchemeUrl"] = fontSchemeUrl;

                    item["DisplayOrder"] = 100;
                    item.Update();
                }

                site.RootWeb.ApplyTheme(serverRelativeUrl + ThemeUrl, 
                                          null, null, true);
            }

Adding the Modules/Elements to the Feature

Double click on your feature, and ensure that the MasterPage & Theme are included in the feature.

If your using the declarative method for the Composed Look then make sure the MyComposedLook Element is in the feature.

If your using the imperative method then your feature receiver will do the work when activated.

Make sure that the Scope is set to Site

This completes this section.

Deploy and enjoy

Advertisement