Office 365 Branding-Creating a custom masterpage for your Office 365 SharePoint Public-Facing website

In SharePoint 2013, both on-premises and Office 365 brought new options for customizing your SharePoint’s site design.

Highlights:

  • Ability to edit your masterpage in the HTML editor of your choice i.e. Dreamweaver, Visual Studio, or SharePoint Designer 2013.
  • Ability to configure the basic colors of your site from a single theme file.  (Replacing the PowerPoint themes in SP2010)

These two options alone provide a more flexible and straight-forward mechanism for branding your SharePoint 2013 site.

Example screenshot:

ScreenShot

Step 1: Login to your Office 365 tenant:

Login into your Office 365 SharePoint
TIP: Ensure to select the “Keep me signed in” option on your login screen.

Capture

Step 2: Obtain the location of your masterpage files:

  • Navigate to your SharePoint site’s masterpage gallery:
  • Site Settings > Look & Feel > Design Manager
  • From left navigation > Create Themes
  • Locate and copy the path provided by Microsoft for managing your design files for your site: “Map the following location as a network drive: [your path]“

Step 3: Create a shortcut to (map) a network drive to your masterpage gallery:

Instructions for Windows 8: http://windows.microsoft.com/en-us/windows-8/create-shortcut-to-map-network-drive

When you create a shortcut  to a shared folder or PC on a network (also called mapping a network drive), you can get to it from Computer or File Explorer without having to look for it or enter its network address each time.

To create a shortcut to a network drive

  1. Open Computer by swiping in from the right edge of the screen, tapping Search (or if you’re using a mouse, pointing to the upper-right corner of the screen, moving the mouse pointer down, and then clicking Search), entering Computer in the search box, tapping or clicking Apps, and then tapping or clicking Computer.
  2. In the Menu bar, tap or click Computer, and then tap or click Map network drive.
  3. In the Drive list, tap or click a drive letter.You can choose any  available letter.
  4. In the Folder box, enter the path of the folder or computer, or tap or click Browse to find the folder or computer.To connect every time you sign in to your computer, select the Reconnect at sign-in check box.
  5. Tap or click Finish.

Step 4: Edit your masterpage in the web editor of your choice:

From my experience in SharePoint 2013 I prefer to use Visual Studio for editing and saving changes to the masterpage(s).  I have found Dreamweaver to work as well and provides a decent design-time preview and standard features you expect in a web editing tool.

Browse to the mapped drive you created.

TIP: If you receive an error while attempting to open your mapped drive I have found the following to be an acceptable work-around: Navigate to site settings, under Web Designer Galleries choose Masterpage and page layouts link.  Next, from the masterpage and layouts folder, locate the File tab in the ribbon and select “Upload Document” On the upload document screen select the “upload files using Windows Explorer instead”  You should see your masterpage gallery open in windows explorer.

Capture4

Once you have navigated successfully to your network drive containing your design files I recommend creating a new folder on the root masterpage gallery to organize all your design files (masterpage, images, CSS) into a single folder.  Consolidating your custom masterpage files in to a single folder aid in setting virtual paths to your masterpage’s resources and once published provide a visual cue for others to properly assign custom masterpages to thier sites.

  • Make a copy of the Seattle.html or Oslo.html file and rename appropriately i.e. MyCompanyMaster.html.
  • Copy this file into your new custom masterpage folder.
  • Create new subfolders for your masterpage resources i.e. “Images” and “Styles”

Your folder structure may look similiar to this:

Capture5

Right-click the MyCompanyMaster.html file in windows explorer and edit the file in the web editor of your choice.

TIP: Ensure you are always editing the .html version of the masterpage and not the .master version.

Your standard Seattle.html may appear similiar to this:

Capture6

Locate the sections in the masterpage mark-up you would like to alter i.e. add a div for the footer, add or remove snippets, insert HTML markup, link to your custom CSS and image files, etc until the masterpage meets your design requirements.

FYI: In design view SharePoint inserts a commented section highlighting the placeholder for the content that gets rendered on the page at runtime.

