Configure a Custom Theme Layout Component

Let’s look at how to create a custom theme layout in the Developer Console to transform the appearance and overall structure of the pages in the Customer Service template.

1. Add an Interface to Your Theme Layout Component

A theme layout component must implement the forceCommunity:themeLayout interface to appear in Experience Builder in the Settings | Theme 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.

Add attributes declared as Aura.Component[] to include regions in the theme layout, which contain the page’s components. 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. For example:

1<aura:component implements="forceCommunity:themeLayout">
2<aura:attribute name="myRegion" type="Aura.Component[]"/>
3
4{!v.body}
5
6</aura:component>

In Customer Service, the Template Header consists of these locked regions:

search, which contains the Search Publisher component
profileMenu, which contains the Profile Header component
navBar, which contains the Navigation Menu component

To create a custom theme layout that reuses the existing components in the Template Header region, declare search, profileMenu, or navBar as the attribute name value, as appropriate. For example:

1<aura:attribute name="navBar" type="Aura.Component[]" required="false" />

If you create a swappable custom profile menu or a search component, declaring the search or profileMenu attribute name value also lets users select the custom component when using your theme layout in Experience Builder.

Tip

Add the regions to your markup to define where to display them in the theme layout’s body.

Here’s the sample code for a simple theme layout.

1<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
2    <aura:attribute name="search" type="Aura.Component[]" required="false"/>
3    <aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
4    <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
5    <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
6    <div>
7        <div class="searchRegion">
8            {!v.search}
9        </div>
10        <div class="profileMenuRegion">
11            {!v.profileMenu}
12        </div>
13        <div class="navigation">
14            {!v.navBar}
15        </div>
16        <div class="newHeader">
17            {!v.newHeader}
18        </div>
19        <div class="mainContentArea">
20            {!v.body}
21        </div>
22    </div>
23</aura:component>

2. Add a Design Resource to Include Theme Properties

You can expose theme layout properties in Experience Builder by adding a design resource to your bundle.

First, implement the properties in the component.

1<aura:component implements="forceCommunity:themeLayout" access="global" description="Small Header">
2    <aura:attribute name="blueBackground" type="Boolean" default="false"/> 
3    <aura:attribute name="smallLogo" type="Boolean" default="false" />
4    ...

Define the theme properties in the design resource to expose the properties in the UI. This example adds a label for the Small Header theme layout along with two checkboxes.

1<design:component label="Small Header">
2    <design:attribute name="blueBackground" label="Blue Background"/>
3    <design:attribute name="smallLogo" label="Small Logo"/>
4</design:component>

Theme layout properties

3. Add a CSS Resource to Avoid Overlapping Issues

Add a CSS resource to your bundle to style the theme layout as needed, ideally using standard design tokens.

To avoid overlapping issues with positioned elements, such as dialog boxes or hovers:

Apply CSS styles.

1.THIS {
2    position: relative;
3    z-index: 1;
4}

Wrap the elements in your custom theme layout in a div tag.

1<div class="mainContentArea">
2    {!v.body}
3</div>

The theme layout controls the styling of anything within it, so it can add styles such as drop-shadows to regions or components. For custom theme layouts, SLDS is loaded by default.

Note

Lightning Communities Developer Guide

Configure a Custom Theme Layout Component

1. Add an Interface to Your Theme Layout Component

2. Add a Design Resource to Include Theme Properties

3. Add a CSS Resource to Avoid Overlapping Issues

See Also