About Our Design Environment

Because we no longer are required to use SharePoint Designer to work with branding artifacts, we want to walk you through the branding experience using a common tool, and we chose Adobe Dreamweaver (CS6 in fact), as this tool is popular with web developers and designers. We are also executing our branding exercise on a MacBook Pro, as we know many designers use this platform in conjunction with the Adobe Creative Suite, and to demonstrate how the activity of branding SharePoint 2013 is no longer dependent on Microsoft tools. You might be wondering if Dreamweaver is officially supported by SharePoint 2013. We are happy to let you know that it is fully supported on both Mac and PC. With SharePoint 2013, the Web Distributed Authoring and Versioning (WebDAV) protocol now makes it possible to use tools such as Microsoft Expression Web, Adobe Dreamweaver, and Microsoft Visual Studio, in addition to SharePoint Designer 2013, to connect to and manipulate site files. Although WebDAV has been used since SharePoint 2001, it was used mostly to issue search queries, officially at least. With SharePoint 2013, Microsoft opened it up to allow other tools to communicate via this protocol with SharePoint and actually modify files for the purposes of branding.

To get started, we give you an overview of the new Design Manager, which is the web-based tool we use throughout this exercise.

Introducing Design Manager

With the new process for branding SharePoint 2013 comes a new set of features that help execute this activity. Design Manager is one of those new features and is part of the improved Publishing feature available on publishing sites by default and on other sites such as team sites by activating the Publishing feature via Site Settings.

Design Manager is one of the most exciting new features as it relates to the branding aspect of SharePoint. Design Manager is accessible directly from the new Settings menu (similar to the old Site Actions menu) as well as from the Site Settings page. When you navigate to the Design Manager page, you will notice there are several tasks, although in our opinion you do not have to perform them in that order, and you generally won’t. See Figure 4-2 for a view of the Design Manager’s left menu, specifically option 3, Upload Design Files. Designers can leverage this tool throughout the design cycle to carry out various tasks, such as creating and editing HTML master pages and deploying the supporting artifacts. In addition, the Design Manager interface allows you to manage device channels, edit display templates, edit page layouts, and create a design package.

Because we review the many options available to us in Design Manager throughout this book, we jump right in here and start working on our master page. Don’t worry, we return to Design Manager many times and will learn all of the different tools available. To begin working with our master page, we will work through the first few steps, although the order of executing these steps does not necessarily reflect the numbered order shown in Figure 4-2. Our order reflects our experience of what is appropriate for most scenarios including ours and it is as follows:

1. Prepare the HTML file for conversion to an HTML master page.
2. Map the Master Page Gallery to a local drive and upload the Design folder that contains all of the site HTML, CSS, JavaScript, and Images.
3. Create an HTML master page from an HTML prototype.
4. Modify the HTML master page: Fix common warnings, clean up newly created HTML master page files, and make common CSS adjustments.
5. HTML master page SharePoint-generated markup: Review the markup.
6. Add snippets from the Snippet Gallery.
7. Publish and assign the newly created HTML master page as the site master page.
8. Create design package (optional) for reusability on other site collections.

Map the Master Page Gallery to a Local Drive

To map the Master Page Gallery to a local drive on our MacBook Pro, we follow these steps. If you are on a PC, follow the traditional network drive mapping steps.

1. Navigate to Design Manager in a browser and click on Step 3, Upload Design Files. On the Upload Design Files page shown in Figure 4-2, obtain the location of your Master Page Gallery. Although Figure 4-2 provides a location of http://www.spectergroup.com/_catalogs/masterpage, for this exercise, we are using the following URL: http://192.168.3.105:4500/_catalogs/masterpage. You will, of course, be provided your own local SharePoint location by Design Manager.
2. We need to map this URL to a local drive, on the Mac, using the Finder, select Go Connect to Server or (Command + K).
3. In the Server Address text field, paste the URL from Step 1 and press + to add it to the Favorite Servers list as shown in Figure 4-3.

   

   Figure 4-3. Mapping Master Page Gallery as a local drive dialog box on the Mac where Adobe Dreamweaver is installed

4. Click Connect. A successful connection will open up the entire masterpage folder. You might get a credential box (see Figure 4-4); if so, simply provide your domain account and password.

   

   Figure 4-4. Credential box seen while mapping shared drive on a Mac

To authenticate with SharePoint, you must enter your domain credentials. For example, in the credentials box shown in Figure 4-4, one can type the username in the format of ContosoJames.Hall and the corresponding password. Be sure to select the Registered User option.

Upload Design Files to the Master Page Gallery

