---
schema_version: "1"
id: 4c6a37cc0ab6aa9e3b6ff0a191598a500c3a4ba032761a993176dd302bfcf838
title: Theme Layout
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/forceCommunity/themeLayout/forceCommunity-theme-layout.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/forceCommunity-theme-layout.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 8c145b96cee9be91a97ce8625636371f4046c91d8d5350e12b0d779c211a6f64
products:
  - Lightning Component Reference
---
# Theme Layout

**`forceCommunity:themeLayout`**

Represents the layout for a theme and hosted inside the Experience Builder.

**For Use In**

Experience Builder Sites

::::::tabset{tabs='["Develop", "Specifications"]'}

:::::tab

A custom theme layout transforms the appearance and overall structure of the pages in the Customer Service template. To appear in Experience Builder as a custom theme layout component, a component must implement the `forceCommunity:themeLayout` interface.

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. To create a custom theme layout that reuses the existing components in the Template Header region, declare the `search`, `profileMenu`, or `navBar` attributes.

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

```
<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">
            <!-- Search Publisher component -->
            {!v.search}
        </div>
        <div class="profileMenuRegion">
            <!-- User Profile Menu component -->
            {!v.profileMenu}
        </div>
        <div class="navigation">
            <!-- Navigation Menu component -->
            {!v.navBar}
        </div>
        <div class="newHeader">
            {!v.newHeader}
        </div>
        <div class="mainContentArea">
            {!v.body}
        </div>
    </div>
</aura:component>
```

Mark your resources, such as a component, with `access="global"` to make the resource usable outside of your own org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Experience Builder user in another org.

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.

Next, you can expose theme layout properties in Experience Builder by adding a design resource to your bundle. Design resources must be named `componentName.design`.

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

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" />
    ...
```

If you experience overlapping issues with positioned elements, such as dialog boxes, you can apply additional styling to your CSS resource in the bundle.

For more information, see [Using Components](https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_using_intro.htm) in the Lightning Components Developer Guide.


:::::

:::::tab

![No specifications to show](https://developer.salesforce.com/media/no-specs.png)


:::::

::::::