Sharepoint 2013 Branding Composed Looks

When planning SharePoint 2013 branding, I think about:

  • Page Layouts
  • Master Pages
  • CSS files
  • Images
  • Composed Looks, that defines fonts, palette, background image and default Master Page.

In this post, I have a Custom Master Page, CSS file and a new composed look.

I started with a SharePoint Publishing Site:

Theme4

I created an Empty SharePoint 2013 Visual Studio project and choose the deployment as a farm solution (but that should work also in a sandbox solution).

In my project, I add a module to my Custom Css file, a module to deploy my font and palette and a module to my Custom Master Page.

Theme5

I Created my CustomCss.css file, that is a copy from a SharePoint core css file (core15,css).

Add that file to CustomCss module, and changed the elements.xml file to:

<?xml version="1.0" encoding="UTF-8"?>
 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module Url="Style Library" Name="CustomCss">
 <File Url="en-US/Themable/Core Styles/CustomCss.css" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" Path="CustomCss\CustomCss.css"/>
 </Module>
 </Elements>

Add to my CustomDesign module the files:

fontscheme008.spfont (a copy from the core SharePoint file fontscheme001.spfont) and

Palette033.spcolor (also a copy from a SPS 2013 core palette file)

Changed elements.xml file of this module to:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module RootWebOnly="TRUE" Url="_catalogs/theme" Name="CustomDesign">
 <File Url="15/fontscheme008.spfont" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" Path="CustomDesign\fontscheme008.spfont"/>
 <File Url="15/Palette033.spcolor" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" Path="CustomDesign\Palette033.spcolor"/>
 </Module>
 </Elements>

To my CustomMasterPage Module, I add two files:

CustomTheme.master (copy from Seattle.master) and

CustomTheme.preview (also a copy from a core preview page), this file is needed, in SharePoint 2013 Site Settings/ Change Look, if you don’t have this file you’ll be unable  to choose your new look.

Changed this module elements.xml file to:

<?xml version="1.0" encoding="UTF-8"?>
 <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
 <Module Url="_catalogs/masterpage" Name="CustomMasterPage">
 <File Url="CustomTheme.master" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" Path="CustomMasterPage\CustomTheme.master"/>
 <File Url="CustomTheme.preview" Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" Path="CustomMasterPage\CustomTheme.preview"/>
 </Module>
 </Elements>

Changed my MasterPage to include my new Css file:

<SharePoint:CssRegistration Name=”<%$SPUrl:~sitecollection/Style Library/~language/Themable/Core Styles/CustomCss.css %>”  runat=”server”  EnableCssTheming=”true”/>

Replaced the line

<SharePoint:CssRegistration Name=”Themable/Core15.css”  runat=”server”  EnableCssTheming=”true”/>

I also add an eventReceiver to my feature, to create my new composed look in Composed Looks list (don’t Forget to call base.FeatureActivated(properties);):

  public override void FeatureActivated(SPFeatureReceiverProperties properties)
        {
            const string ComposedLookName = "CustomTheme";
            const string MasterPageUrl = "_catalogs/masterpage/CustomTheme.master";
            const string PaletteUrl = "_catalogs/theme/15/Palette033.spcolor";
            const string FontSchemeUrl = "_catalogs/theme/15/fontscheme008.spfont";
            const string ImageUrl = "";

            base.FeatureActivated(properties);
            var site = properties.Feature.Parent as SPSite;
            var web = site.RootWeb;

            if (web != null)
            {
                var serverRelativeUrl = web.ServerRelativeUrl;
                SPList list = web.Lists["Composed Looks"];
                SPListItem item = list.AddItem();

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

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

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

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

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

                item["DisplayOrder"] = 300;
                item.Update();

            }

       

After that I deployed my solution, and I could see my new files in target lists.

Then I went in SiteSettings/ Look and Feel/ Change the look, and selected my Custom Theme:

Theme9

And now, my Site looks like:

Theme8

References: http://msdn.microsoft.com/en-us/library/jj927175.aspx

Advertisements

Tags: , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: