Archive | Branding RSS for this section

Sharepoint 2013 Create a Minimal Master Page

To create a minimal Master Page in SharePoint 2013, you can use the Design Manager.

MP1

Choose the option “4 – Edit Master Pages” and then “Create a minimal master page”.

MP2

Give a name to your page and create it. Next, go to your master pages gallery, and you’ll see your new master page.

You can now, download a copy from your master page, and create a Visual Studio 2012, SharePoint 2013 empty project to deploy your new master page.

You need to add a new module to your project, add your master page file, and configure your elements.xml file:

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

I made some changes to the original master page, to use the PublishingWebControls:AuthoringContainer control:

<%-- SPG:

This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name.  While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.

To build the master page directly from this HTML file, simply edit the page as you normally would.  Use the Snippet Generator at http://win-f9pitqqtmf3/_layouts/15/ComponentHome.aspx?Url=http%3A%2F%2Fwin%2Df9pitqqtmf3%2F%5Fcatalogs%2Fmasterpage%2FMinimalTest%2Emaster to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code.   All updates to this file will automatically sync to the associated Master Page.

 --%>
<%@Master language="C#"%>
<%@Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@Register TagPrefix="wssucmui" TagName="MUISelector" Src="~/_controltemplates/15/MUISelector.ascx"%>
<%@Register TagPrefix="wssucw" TagName="Welcome" Src="~/_controltemplates/15/Welcome.ascx"%>
<%@Register TagPrefix="PublishingRibbon" TagName="PublishingRibbon" Src="~/_controltemplates/15/Ribbon.ascx"%>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<!DOCTYPE html >
<SharePoint:SPHtmlTag dir="<%$Resources:wss,multipages_direction_dir_value%>" ID="SPHtmlTag" runat="server" >
    <head id="Head1" runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=10" />
        
        
        
        
        <meta name="GENERATOR" content="Microsoft SharePoint" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Expires" content="0" />
        <SharePoint:RobotsMetaTag ID="RobotsMetaTag1" runat="server" />
        <SharePoint:PageTitle ID="PageTitle1" runat="server">
            <asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
            <SharePoint:ProjectProperty ID="ProjectProperty1" Property="Title" runat="server" />
            </asp:ContentPlaceHolder>
        </SharePoint:PageTitle>
        <SharePoint:StartScript ID="StartScript1" runat="server" />
        
        <SharePoint:CssLink ID="CssLink1" runat="server" Version="15">
            
        </SharePoint:CssLink>

        <SharePoint:ScriptLink ID="ScriptLink1" language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false" />
        <PublishingWebControls:AuthoringContainer runat="server" id="AuthoringContainer1" DisplayAudience="AuthorsOnly">
            <SharePoint:ScriptLink ID="ScriptLink2" language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false" />
            <SharePoint:ScriptLink ID="ScriptLink3" language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false" />
            <SharePoint:ScriptLink ID="ScriptLink4" language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
            <SharePoint:ScriptLink ID="ScriptLink5" language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />
        </PublishingWebControls:AuthoringContainer>



        <SharePoint:CacheManifestLink ID="CacheManifestLink1" runat="server" />
        <SharePoint:PageRenderMode ID="PageRenderMode1" runat="server" RenderModeType="Standard" />
        <SharePoint:CustomJSUrl ID="CustomJSUrl1" runat="server" />
        <SharePoint:SoapDiscoveryLink ID="SoapDiscoveryLink1" runat="server">
            
        </SharePoint:SoapDiscoveryLink>
        <SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
            <asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
            </asp:ContentPlaceHolder>
            <SharePoint:DelegateControl ID="DelegateControl1" runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true">
            </SharePoint:DelegateControl>
            <asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">
            </asp:ContentPlaceHolder>
        </SharePoint:AjaxDelta>
        <SharePoint:CssRegistration ID="CssRegistration1" Name="Themable/corev15.css" runat="server" />
        <SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
        <WebPartPages:SPWebPartManager ID="SPWebPartManager1" runat="server" />
        </SharePoint:AjaxDelta>
        
        
    </head>
    <body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();"><SharePoint:SPClientIDGenerator ID="SPClientIDGenerator1" runat="server" ServerControlID="DeltaPlaceHolderMain;DeltaPlaceHolderPageTitleInTitleArea;DeltaPlaceHolderUtilityContent" /><SharePoint:ImageLink ID="ImageLink1" runat="server" /><SharePoint:SharePointForm ID="SharePointForm1" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}" runat="server"><asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
        <div id="ms-designer-ribbon">
            
            <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;">
                    <SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="&lt;%$Resources:wss,master_turnonaccessibility%&gt;" EncodeMethod="HtmlEncode">
                    </SharePoint:EncodedLiteral>
                </a>
            </div>
            <div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
                <a id="linkTurnOffAcc" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;">
                    <SharePoint:EncodedLiteral ID="EncodedLiteral2" runat="server" text="&lt;%$Resources:wss,master_turnoffaccessibility%&gt;" EncodeMethod="HtmlEncode">
                    </SharePoint:EncodedLiteral>
                </a>
            </div>
            <PublishingRibbon:PublishingRibbon runat="server" />
            
        </div>
        <SharePoint:SPSecurityTrimmedControl ID="SPSecurityTrimmedControl1" runat="server" AuthenticationRestrictions="AnonymousUsersOnly">
            <wssucw:Welcome runat="server" EnableViewState="false" />
        </SharePoint:SPSecurityTrimmedControl>
        <div id="s4-workspace">
            <div id="s4-bodyContainer">
                <div>
                   
                    <SharePoint:AjaxDelta id="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                        <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
                            <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black;">
                                This area will be filled in by content you create in your page layouts.
                            
                            </div>
                        </asp:ContentPlaceHolder>
                    </SharePoint:AjaxDelta>
                    
                </div>
            </div>
        </div>
    <SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server"><asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server"><SharePoint:formdigest ID="Formdigest1" runat="server" /></asp:ContentPlaceHolder></SharePoint:AjaxDelta></SharePoint:SharePointForm><SharePoint:AjaxDelta id="DeltaPlaceHolderUtilityContent" runat="server"><asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server" /></SharePoint:AjaxDelta><asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderSearchArea" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTopNavBar" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftActions" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderSiteName" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageDescription" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderPageImage" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderMiniConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderNavSpacer" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" Visible="False" runat="server" /><asp:ContentPlaceHolder id="WSSDesignConsole" Visible="False" runat="server" /><asp:ContentPlaceHolder id="SPNavigation" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" Visible="False" runat="server" /><asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" Visible="False" runat="server" /></body>
</SharePoint:SPHtmlTag>

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

Sharepoint 2013 Create a Master Page based on Seattle.master with VS 2012

Create a new project:

Branding

Configure as a Sandbox Solution:

Branding1

Add a new Module to your project:

Branding2

Download a copy of Seattle.master:

Branding3

Add the copy to your module, rename to CustomMaster.master, and Change your elements.xml file to point to _catalogs\masterpage folder:

Branding4

Change your masterpage, to include a welcome message:

Branding7

Deploy your solution and change your Site master page:

Branding5

Verify that it shows your welcome message:

Branding6