Lightning Communities Developer Guide
jNewer Version Available
How Do Custom Theme Layouts Work?
- Login applies the theme layout component, Login Body Layout theme layout to the login pages.
- Default is applied to all non-login related pages.
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 area, you add a custom theme layout called Spring to categorize the campaign
pages and you assign the Large Header layout component to it.
Next, you apply the Spring theme layout in each page’s properties, which instantly applies
the Large Header layout to each page. Select Override the default theme layout
for this page. (1) to display Theme Layout. Choose the new layout (2) from the
available choices.
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.
Example
Now let’s say you have two custom properties—Blue Background and Small Logo—in the Small Header layout component, 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 called Spring B, assign the Small Header layout
component to it, and enable Small Logo. Then apply the Spring B layout to the page.
Theme layouts make it easy to reuse the same theme in different ways while maintaining as much granular control as you need.