Using the connection we created in the previous section, we may now upload our Design files to the Master Page Gallery.

Drag and drop your local folder with all branding artifacts; in our case this is a folder we named SpecterGroup which contains CSS, Images, and JavaScript files to the newly mapped drive. You do not want to copy over all of your HTML files yet, only the primary HTML page, the one we wish to use as our basis for our HTML master page.

At this point, the Specter folder and all of its content is uploaded to the Master Page Gallery as shown in Figure 4-5.

Create a Dreamweaver Site

Design Manager does not cover this step; however now that we’ve mapped the SharePoint Master Page Gallery location to a local drive, we are able to create a Dreamweaver site and set the Local Site Root folder to the folder we previously uploaded.

Follow these steps:

1. Launch Dreamweaver, and select Site Manage Sites. The New Site dialog box opens.
2. On the bottom right of the dialog box, select New Site.
3. Type the site name (something descriptive helps).
4. Browse to the local mapped folder (the folder from our previous exercise) and select that as the Local Site Folder.
5. In the Files pane, you should see all of your files. You are now ready to edit your files as shown in Figure 4-6.

   

   Figure 4-6. Adobe Dreamweaver site structure

At this point we have connected to the Master Page Gallery by mapping a local drive, which uses WebDAV in the background. We then used this mapped folder to upload our entire design folder. We created a site in Dreamweaver and mapped its root to the Master Page Gallery local drive that contains our Specter Group Design folder. So now we are able to quickly make edits to the HTML files and other artifacts directly in the Master Page Gallery. Our next task is to actually convert our HTML file into an HTML master page.

Convert an HTML Prototype to an HTML Master Page

Proceed with the conversion: On the Edit Master Pages page (see Figure 4-7) click Convert an HTML file to a SharePoint master page. An Asset Picker modal dialog box appears. Browse to the folder where your HTML file is located (i.e., /_catalogs/masterpage/SpecterGroup), select the HTML file you wish to convert to an HTML master page, and click Insert. In our case we’ve selected the file called SpecterGroup.html within our folder, as shown in Figure 4-8.

Once we select the HTML file, SharePoint then generates a .master file that it associates with the HTML file. The HTML file itself is now associated with a content type called HTML Master Page (new to SharePoint 2013). This content type has a column named Associated File that is used to flag the association, as shown in Figure 4-9. When you make changes to the .html file, for example, in Dreamweaver, the changes are automatically reflected in the linked .master file due to this new association.

Under the hood, during this initial conversion, SharePoint modifies the HTML file and adds various snippets and comments (more on this later), which, once saved, are converted to ASP.NET code in the .master file. The Design Manager (and Adobe Dreamweaver) effectively ignores any ASP.NET code in the HTML file.

Work Directly with the .master Master Page

Once we have converted our HTML to an HTML master page, and the corresponding .master file has been created for us, there is no reason why we can’t work directly with the .master file. This, of course, means we have to disassociate the HTML file from the .master file, at which point only the .master file is the one to edit and update. In this case we would treat the .master just as we did with previous versions of SharePoint, as the .master is an ASP.NET master page, allowing us to add .NET components, and so on. Just be aware that we would also need to concern ourselves with required content placeholders as well as other SharePoint requirements. For this reason we stick with the HTML master page for the remainder of this book.

Fixing Common HTML Master Page Warnings and Errors

Fixing warnings and errors might be difficult or it might be easy. You might have to rewrite your original HTML file. If it was coded correctly, you will just need to massage it into place with SharePoint. You can make changes directly to your HTML master page in your web editor and as you save changes, refresh the Preview page in your browser to see if that helped fix your issues.

Click on the Name or Status of our new HTML master page to view any warnings and errors as well as preview the rendered HTML master page right from Design Manager. This is helpful to detect any problems that need to be fixed. Should your master page have any errors or warnings, these will also display in this area just below the black Ribbon for a particular HTML master page you preview. See Figure 4-11 for a sample error message.

Our web design team provided us an HTML file that was not quite in the format SharePoint 2013 requires, so our conversion had errors. You can see the exact message we get when clicking on the HTML master page in Figure 4-11.

Let’s quickly investigate this error message as although it is cryptic, it does supply some valuable information. First, the message tells us that the HTML file must be XML-compliant. Even though we intend to use HTML5, Design Manager requires that HTML master pages be XML-compliant so that it can properly parse each file. Our first step might be to run our original HTML file through an XML validator. If we do this, we will find that our sample HTML file is in fact XML-compliant.

