Community Custom Theme Layout Using Lightning Components

Theme layouts and theme layout components combine to give you granular control of the appearance and structure of each page in your community. Customize the layout’s header and footer to match your company’s style, configure theme layout properties, or use a custom search bar and user profile menu. Then use theme layouts to assign theme layout components to individual pages allowing you to quickly change layouts from one central location. Whether you’re a consulting partner or an ISV, or you simply want to revamp your own community, custom theme layouts make it easy to rebrand. A theme layout component is the top-level layout for the template pages (1) in your community. Theme layout components are organized and applied to your pages through theme layouts. Theme layout components include the common header and footer (2), and often include 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 categorizes your community pages that share the same theme layout component. You can assign a theme layout component to any existing theme layout. Then you apply the theme layout —and thereby the theme layout component—in the page’s properties.

1.Create a Componet 

In order to use the custome component in  theme layout the component must implement the forceCommunity:themeLayout interface to appear in Community 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.

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
     <aura:attribute name="blueBackground" type="Boolean" default="false"/> 
    <aura:attribute name="smallLogo" type="Boolean" default="false" />
    <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 class="searchRegion">
        <div class="profileMenuRegion">
        <div class="navigation">
        <div class="newHeader">
        <div class="mainContentArea">

2. (Optinal )Design Resource 

You can expose theme layout properties in Community Builder by adding a design resource to your bundle.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.

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

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 use this CSS

    position: relative;
    z-index: 1;

4. Configure in Communities

Now you will be able to use the theme in your communites and go to . In the Settings | Theme area, you add a custom theme layout as shown below .

Next, apply the My Custom theme layout in each page’s properties, which instantly applies the Small Header layout to each page.


As a result of the Custom theme layout you can page content is looks like below