Lightning Communities Developer Guide

Get Up to Speed with Lightning Communities
Develop Lightning Communities: The Basics
Customize the Look and Feel of a Lightning Template
Update a Template with the Branding Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Community
Customize the Theme Layout of Your Template
How Do Custom Theme Layouts Work?
Configure a Custom Theme Layout Component
Create Custom Content Layout Components for Communities
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Communities
Example: Build a Condensed Theme Layout Component
Develop Secure Code: LockerService and Stricter CSP
Analyze and Improve Community Performance
Connect Your Community to Your Content Management System
Community Migration, Packaging, and Distribution
PDF

Newer Version Available

This content describes an older version of this product. View Latest

How Do Custom Theme Layouts Work?

To understand how a theme layout works, let’s look at things from the Community Builder perspective. In Community Builder, a theme layout combines with theme layout types to give you granular control of the appearance and structure of each page in your community. You can customize the layout’s header and footer to match your company’s style, configure theme properties, or use a custom search bar and user profile menu. You then use theme layout types to apply a theme layout to individual pages and quickly change layouts from one central location.

A theme layout type categorizes the pages in your community that share the same theme layout. You can assign a theme layout to an existing type or create custom types. Then you apply the theme layout type—and thereby the theme layout—in the page’s properties.

Customer Service (Napili) includes the following theme layouts and types.
  • Inner applies the Customer Service theme layout to all pages, except the login pages.
  • Login applies the Login Body Layout theme layout to the login pages.
  • Home isn’t applied to any pages. However, the Home layout type is ideal for applying a separate theme layout when you want your home page to look different from the inner pages in your community.

Example

Let’s say you create three pages for your upcoming Spring campaign. Using the forceCommunity:themeLayout interface, you create a custom Large Header theme layout in the Developer Console. In the Settings | Theme area, you add a custom theme layout type called Spring to categorize the campaign pages and you assign the Large Header layout to it.The Theme area

Next, you apply the Spring theme layout type in each page’s properties, which instantly applies the Large Header layout to each page.The Page Properties area

Everything looks rosy until the 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 area, you can switch Spring to the Small Header layout and instantly update all three pages.

Spring custom theme layout type

Example

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

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

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