An Introduction To Branding Sharepoint With Custom Master Pages And Layouts
Customizing SharePoint’s Look and Feel
SharePoint’s out-of-the-box user interface provides a clean and functional experience, but often lacks the visual branding required by organizations to align with corporate guidelines. By customizing SharePoint’s master pages and page layouts, developers can dramatically transform the look, feel, and functionality to meet specific business needs.
Master pages define foundational website structure including headers, footers, and placeholders for content. Page layouts layer on top of master pages to control positioning of content modules within placeholders. By leveraging these two core customization points, the SharePoint platform becomes a blank canvas ready for innovative design.
Defining Master Pages and Page Layouts
Before diving into customization, it is important to understand the hierarchical relationship between master pages and page layouts in SharePoint. Master pages provide site-wide content placeholders, styling, and structure. Page layouts fill those placeholders with specific web parts and fields.
For example, a master page may define a header with a company logo on the left and a search box on the right. It would also contain a main content area placeholder in the center of the page. The associated page layout would then insert a document library web part into that main content placeholder.
Associating Master Pages with Site Collections
Master pages can be applied at various levels within SharePoint sites. Typically, they are assigned at the root site collection level so all child sites inherit a consistent branding. Alternate master pages can also be created for specific sites or pages that require a different look.
Site collection administrators can assign master pages through Site Settings. The Master Page gallery provides a central interface to manage, activate, and delete master page files. Applying a new master page will cascade the branding throughout all sites within a site collection.
Creating a Custom Master Page
Developers have two options for creating SharePoint master pages: start from scratch or edit an existing master page. In most cases, editing the Seattle master provides a good starting point since it contains all required placeholders and references.
Adding Branding Elements
Basic branding often involves swapping out default logos and colors to match company visual guidelines. This requires updating the CSS stylesheet associated with Seattle master to point to new image files and defining custom fonts, colors, and other attributes.
More advanced branding may integrate additional elements like intro videos, animations, slideshows, or web parts into the header and footer regions. Anything that will be reused across many pages can be added to the master page for consistency.
Modifying Existing Placeholders
Seattle master ships with a set of defined placeholders including header, footer, top navigation, and main content area. The structure and location of these elements can be customized by tweaking the rendered HTML.
For example, to improve the site search experience, the header search box could be resized, restyled, or an enhanced third-party search web part could replace the native placeholder entirely.
Adding Custom Placeholder Elements
Unique business needs may require outputting custom data within master page regions. This could include displaying user messages, alerts, dynamic reports, or other reusable modules. New placeholder elements can be inserted to accommodate these use cases.
Server-side code can populate the custom placeholders. The content will then render on any page leveraging the master page. This avoids needing to add the same components across multiple layouts.
Linking to Custom CSS and JavaScript Files
Most design customizations rely on unique styling rules and scripts. These frontend files can be stored within SharePoint and referenced from the master page header. This keeps them centrally managed similar to the main .master file itself.
Microsoft recommends storing custom files in the SiteAssets library or Style Library for easier governance. As requirements evolve, new versions can quickly be deployed without republishing master page changes.
Creating Custom Page Layouts
While master pages control site-wide structure, page layouts manage content within defined placeholders. SharePoint ships with a library of layouts targeting different scenarios like team sites, publishing sites, and wikis. Developers can clone, edit, and design new layouts to enable custom experiences.
Clone an Existing Page Layout
Page layouts utilize a .aspx file extention and can be created directly in SharePoint Designer. The easiest way is to clone an existing layout from the Master Page gallery and use it as a baseline for modifications.
This ensures all required namespaces, directives, and placeholders are inherited properly in the new version. The clone can then be edited without worrying about breaking SharePoint dependencies.
Add New Web Parts and Fields
A key aspect of custom page layouts is integrating additional web parts into defined placeholder regions. Web parts can be sourced from the SharePoint app catalog, third party vendors, or custom developed.
Custom fields can also be defined directly in the page layout using SharePoint Designer. These values can be mapped to content types for editors to populate promoted site metadata.
Map to Content Types
For editors to access a new page layout, it must be associated with an available content type. This mapping allows users to create pages utilizing the custom layouts from document libraries.
This not only exposes the page to content creators, but also establishes a clear information architecture via tied down content types for governance.
Apply Branding with Design Manager
Manually customizing master pages and page layouts requires developer skills like SharePoint Designer, VSCode, and an understanding of markup. Business users and IT admins can take advantage of Design Manager to apply branding more easily.
Activate the Design
Design Manager includes a library of turnkey site designs that can be activated at the site collection level. Each design bundles customizable master pages, page layouts, style sheets, and images to quickly brand SharePoint sites.
After uploading a design package, admins simply browse to Site Settings and select the new design from the Site Theme dropdown. The Cascading Style Sheet gallery can also be used to preview and activate the bundled files.
Apply to Sites and Pages
Active designs will cascade master pages and styling throughout sites and pages within a site collection. Individual sites can also isolate branding by choosing alternate designs from the Site Theme menu in Site Settings.
Further tuning is available at the page-level by mapping layouts to content types. This exposes the designs to content authors when creating new pages from document libraries.
Custom Code Samples
While master pages, page layouts, and Design Manager templates deliver most branding needs, advanced customizations may require extending built-in web parts or executing custom logic.
Inject Custom JavaScript
JavaScript files with caching headers can be linked from master pages to execute sitewide. This is useful for initializing plugins, DOM manipulation, or executing complex logic not feasible in SharePoint Designer.
<SharePoint:Scriptlink ID="Scriptlink1" name="custom.js" runat="server" ondemand="false" localizable="false"></SharePoint:Scriptlink>
Modify Existing Web Parts
SharePoint web parts can be extended and modified leveraging custom CSS styling rules and JavaScript enhancements. This allows adapting existing components like search boxes, menus, and lists beyond native capabilities.
#navbar ol, ul {
list-style: none;
padding: 0;
}
Override CSS Styles
In some cases, branding may require overriding native SharePoint CSS styles with custom attributes. This can be achieved referencing external stylesheets after default CSS rendition.
<SharePoint:CssRegistration ID="CssRegistration1" Name="/Style Library/custom.css" After="corev15.css" runat="server"></SharePoint:CssRegistration>
Troubleshooting Tips
While master pages and page layouts unlock immense design potential, it can also introduce issues needing debugged for smooth operation.
Debugging Errors
Viewing error logs is critical to troubleshoot master page and page layout failures. Debugging tools like browser DevTools and Fiddler traps exceptions during rendering stages.
Inline debugging statements can also be added directly within .master and .aspx files to output custom messages at key process points.
Handling Cross-Browser Issues
Customizations may appear and function correctly in latest versions of popular browsers but break in older ones. Always test extensively across target user browsers to uncover cross-compatibility problems.
Use progressive enhancement methods like feature detection to selectively apply advanced branding functionality only when supported by the user’s browser.
Master Page Gallery Permissions
By default, master pages and page layouts deploy with restricted access. Editing and updating them requires designer permissions even with site collection admin rights.
If branding owners encounter auth errors applying customizations, check the Advanced Permissions page on the Master Page gallery to verify adequate rights to contribute assets.