Let’s move on down the line and see that there are multiple root elements on line 274. Open the converted HTML master page, in our case SpecterGroup.html in Dreamweaver and look around line 274 for a problem. Review Listing 4-1 for a compact view of the converted HTML. Line 274 is at the bottom. The problem we immediately encountered is that SharePoint added a second <head> block to the end of the file. This was added because we did not define a proper <html> element after our DOCTYPE. SharePoint is quite strict and currently will not accept the popular technique of using IE <!--if--> comments to provide additional class elements for IE 8 and earlier.

Listing 4-1.  The HTML Source for the Newly Converted HTML Master Page (Some Code Has Been Removed for Simplicity)

<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"
      xmlns:mso="urn:schemas-microsoft-com:office:office"
      xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
       <meta charset="utf-8" />
       <title>Specter Group HTML Version</title>
       <meta name="description" content="" />
       <!-- Rest of head section removed-->
</head>
<body>
       <!-- HEADER -->
       <header>
               <!--header removed-->
       </header>
       <!-- ENDS HEADER -->
         
       <!-- nav -->
       <nav id="topnav">
               <!--top nav removed-->
       </nav>
       <!-- ends nav -->
         
       <!-- MAIN -->
       <div role="main" id="main">
               <!--main content area removed-->
       </div>
       <!-- ENDS MAIN -->
         
       <footer>
               <!--footer removed-->
       </footer>
</body>
</html>
<head>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<!--properties removed-->
</mso:CustomDocumentProperties>
</xml><!--[endif]-->
</head><!--[if gt IE 8]>

In our example, the first error we need to fix has to do with the duplicate <head> tag SharePoint added at the time of the conversion. The next thing we need to do is replace the top <head> section attempting to target IE versions with a standard <head> tag. So we will remove the additional <head> block added after the closing </html> tag and replace the first few lines of the HTML Master Page as seen in Listing 4-2.

Listing 4-2.  Valid DOCTYPE, <html>, and <head> Tags for an HTML Master Page

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>

After we save our HTML master page in our web editor and refresh the Preview page we get a successful conversion with no warnings or errors as shown in Figure 4-12.

You might encounter additional errors and warnings depending on how XML-compliant and valid your original HTML file is. You will need to work through each error message displayed until Design Manager reports no more errors with your HTML master page. As soon as the conversion is successful, Design Manager will completely rewrite your original HTML file, adding in a whole series of new tags, comments, and content blocks.

Clean Up a Newly Converted HTML Master Page

Once you have successfully converted an HTML file to an HTML master page, there are a few clean-up issues that you will want to handle before you get into adding additional SharePoint functionality such as snippets. First we look at the primary ContentPlaceHolder and second we look at common styling techniques.

Let’s look at our newly converted HTML master page, which you can see in Listing 4-3. Note that we have removed blocks of code that in general are required but decrease readability at this time. Pay special attention to a new <div> with a data-name of ContentPlaceHolderMain added at the bottom of Listing 4-3. This <div> created the yellow box shown at the bottom of Figure 4-12.

Listing 4-3.  Our Sample Converted HTML Master Page

<?xml version="1.0" encoding="utf-8"?>
<!--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 athttp://192.168.3.120:4500/_layouts/15/ComponentHome.aspx?... 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.
-->
<!DOCTYPE html[]>
<html class="no-js" lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <!--CS: Start Page Head Contents Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" -->
    <!--SPM:<%@Register Tagprefix="WebPartPages"
        Namespace="Microsoft.SharePoint.WebPartPages" -->
    <!--SID:00 -->
    <meta name="GENERATOR" content="Microsoft SharePoint" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Expires" content="0" />
    <!--MS:<SharePoint:RobotsMetaTag runat="server">-->
    <!--ME:</SharePoint:RobotsMetaTag>-->
    <!--Remainder of head removed for brevity-->
