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

image

Select Module –> Name: MasterPage

image

In the MasterPage module, Delete the sample.txt

Copy in your masterpage

image

Edit the elements file, make it look like this.

This completes this section.

Adding the Theme

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

image

Select Module –> Name: Theme

image

In the Theme module, Delete the sample.txt

Copy in your {theme}.spcolor

image

Edit the elements file, make it look like this.

This completes this section.

Adding the Font Scheme

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

image

Edit the elements file, make it look like this

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

This completes this section.

Adding the Background Image

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

image

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

Add your background image to that folder

image

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

image

Select Empty Element –> Name: MyComposedLook

image

Edit the elements file

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



  
    
      
        
          0x0060A82B9F5D2F6A44A6A5723277B06731
          100
          My New Composed Look
          0
          0
          2_.000
          My New Composed Look
          http://intranet/_catalogs/masterpage/MyMasterPage.master, /_catalogs/masterpage/MyMasterPage.master
          http://intranet/_catalogs/theme/15/MyTheme.spcolor, /_catalogs/theme/15/MyTheme.spcolor
          http://intranet/_layouts/15/images/MyComposedLook/bg.gif, /_layouts/15/MyComposedLook/images/bg.gif
          http://intranet/_catalogs/theme/15/MyFontScheme.spfont, /_catalogs/theme/15/MyFontScheme.spfont
          1.0000000000000

image

This completes this section.

Adding a Composed Look – the Imperative Method

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

image

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

image

This completes this section.

Deploy and enjoy

, ,
Show Comments

Tom Daly

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles