Theme Layout

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.

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.

Implement the properties in the component.

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 in the Lightning Components Developer Guide.