</head>
<body>
    <!--CS: Start Ribbon Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint"
        Namespace="Microsoft.SharePoint.WebControls" -->
    <!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" -->
    <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server"
            HideFromSearchCrawler="true">-->
        <!--Removed for brevity-->
    <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
    <div id="ms-designer-ribbon">
        <!--Removed for brevity-->
    </div>
    <!--CE: End Ribbon Snippet-->
    <div id="s4-workspace">
        <div id="s4-bodyContainer">
            <!-- HEADER -->
            <header>
                <!--Removed for brevity-->
            </header>
            <!-- ENDS HEADER -->
            <!-- nav -->
            <nav id="topnav">
                <!--Removed for brevity-->
            </nav>
            <!-- ends nav -->
            <!-- MAIN -->
            <div role="main" id="main">
                <div class="wrapper">
                    <!--main content placerholder, use the following
                    html as sample content for content placeholder-->
                    <!--Removed for brevity-->
                    <!--end content placerholder-->
                </div>
            </div>
            <!-- ENDS MAIN -->
            <footer>
                <!--Removed for brevity-->
            </footer>
            <div data-name="ContentPlaceHolderMain">
                <!--CS: Start PlaceHolderMain Snippet-->
                <!--SPM:<%@Register Tagprefix="SharePoint"
                    Namespace="Microsoft.SharePoint.WebControls" -->
                <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain"
                        IsMainContent="true" runat="server">-->
                    <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow;
                                color:black;>
                            This div, which you should delete, represents the content area that your Page Layouts
                            and pages will fill. Design your Master Page around this content placeholder.
                        </div>
                    <!--ME:</asp:ContentPlaceHolder>-->
                <!--ME:</SharePoint:AjaxDelta>-->
                <!--CE: End PlaceHolderMain Snippet-->
            </div>
        </div>
    </div>
</body>
</html>

We first want to handle the yellow box added to the bottom of our HTML master page. Figure 4-13 shows the entire code for the ContentPlaceHolderMain <div> element, which essentially wraps the entire ASP.NET PlaceHolderMain element on our HTML master page.

The block within <div data-name="ContentPlaceHolderMain"> is a ContentPlaceHolder snippet. We learn more about snippets later in this chapter. For now, this snippet maps directly to a ContentPlaceHolder .NET control that we are used to from SharePoint 2010.

A ContentPlaceHolder in a master page is essentially a .NET control that may be overwritten by a page layout. Most elements in a master page are fixed for all pages that utilize the master page but content placeholders provide a mechanism we can use to provide specific areas of a master page that a page layout can customize. Content placeholders may also contain default “content,” including additional .NET controls that a particular page will display by default but that a page layout might override.

In our case, the ContentPlaceHolder with an ID of PlaceHolderMain is the primary ContentPlaceHolder used throughout SharePoint as the placeholder where all “Main” content will go.

Cut the entire <div> block highlighted in Figure 4-13 to your clipboard so that you can move it to its proper place in the HTML master page. In our case, we want this block contained within the <div class="wrapper"> block found within <div id="main">. Refer to Listing 4-3.

Within <div class="wrapper"> you will see two important comments,

<!--main content placerholder, use the following html as sample content for content placeholder-->

and

<!--end content placerholder-->

comments were added by the web design team and help us know where SharePoint components should go. We will see how they are useful to figure out where other snippets may go such as the logo snippet, the navigation snippet, and the search box snippet. These types of comments are also helpful within page layout code blocks as well, as there are also many snippets available to page layouts.

After we paste the <div> in our clipboard within the preceding comments we should see code similar to Listing 4-4.

Listing 4-4.  ContentPlaceHolder PlaceHolderMain Moved to Within Our “Main” Div

<!-- MAIN -->
<div role="main" id="main">
    <div class="wrapper">
        <!--main content placerholder, use the following html as sample content for content placeholder-->
        <div data-name="ContentPlaceHolderMain">
            <!--CS: Start PlaceHolderMain Snippet-->
            <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" -->
            <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
                <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">-->
                    <div class="DefaultContentBlock" style="border:medium black solid; background:yellow;
                            color:black;>
                        This div, which you should delete, represents the content area that your page layouts'
                        and pages will fill. Design your master page around this content placeholder.
                    </div>
                <!--ME:</asp:ContentPlaceHolder>-->
            <!--ME:</SharePoint:AjaxDelta>-->
            <!--CE: End PlaceHolderMain Snippet-->
        </div>
        <!--end content placerholder-->
    </div>
</div>
<!-- ENDS MAIN -->

After moving the <div> that represents the main PlaceHolderMain to the appropriate location within your HTML master page, your preview of your HTML master page will look similar to Figure 4-14.

Common Style Sheet Adjustments for HTML Master Pages

When SharePoint converts your HTML master page, it adds a bunch of controls and other markup. These include the ribbon and the s4-workspace and s4-bodyContainer divs you might recognize from SharePoint 2010 days. These new components are contained within divs and as such have additional styling applied to them by SharePoint. As this styling might not work for us, we will review a few common aspects of an HTML master page you might wish to customize.

We will use Firebug in Firefox to help track down the styles we wish to change and provide any updated styles in our custom style sheet, that is, /∼catalogs/masterpage/SpecterGroup/css/styles.css. Using the techniques we review in the next two subsections, you should be able to track down any HTML element or style you wish to update on your custom HTML master page.

