In a previous article we discussed branding SharePoint and keeping the changes to what SharePoint provides via the Admin and Settings interfaces. These minimal branding options are great for when you want to keep the same look and feel of the basic SharePoint UI, and want to ensure that future updates to SharePoint do not break your branding changes. For the more adventurous, we’ll outline options that take your SharePoint branding to the next level. A few of these changes are quite intrusive, but necessary if you want to completely rework how SharePoint looks for your user base, others are part and parcel of adding new SharePoint functionality via customized and branded web parts.
As with all of these branding options, you need to ensure that the Publishing Features are enabled for both your site collection and the target site.
A word of warning: do not edit any default/existing SharePoint pages. Always create new ones, or create copies of existing pages before you start your edits. This way you always have a working copy to revert to. You will break your site with incomplete or buggy edits, and you’ll want a fall back option to set things straight while you work through the issues.
Creating Custom Layouts
Publishing sites will often use custom layouts to create unique layouts for different types of content. For instance, if you are using SharePoint as a CMS, you might wish to use one layout for interviews and another for articles. SharePoint’s custom layout feature grants this wish.
In order to create custom layouts, we are going to have create a new layout via SharePoint Online’s Design Manager and then edit the new page using SharePoint Designer 2013. (You can get a free copy of SharePoint Designer from Microsoft, also install SP1 for SharePoint Designer 2013.)
To get to SharePoint Design Manager, you start at the top of your target site collection and open Site Settings :: Look and Feel :: Design Manager. Click on Option #6, “Edit Page Layouts” and then click “Create a page layout”. Give the new layout a name, and assign a master page. (Oslo is the Master Page without the Quick Links Navigation on the left, this is newest Master Page available from Microsoft. Seattle is the default/standard Master Page that includes the left navigation. Publishing sites lean towards using Oslo in order to get the most page real estate possible.) Finally, select a Content Type to assign to your new layout. The content type will define the base meta data/information about the layout. Start with an existing content type, later you can design your own page level content type and hook new layouts into that.
Once we have created the new layout page, using SharePoint Designer 2013 we are going to edit the page and setup the desired editable zones and static content. Remember to select “Edit File in Advanced Mode” when working with the new layout. Also depending on which content type we started with, you’ll need to add and/or subtract the needed HTML from the currently available zones.
Custom Master Pages
There are two options when creating custom master pages, one is to make a copy of Seattle or Oslo and edit the file using SharePoint Designer 2013 until you have all the features trimmed or added that you need. Option two is to design the master page as straight HTML and then upload it to SharePoint via SharePoint Design Manager. With the upload option, SharePoint will then convert your HTML into an “aspx” page for you. The upload option has the benefit of validating your HTML during the conversion process, helping you to catch errors and possible display issues.
One important note with creating a custom Master Page, once you move away from the default Seattle or Oslo options you are “one your own” when it comes to updates and the feature adds that Microsoft might make to the master pages. You will need to keep track of changes to the master pages and if you are missing a feature you wish to have you’ll need to add it manually or re-clone the source master page and add in your custom branding / look and feel.
With SharePoint on premise you can roll these tests into your quarterly patch schedule. With SharePoint Online, updates are done continuously and incrementally so you need to keep a close eye on the SharePoint road map.
Control and Display Templates for Web Parts
Lastly, with specific web parts (e.g. Content Search) you have the ability to use Control and Display Templates for customizing the look and feel of the data from lists and information about documents. If you are tired of the default SharePoint grid display this option is for you. Again, it’s recommended that you make a copy of an existing Control or Display Template and edit the copy, it’s too easy to forget key parts of these pages starting from scratch.
The Control and Display templates work together to assist you in branding your data. The Control Template is the “frame” for the display, and within this page you’d put all your custom javascript and css. HTML in this page is displayed only once. The Display Template is your “repeater” and HTML that is part of the display is repeated for each item returned by the content search or other web part selected. You only want the HTML that is needed to brand / display each row of data.
Microsoft has available within the Control and Display templates, some C# like syntax that you can utilize to collect context sensitive information and use that for branding and display purposes. Additionally, when using the Content Search web part you need to make sure your target data is available to the search crawler via the Search Schema and Mapped / Crawled Properties. From there you can use the property aliases assigned in your Control and Display templates to dynamically display or format the data returned.
Unfortunately, there are a lot of moving parts with customizing data displays with SharePoint. Make sure you start small and build up slowly as you learn your way around each of the steps needed: Content Types, Lists, Search Schemas, Control & Display templates.
Implement SharePoint Branding with the Help of a SharePoint Expert
Discover which version of user interfaces best fits your prefernce. Explore our blog to see what both Modern and Classic UI can do for you.
Do you need help learning how to customize and brand your SharePoint site? The processes described above can be involved—particularly for first-timers. At 2Plus2, we’d be happy to walk you through the steps for any of the customization strategies discussed above. From designing master pages and custom layouts to using custom web parts to tweak the look of your sites, our SharePoint experts can help you get a handle on all the main SharePoint branding tools. Go online to schedule a free consultation with our team or call 510-652-7700 today.