In SharePoint 2013, both on-premises and Office 365 brought new options for customizing your SharePoint’s site design.
- 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.
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.
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
- 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.
- In the Menu bar, tap or click Computer, and then tap or click Map network drive.
- In the Drive list, tap or click a drive letter.You can choose any available letter.
- 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.
- 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.
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:
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:
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.
The page content area is largely in a div with the id=s4-workspace.
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:var g_Workspace = “s4-workspace”;–>
<img style=”position:absolute; bottom:60px; right:0px;” src=”Images/skyline-right.png” alt=”Sound Community Bank” border=”0″ />
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.
How to: Convert an HTML file into a master page in SharePoint Server 2013
Add snippets to a master page or a page layout in SharePoint Server 2013