#s4-bodyContainer {
       padding-bottom: 0px;
}

<div id="ms-designer-ribbon">
  <div>
    <div id="suiteBar" class="ms-dialogHidden noindex">
      <div id="suiteBarLeft">
        <!--Top row - left side -->
      <div id="suiteBarRight">
        <!--Top row - right side -->

      <div>
    </div>
    <div id="s4-ribbonrow" style="height: 35px;">
      <div id="globalNavBox">
        <!--second row-->
      </div>
    </div>
    <div id="notificationArea" class="ms-notif-box">
      <!--Notification box-->
    </div>
    <div id="DeltaPageStatusBar"></div>
  </div>
</div>

#suiteBarLeft {
    background-color: #993300;
}
#suiteBarRight {
    background-color: #e5e5e5;
}
.ms-core-suiteLink-a:hover {
    background-color: #009899;
}
#globalNavBox, .ms-clientcontrol-chromeheader {
    background-color: #e5e5e5;
}

Markup Descriptions

The following list outlines the various types of markup with a brief explanation of what they are. We cover more detail on where exactly these appear within the HTML master page file shortly.

• <!--SPM:...-->: SharePoint Markup. This allows for registering the server-side controls that have the SharePoint namespace.
• <!--CS:...--> and <!--CE:...-->: Comment Start and Comment End. This is used throughout the code that SharePoint outputs so that it is easy to identify where each major component starts and ends such as the Head, Ribbon, and Main Content. Comments can be safely removed if you do not want them.
• <!--MS:...--> and <!--ME:...-->: Markup Start and Markup End. Markup Start allows you to start any valid HTML or .NET control tag that you want sent directly to the .master file without Design Manager touching it. Most often you will see this used to start and end a particular .NET control such as a ContentPlaceHolder or other SharePoint control, but it could also be used for HTML tags as well, such as <!--MS:<script type="text/javascript">--> and <!--ME:</script>-->. You will always need a Markup End command somewhere after a Markup Start command.
• <!--PS:...--> and <!--PE:...-->: Preview Start and Preview End. HTML tags within a Preview block are only used while previewing an HTML master page in the Preview view or within a web design tool such as Dreamweaver. Preview blocks are not required but might help while building an HTML master page as they provide what a particular snippet “could” look like.
• There are also two reserved ID tags, <!--SID:00 --> and <!--SID:02 -->. These are reserved snippets that make our HTML master page more readable.

Markup Added to the <head> Tag

The <head> tag includes various added markup blocks. The first block we’d like to point out is the Document Properties or <mso> tags, added just before the </head> tag. The Document Properties keep track of metadata including the file association and the conversion status. The Design Manager also uses these properties to determine and set those values once there are no errors on our page. Listing 4-8 shows this specific markup for our conversion.

Listing 4-8.  Sample <mso> Metadata Block Found in an HTML Master Page, Simplified

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
    <mso:HtmlDesignFromMaster msdt:dt="string"></mso:HtmlDesignFromMaster>
    <mso:HtmlDesignStatusAndPreview msdt:dt="string">
        http://192.168.3.120:4500/_catalogs/masterpage/SpecterGroup/SpecterGroup.html, Conversion
        successful.</mso:HtmlDesignStatusAndPreview>
    <mso:ContentTypeId msdt:dt="string">
        0x0101000F1C8B9E0EB4BE489F09807B...</mso:ContentTypeId>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
    <mso:HtmlDesignPreviewUrl msdt:dt="string">
        http://192.168.3.120:4500/pages/default.aspx, /pages/default.aspx</mso:HtmlDesignPreviewUrl>
</mso:CustomDocumentProperties>
</xml><![endif]-->

The other markup that is added to the <head> tag is a combination of comments and snippets that include the out-of-the-box SharePoint JavaScript and CSS as well as the registration of the required assemblies as shown in Listing 4-9. Again we have simplified some of the tags for readability. If you worked with SharePoint 2010 master pages you will likely recognize many of tags within the <!--MS-->  blocks, and if you were to open the associated .master file, you will see how all of the Markup Start tags related one-to-one with .NET controls.

Listing 4-9.  The Core <head> Content Markup Added by SharePoint

<!--CS: Start Page Head Contents Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" %>-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" %>-->

<!--SID:00 -->
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<!--MS:<SharePoint:RobotsMetaTag runat="server">-->
<!--ME:</SharePoint:RobotsMetaTag>-->
<!--MS:<SharePoint:PageTitle runat="server">-->
  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">-->
    <!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">-->
    <!--ME:</SharePoint:ProjectProperty>-->
  <!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:PageTitle>-->