TIP: Do not edit any of the built-in SharePoint controls or sections directly, rather navigate to the design manager tool and use the Snippets tool to update properties and then copy the provided mark-up back down to the appropriate section in your masterpage.  This will minimize errors in the Design Manager.

Lessons learned:

The page content area is largely in a div with the id=s4-workspace.

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

In the example screenshot above I placed a footer at the bottom of the page that required more flexibility than what appeared the built-in control supported.  To accomplish this I located the correct location in the Seattle masterpage to place a container div proceeding the page content and applied custom CSS styles to ensure the footer always displays below the content of the page.

Example of mark-up changes:
<!–SPM:<SharePoint:ScriptBlock runat=”server”>–>
<!–SPM:var g_Workspace = “s4-workspace”;–>
<!–SPM:</SharePoint:ScriptBlock>–>
<div>
<div class=”grass”>
</div>
<div class=”hills”>
</div>
<div class=”skyline-left”>
</div>
<img style=”position:absolute; bottom:60px; right:0px;” src=”Images/skyline-right.png” alt=”Sound Community Bank” border=”0″ />
</div>
</body>
</html>

Step 5: Saving and previewing your changes on SharePoint:

Saving to SharePoint:

When completed with your edits simply choose save file from your web editor and the changes will be applied to the version in your SharePoint masterpage gallery.  You can preview your masterpage using the Design Manager from Site Settings, Design Manager, Edit masterpages.  If the conversion was successfull your custom masterpage Approval Status will be set to “Draft” and may appear similiar to this:

Previewing on SharePoint:

  • Click on the MyCompanyMaster link to preview your new masterpage.
  • If there are any errors reported with your markup ensure to update the masterpage to correct errors and save.  From my experience the typical errors are isolated to HTML formatting issues i.e. a div tag is missing a closing tag etc.
  • When satisified with the results navigate to the MyCompanyMaster file, select … and publish a major version.  Only published versions will be displayed in the list of available masterpages that can be applied to a site.

Additional options: You do have the option of creating your own HTML layout from scratch and providing you meet some requirements i.e. the mark-up is XML compliant then SharePoint will convert your html to two files, a masterpage.master file and a masterpage.html file.  This option provides significant flexibility to brand your SharePoint similiar to your internet facing website and/or design mockups from your design team.

Helpful links:

How to: Convert an HTML file into a master page in SharePoint Server 2013
http://msdn.microsoft.com/en-us/library/jj822370.aspx

Add snippets to a master page or a page layout in SharePoint Server 2013
http://msdn.microsoft.com/en-us/library/jj822367.aspx

Have fun!

Rod.

About these ads
Tagged with: , ,
Posted in Office 365, SharePoint 2013
6 comments on “Office 365 Branding-Creating a custom masterpage for your Office 365 SharePoint Public-Facing website
  1. Great Article! Microsoft did a great job with the branding tools but in my opinion they are still a bit limited. Take a look at http://bindtuning.com and check how easily you can brand you site with a lot of features that are not included in the sharepoint by default.

  2. Hi,

    Can you include JavaScript in the new masterpage?

    Thanks,

    Steve Daniels

  3. John says:

    Branding tools are a bit limited if you are use to other alternatives. But my goodness what a great guide you shared. Please write more!

    John.

  4. ahatfield1 says:

    Great article. How do you link your custom css file?

    • rjs456 says:

      I reference the link to MyCustom.css stored in the masterpage gallery alongside the masterpage.

      Edited the source of MyCustomMaster.html to include a reference in the head section of the page to the CSS file:

      Also, you can link to a CSS file stored in the default Styles library on the root site collection-have found in some cases this is the best option since the permissions are already set to allow all users to access the CSS file from here. The location of your CSS can also be designated when you upload your custom HTML masterpage as a design file into the masterpage gallery as well.

      Cheers!
      Rod.

  5. rjs456 says:

    Yes, absolutely. For example I use a custom JS to dynamically position the footer.

    Just reference the location of your jquery file in the HTML version of your masterpage.
    Example:

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: