---
schema_version: "1"
id: 2d60c4bb499c1929b340e25c448a44971aeca2ef7ef6485150caa3ff50336941
title: Custom Theme Layouts and Theme Layout Components
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/community_builder_theme.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.community_builder_theme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e11090ec3cb3c8ddeca9f15ee089e23b6b14cbe4ea5dd178c7e53d6658e4669f
description: Theme layouts and theme layout components combine to give you granular control of the appearance and structure of each page in your site. 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 site, custom theme layouts make it easy to rebrand.
products:
  - Experiences
release: "264"
---
# Custom Theme Layouts and Theme Layout Components

Theme layouts and theme layout components combine to give you granular control of the appearance and structure of each page in your site. 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 site, custom theme layouts make it easy to rebrand.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: both Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d7910e71">User Permissions
            Needed</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d7910e71 ">To create an Experience Cloud site:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d7910e71 ">Create and Set Up Experiences AND View Setup and Configuration</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d7910e71 ">To customize or publish an Experience Cloud site:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d7910e71 ">
            <ul>
              <li>Create and Set Up Experiences AND View Setup and Configuration AND be a member
                of the site<p>OR</p>
              </li>

              <li>View Setup and Configuration AND be a member of the site AND have appropriate
                <a href="https://help.salesforce.com/s/articleView?id=experience.networks_access_control_overview.htm&amp;language=en_US" target="_blank">role-based site access</a>
              </li>

            </ul>
          </td>

        </tr>
      </tbody>
    </table>

A theme layout component is the top-level layout (1) for the template pages in your site. Theme layout components are organized and applied to your pages through theme layouts. A theme layout component 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. The next image shows a two-column content layout.

![Template page with theme and content layouts, numbered 1-3](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_contentlayout3.png)

A theme layout categorizes site pages that share a theme layout component. You can assign a theme layout component to any theme layout. Apply the theme layout in the page’s properties.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note To create custom theme layout components in the Developer Console, a developer implements the `forceCommunity:themeLayout` interface. All of our pre-built themes are developed on top of this interface and also use several design property interfaces (color picker, image picker, slider) in Experience Builder. Pre-built themes also take advantage of theme swapping. You can quickly change the overall look and feel of the site without impacting any of the underlying pages, page layouts, and components.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example

Let’s say you create three pages for your upcoming Spring campaign. You want them to use the Large Header theme layout component that your developer created. In the **Settings** | **Theme** area, you add a custom theme layout called Spring to categorize these pages and assign the Large Header layout component to it.

![The Theme area](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_theme1.png)

Next, apply the Spring theme layout in each page’s properties, which instantly applies the Large Header layout to each page.

![The Page Properties area](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_theme5.png)

To apply the theme layout, select **Override the default theme layout for this page** (1). This selection shows the **Theme Layout** options. Then, choose the new layout (2) from the available choices.

Everything looks rosy until your VP of marketing decides that the header takes up too much room. That’s an easy fix because you don’t have to update the properties of each page to change the theme layout. Instead, with one click in the Theme panel, you can switch Spring to the Small Header layout component and instantly update all three pages!

![Spring custom theme layout type](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_theme3.png)

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example

Now let’s say that the Small Header layout includes two custom properties—Blue Background and Small Logo. You enabled and applied these properties to all your campaign pages. However, for one page, you want to apply only the Small Logo property.

In this case, you could create a theme layout called Spring B, assign the Small Header layout component to it, and enable Small Logo. Then, you apply the Spring B theme to the page.

![Spring custom theme layout type](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_theme4.png)

Not sure which pages are associated with any of your theme layouts?

![Theme Settings panel with Pages Assigned shown](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/community_builder_theme_settings.png)

With a click and a glance, you can see how many and which pages are associated with any of your theme layouts. From **Settings** | **Theme**, click the Pages Assigned total for any theme layout row (1). Clicking this value opens a list of the pages associated with that theme layout (2).

Theme layouts make it easy to reuse the same theme layout component in different ways while maintaining as much granular control as you need.

#### See Also

- [Developer Guide: Build a Condensed Theme Layout Component](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_example.htm)
- [Trailhead: Create a Custom Theme Layout Component](https://trailhead.salesforce.com/en/projects/communities_theme_layout/steps/create_component)
- [Change the Theme Layout of Your Experience Cloud Site’s Pages](https://help.salesforce.com/s/articleView?id=experience.community_builder_theme_apply.htm&release=264.0.0&type=5 "A theme layout defines the top-level regions of your page, such as the header and footer, navigation, search, and the user profile menu. A theme layout component categorizes the pages in your site that share a theme layout.")
- [_Experience Cloud Developer Guide_: Create Custom Theme Layout Components for Experience Builder](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/components_config_for_builder_layouts.htm)
- [_Experience Cloud Developer Guide_: Configure Swappable Search and Profile Menu Components](https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_swappable.htm)