<!--MS:<SharePoint:StartScript runat="server">-->
<!--ME:</SharePoint:StartScript>-->
<!--MS:<SharePoint:CssLink runat="server" Version="15">-->
<!--ME:</SharePoint:CssLink>-->
<!--MS:<SharePoint:CacheManifestLink runat="server">-->
<!--ME:</SharePoint:CacheManifestLink>-->
<!--MS:<SharePoint:PageRenderMode runat="server" RenderModeType="Standard">-->
<!--ME:</SharePoint:PageRenderMode>-->
<!--MS:<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server">-->
<!--ME:</SharePoint:ScriptLink>-->
<!--additional references to OOTB JavaScript files-->
<!--MS:<SharePoint:CustomJSUrl runat="server">-->
<!--ME:</SharePoint:CustomJSUrl>-->
<!--MS:<SharePoint:SoapDiscoveryLink runat="server">-->
<!--ME:</SharePoint:SoapDiscoveryLink>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">-->
  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->
  <!--ME:</asp:ContentPlaceHolder>-->
  <!--MS:<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead">-->
  <!--ME:</SharePoint:DelegateControl>-->
  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server">-->
  <!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--MS:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server">-->
<!--ME:</SharePoint:CssRegistration>-->
<!--MS:<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">-->
  <!--MS:<WebPartPages:SPWebPartManager runat="server">-->
  <!--ME:</WebPartPages:SPWebPartManager>-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Page Head Contents Snippet-->

Markup Added to the <body> Tag

Within the <body> block, the major additions are found just after the opening <body> tag and one final block added to the bottom, which we reviewed earlier. In Listing 4-10 you can see the first block added to the <body> tag. Take special note of <!--SID:02 {Ribbon}-->, which we learned is a reserved, compressed snippet to ease readability, and the <!--MS:<SharePoint:SPSecurityTrimmedControl>--> tag, which we revisit later in the section “Sign In Snippet”.

Listing 4-10.  Markup Added to <body> Tag, Simplified

<!--CS: Start Ribbon Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" %>-->
<!--SPM:<%@Register Tagprefix="wssucw" TagName="Welcome" %>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" HideFromSearchCrawler="true"
      EmitDiv="true">-->
  <div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
    <a id="linkTurnOnAcc" href="#" class="ms-accessible ms-acc-button" onclick="...">
      <!--MS:<SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss, %&gt;" >-->
      <!--ME:</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="...">
      <!--MS:<SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss%&gt;">-->
      <!--ME:</SharePoint:EncodedLiteral>-->
    </a>
  </div>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<div id="ms-designer-ribbon">
  <!--SID:02 {Ribbon}-->
  <!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
    <div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; overflow:hidden;">
      The SharePoint ribbon will be here when your file is either previewed on or applied to your site.
    </div>
  <!--PE: End of READ-ONLY PREVIEW -->
</div>
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="...">-->
  <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">-->
  <!--ME:</wssucw:Welcome>-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Ribbon Snippet-->

Right after the closing ribbon snippet comments, two <div>  tags are added as well, as shown on Listing 4-11. All content is wrapped around these divs and again to those with experience with SharePoint 2010, these will look very familiar. The s4-workspace div is primarily used by SharePoint to control the scrolling space beneath the ribbon and is also used to replace the browser <body>  scrollbars. SharePoint will handle the width and height of s4-workspace so we would recommend that most styling you might apply to the <body>  tag be applied to s4-bodyContainer instead.

Listing 4-11.  The Two Primary container <div>s Added to the <body> Tag

<div id="s4-workspace">
      <div id="s4-bodyContainer">

Previewing With a New or Existing Page

Notice the black ribbon at the top of the preview page. The Change Preview Page drop-down menu is on the left end and contains two options, Select Existing and Create New. The first option allows you to quickly select from an existing content page to preview your newly created HTML master page. The second option allows you to create a new page to preview your HTML master page.

When we select the first option, we are presented with a dialog box, shown in Figure 4-18, that allows us to either type a URL or use a Generic Preview, which omits some of the content placeholders. In our case, we chose to preview within an existing page so we can provide the full URL of http://192.168.3.105:4500/Pages/Default.aspx. This would populate our Preview with whatever content had been entered at our default.aspx page. Figure 4-19 shows the outcome.

Selecting the Create New option allows us to create a new page, select a page layout, and then preview our new master page.

Site Logo Snippet

We start with a very simple snippet, the Site Logo snippet. Referring to Figure 4-20, we see that the Site Logo snippet is found in the Administration group.

