In this article
This article covers in-depth configuration and styling options for DarkMatter master pages. For a general overview and description of master pages and how they relate to DarkMatter content please refer to “Anatomy of a DarkMatter Page” here.
The info tab contains general configuration settings for the master page, including which zones are used and a global style namespace. Below is a brief explanation of each of the configuration options:
Name - A customizable name for your master page. This is field is for display purposes in the DarkMatter admin only and does not affect your site layout.
Preview Page - Select a page from your site to display in the “Page Content” section of the master page in preview mode. This field is for display purposes on the DarkMatter admin only and does not affect your site layout.
Editor Width - This an optional setting to constrain the content editor within DarkMatter to the specified width. This is typically only used if your master page is configured to restrict all site content to a certain width.
Page Zones - This section is where you enable or disable master page zones. Zones that are deactivated will not display on your live site, even if they contain content. There are four possible zones which can be enabled in any combination:
Canvas Left and Off Canvas Right - Off canvas zones are most often used for mobile navigation, but can be used in desktop or tablet mode as well. If the Off Canvas Left zone is enabled site content will appear to slide to the right to reveal the off canvas content. If the Off Canvas Right zone is enabled, site content will appear to slide to the left. In order to reveal the content in an off canvas zone a specific DarkMatter component must be use. Check out the related article “Off Canvas Content” for detailed instructions on how to activate off canvas menus and content.
Sidebar Left and Sidebar Right - Sidebar zones will allow you to create a site with permanent content on the left or right side of the site. Sidebars are often used to display persistent navigation or advertising content. Enabling either of the sidebar zones will also automatically enable global header and global footer zones which can be used to place content that spans both the sidebar and main content area. The diagram below shows a master page configured with a left sidebar and how that would display on a live site. The global header and global footer zones are optional and will not display on the live site if no content is specified for them.
Background CSS Class - This field is an advanced configuration option and can be safely ignored for most sites. The CSS class specified in this field will be added to the HTML “body” tag for any publishable (page, story or blog post) that uses this master page. This can used in conjunction with the namespace option on stylesheets to create a targeted set of styles that will only apply to a specific section of your website. For more information on using style namespaces check out the related article “Advanced Stylesheet Configuration” here.
The layout tab of the master page is where you define your site sections and assign the site headers or footers which contain the global content for the site. Each site section also has some style and behavior options that can affect the look and feel of your site. The following diagram shows a master page with the Off Canvas Left and Sidebar Left zones enabled. Note that enabling Sidebar Left also enables the Global Head and Global Foot zones.
Each zone can contain zero or more site sections. Most sections configured within your master page will be Global Content sections. Global content includes but is not limited to headers, footers, mobile off canvas content, special notifications, any content that will be persistent across all pages using this master page.
There is also one special section called “Page Content” which determines where in your master layout specifically requested content (pages, stories, blog posts and products/events) will be displayed.
To add a new site section you can click and drag the “Global Content” icon at the top of the screen and drop it in the zone where you would like to add the section. Once you drop a site section into a zone the site section configuration screen will automatically open. This is where you assign the global content you would like to display, as well as some style and behavior options which are detailed below.
Site Section Configuration
Visibility - Site sections by default are visible across all device and screen sizes. The visibility setting allows you to configure a site section to only be visible on certain devices. For example: a simple header with a logo and off canvas menu button would be configured to show only on mobile and tablets, while a more traditional header with logo, navigation and a search box would be configured to appear only on desktops or other large screens.
Pinned - A pinned section will remain in place until the page is scrolled at which point it will remain fixed at the top of the screen. This can be used to provide navigation that stays at the top of the browser window even on long-scrolling pages. It is possible to have multiple pinned site sections within a single master page. If there is more than one pinned site section, sections will stack according to the order in which they are displayed. See the image below for an example of a site with two pinned site sections.
Viewport Height - If the viewport height display option is set for a site section that section will automatically be set to the height of the browser window when the page loads. This is often used in conjunction with the pinned setting to create a fixed sidebar that remains in place even on long scrolling pages.
Global Content - This pulldown menu allows you to select the global content you would like to display.
The Site Backgrounds configuration section provides fine-grained control over background styles for the master page. Each site section that makes up the master page layout has a corresponding site background entry. Site background entries are completely optional and determining whether they should be set will depend on the specific requirements for your project. As a general best practice, we recommend setting master page backgrounds for sections that will remain relatively constant and not require frequent updates.
Each site background entry can contain multiple background layers. Background layers allow designers to consistently apply layered background images in a cross-platform manner. Also, each background layer has discrete settings for desktop, mobile and tablet. This allows designers to create complex background patterns for larger screens and simpler patterns for mobile devices.
By default, master pages do not have any site backgrounds defined when first created. However, master pages checked out from a framework library may have background layers defined. When the master page is published a stylesheet will be created containing all of the background styles for the master page. While it is possible to directly edit this stylesheet to affect master page backgrounds, this is not recommended because any changes will be overwritten should the master page be published again.
The master page preview will render a specified page (set in the Info tab of the master page) in the context of the current master page. This can be used to ensure that all functional elements of the page are present before publishing the master page. The master page preview also features the DarkMatter responsive slider which allows you to view the master page across all screen sizes and validate the tablet and mobile break points.
This section will only be available if the site has multiple master pages. Once a master page is published it can be applied to any page or page layout. The master page can be set individually for each page and/or page layout in the Info tab for that item. The “Set Pages” section of the master page provides a convenient method for updating multiple pages and/or or page layouts at once.