A theme layout is the top-level layout for the template pages (1) in your
community. It includes the common header and footer (2), and often includes navigation,
search, and the user profile menu. In contrast, the content layout (3) defines the content
regions of your pages, such as a two-column layout.
A theme layout type categorizes the pages in your community that share the same theme layout.
When you create a custom theme layout component in the Developer Console, it appears in Community Builder in the
area. Here you can assign it to new or existing theme layout types. Then you apply the theme layout type—and thereby the theme layout—in the page’s properties.A theme layout component must implement the forceCommunity:themeLayout interface to appear in Community Builder in the
area.Explicitly declare {!v.body} in your code to ensure that your theme layout includes the content layout. Add {!v.body} wherever you want the page’s contents to appear within the theme layout.
You can add components to the regions in your markup or leave regions open for users to drag-and-drop components into. Attributes declared as Aura.Component[] and included in your markup are rendered as open regions in the theme layout that users can add components to.
<aura:attribute name="navBar" type="Aura.Component[]" required="false" />
<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout"> <aura:attribute name="search" type="Aura.Component[]" required="false"/> <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/> <aura:attribute name="navBar" type="Aura.Component[]" required="false"/> <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/> <div> <div class="searchRegion"> {!v.search} </div> <div class="profileMenuRegion"> {!v.profileMenu} </div> <div class="navigation"> {!v.navBar} </div> <div class="newHeader"> {!v.newHeader} </div> <div class="mainContentArea"> {!v.body} </div> </div> </aura:component>
You can expose theme layout properties in Community Builder by adding a design resource to your bundle.
This example adds two checkboxes to a theme layout called Small Header.
<design:component label="Small Header"> <design:attribute name="blueBackground" label="Blue Background"/> <design:attribute name="smallLogo" label="Small Logo"/> </design:component>
The design resource only exposes the properties. You must implement the properties in the component.
<aura:component implements="forceCommunity:themeLayout" access="global" description="Small Header"> <aura:attribute name="blueBackground" type="Boolean" default="false"/> <aura:attribute name="smallLogo" type="Boolean" default="false" /> ...
Design resources must be named componentName.design.
Add a CSS resource to your bundle to style the theme layout as needed.
.THIS { position: relative; z-index: 1; }
<div class="mainContentArea"> {!v.body} </div>
CSS resources must be named componentName.css.