• 1.  Go to Design Manager and select Edit Master Pages.
• 2.  Click your HTML master page, in our case SpecterGroup.html, which at this point should be in Draft state. Clicking takes you to the Preview Page.
• 3.  Click on the Snippets Ribbon option on the top right.
• 4.  On the Design Ribbon, under Administration, click Site Logo.
• 5.  There are many settings that we can configure, and common ones include the following. Be sure to click Update after changing settings to update the HTML snippet.

• a.  Under Customization - Site Logo (SPSimpleSiteLink), make the following changes:

  Appearance CssClass: Remove any classes, as we will provide our own styling to the logo link.

  Navigation NavigateURL = ∼sitecollection (Valid values for NavigateURL include ∼site and ∼sitecollection).

• b.  Under Customization - Site Logo (SiteLogoImage), make the following changes:

  Appearance CssClass: Remove any classes, as we will provide our own styling to the logo image.

  Misc LogoImageURL = /_catalogs/masterpage/spectergroup/img/logo.gif (You can change this URL to your own default logo location).

• 6.  Copy the HTML snippet from the text box on the left and paste it into your HTML master page. Because this is the logo, we want to replace the logo block from our HTML prototype. Refer to Listing 4-12 for an example of the Site Logo HTML snippet added to our HTML master page.

Listing 4-12.  Site Logo Snippet Within HTML of HTML Master Page

<div id="logo">
  <!--logo snippet-->
  <div data-name="SiteLogo">
    <!--CS: Start Site Logo Snippet-->
    <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" %>-->
    <!--MS:<SharePoint:AjaxDelta runat="server" BlockElement="True">-->
      <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
      <!--MS:<SharePoint:SPSimpleSiteLink runat="server" CssClass="" ID="x531"
          NavigateUrl="∼sitecollection">-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
        <!--MS:<SharePoint:SiteLogoImage runat="server" CssClass=""
            ID="x1daed9c2757141c2a871aeda8b6384df"
            LogoImageUrl="/_catalogs/masterpage/spectergroup/img/logo.gif">-->
          <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
          <img id="ctl00_x1daed9c2757141c2a871aeda8b6384df" name="onetidHeadbnnr0"
              Src="/_catalogs/masterpage/spectergroup/img/logo.gif" alt="Specter Group" />
          <!--PE: End of READ-ONLY PREVIEW-->
        <!--ME:</SharePoint:SiteLogoImage>-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
        <!--PE: End of READ-ONLY PREVIEW-->
      <!--ME:</SharePoint:SPSimpleSiteLink>-->
      <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
      <!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</SharePoint:AjaxDelta>-->
    <!--CE: End Site Logo Snippet-->
  </div>
  <!--end logo snippet-->
</div>

• 7.  Save the HTML master page and preview in Design Manager. The default Site Logo control now replaces the static link to our logo image, as shown in Figure 4-21.

  

  Figure 4-21. Site Logo snippet added to HTML master page

Sign In Snippet

As you recall from Chapter 3, we are building a publishing public web site for Specter Group. Therefore, we need to allow users to log in. To do this, we can use the Sign In snippet, which is found in the Administration category on the Design Manager Ribbon, as shown in Figure 4-22. This is a security trimmed control and essentially the same as the previous SharePoint 2010 control, which was available via SharePoint Designer 2010.

Follow these steps to add the Sign In snippet to your master page:

1. Go to Design Manager and select Edit Master Pages.
2. Click your HTML master page, in our case the SpecterGroup.html, which at this point should be in Draft state. Clicking takes you to the Preview page.
3. Click the Snippets Ribbon option on the top right.
4. On the Design Ribbon, under Administration, click Sign In.
5. Copy the Snippet from the text box and paste it into your HTML master page, unless you need to provide any changes to the configuration first.
6. Save the HTML master page and preview it in Design Manager.

<div class="site-access cf">
  <ul>
    <!--anonymous only snippet-->
    <li>
      <a href="#"><img src="img/icon-register.png" alt="Register" /></a>
    </li>
    <!--anonymous only snippet-->
    <li>
        <!--welcome / login snippet-->
        <a href="#"><img src="img/icon-login.png" alt="Login" /></a>
        <!--end login snippet-->
    </li>
  </ul>
</div>

<div class="site-access cf">
  <ul>
    <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server"
        AuthenticationRestrictions="AnonymousUsersOnly">-->
      <li>
        <a href="#"><img src="img/icon-register.png" alt="Register" /></a>
      </li>
      <!--ME:</SharePoint:SPSecurityTrimmedControl>-->
      <li>
        <!--MS:<wssucw:Welcome runat="server" EnableViewState="false">--><!--ME:</wssucw:Welcome>-->
      </li>
    </ul>
  </div>

