Rebrand Really Quickly with Custom Theme Layouts

Create custom theme layouts to instantly update the look and feel of your entire community. Customize the header and footer to match your company’s style, and create a custom search bar and user profile menu. Then easily switch between your custom theme layouts, search, and user profile menus, or package them up to share with other orgs. Whether you’re a consulting partner or an ISV, or you simply want to revamp your own community, custom theme layouts make rebranding a cinch.
Note

Note

This feature is available for communities using the Winter ’16 and later versions of the Customer Service (Napili) template.

What’s a Theme Layout?

A theme layout is the top-level layout for the template pages (1) in your community. It includes the common header and footer (2), and often includes navigation, search, and the user profile menu. The theme layout applies to all the pages in your community, except the login pages.

In contrast, the renamed content layout (3) defines the content regions of your pages, such as a two-column layout.Template page with theme and content layouts, numbered 1-3

How Do Theme Layouts Work?

Previously, you couldn’t modify the Template Header region of a Customer Service (Napili) template, apart from editing the properties of the components within it.

Now developers can create a custom theme layout component in the Developer Console that implements the forceCommunity:themeLayout interface. When the component is ready, you simply select the new theme layout (1) in Settings | Theme. And presto-chango, all the pages in your community are transformed!

The Theme area in Settings

And if your developer creates a custom search component (using the new forceCommunity:searchInterface) or a custom user profile component (using the new forceCommunity:profileMenuInterface), you can swap them out too. Select Use a custom search component or Use a custom user profile component (2) and choose the custom component you want.

Example

Sample custom theme layout

Because a theme layout is a Lightning component, you can package it in the same way as standard Salesforce components, using the same tools. Select Lightning Component Bundle as the package component type, add the theme layout component and any custom search or user profile components, and you’re good to go.

Note

Note

As part of our updates to the Theme area, we renamed the Show loading indicator as the page loads option to Show stencils when loading page content to better reflect its purpose. These settings apply only to the Customer Service (Napili) template.