nav .site-access .ms-signInLink {
    width: 43px;
    height: 43px;
    display: block;
    text-indent: -1000px;
    overflow: hidden;
    background: transparent url('../img/icon-login.png') no-repeat 0 0;
    line-height: 1em;
    padding: 0px;
}

Search Box Snippet

We end our foray into master page snippets for now with a look at the Search Box snippet. The Search Box snippet provides us access to SharePoint’s search box control so that we can provide a search box on our sites. In our HTML prototype, we provided a static search box that we can see in Listing 4-16. In Figure 4-21, you can view what this search box looks like.

Listing 4-16.  Static Search Box from HTML Prototype

<div class="searchbox">
  <!--search snippet-->
    <div id="searchInputBox">
      <input id="header-search" name="header-search" type="text" autofocus="autofocus"
          placeholder="search..." accessKey="S" value="" />
      <a title="Search" href="javascript: {}"><img src="img/icon-search.png" alt="Search" /></a>
    </div>
  <!--end search snippet-->
</div>

Follow these steps to add the Search Box snippet to your master page:

1. Go to Design Manager and select Edit Master Pages.
2. Click your HTML Master Page, in our case the SpecterGroup.html, which at this point should be in Draft state. Clicking takes you to the Preview page.
3. Click the Snippets Ribbon option on the top right.
4. On the Design Ribbon, under Navigation, click Search Box.
5. Copy the snippet from the text box and paste it into your HTML master page unless you need to provide any changes to the configuration first. We are going to provide styling to the Search Box based on existing classes and HTML. Refer to Listing 4-17 to view how this snippet appears in our HTML master page. Note that we removed the containing <div data-name="SearchBox"> and <!--PS:--> tags for simplicity.

   Listing 4-17.  Search Snippet in HTML Master Page

   <div class="searchbox">
     <!--search box snippet-->
     <!--CS: Start Search Box Snippet-->
     <!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls"
         Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral,
         PublicKeyToken=71e9bce111e9429c"%>-->
       <!--MS:<SearchWC:SearchBoxScriptWebPart UseSiteCollectionSettings="true"
           EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None"
           UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">-->
         <!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
           <!--removed-->
         <!--PE: End of READ-ONLY PREVIEW-->
       <!--ME:</SearchWC:SearchBoxScriptWebPart>-->
       <!--CE: End Search Box Snippet-->
     <!--end search box snippet-->
   </div>

6. Save the HTML master page and preview it in Design Manager. Refer to Figure 4-24.

We can see in Figure 4-24 that the styling from our HTML prototype search box did not transfer over to our Search Box snippet. This is not uncommon, as snippets often will code their contents using different HTML and class structure than a design team might expect. Styling the search box takes a little more work than styling a sign in button, as we need to override styling for the search container, the input box, and the search button. Using Firebug we can quickly drill into the HTML tags and find the styles that we need to override. Refer to Listing 4-18 for our overriding styles and Figure 4-25 for the end result.

Listing 4-18.  Custom Styles to Style the Search Box Snippet

header #SearchBox .ms-srch-sb-border, header #SearchBox .ms-srch-sb-borderFocused {
    background: #e5e5e5 none;
    border: 1px #c2c2c2 solid;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    height: 38px;
    display: block;
}
header #SearchBox .ms-srch-sb-borderFocused {
    border-color: #009899;
}
header #SearchBox .ms-srch-sb input[type=text]{
    border: 0px;
    width: 200px;
    height: 28px;
    padding: 5px 10px;
    font-size: 16px;
    line-height: 1em;
    color: #333;
    background: transparent none;
    display: inline-block;
    vertical-align: top;
}
.ms-srch-sb > .ms-srch-sb-searchLink {
    height: 24px;
    width: 22px;
    display: inline-block;
    margin: 0px;
    padding: 7px 0px 5px;
    vertical-align: top;
    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    transition: all 0s ease;
    background: transparent url('../img/icon-search.png') no-repeat 0px 6px;
}
.ms-srch-sb > .ms-srch-sb-searchLink:hover {
    background: transparent url('../img/icon-search.png') no-repeat 0px -70px;
}
.ms-srch-sb > .ms-srch-sb-searchLink img {
    display: none;
}

In Listing 4-18, we include six primary overrides. The first CSS block overrides the styling for the search area container by providing a new background color, rounded border, and border color. The second block provides a new border color to the search box on hover. The third block provides styling to the actual input box itself, and the final three blocks modify how the search “go” link or search button display.