With pre-built themes for Lightning Communities in Summer’18, any customer, partner, or developer can create visually stunning experiences in Lightning Community Builder with access to more controls and tools. Summer ’18 and the roadmap for Winter ’19 are the next steps in a journey to make building beautiful experiences in Lightning Communities seamless for developers and admins. In this blog post, you will learn about the underlying technology powering our theming engine, the building blocks of our new pre-built themes, and best practices for developers to adopt.
Custom themes and the theming engine for Lightning Communities were first introduced at Dreamforce 2016. Themes (and theme layouts) are how any developer can deliver a customized UI for communities while still taking advantage of the rest of the Lightning Communities platform (including Community Builder).
It’s important to remember that themes are designed to control the overall layout and styling of your community (Think of it like your HTML template and global.css).
With the Summer ‘18 release, we are introducing four pre-built themes that will be available to use across any Salesforce ‘out of the box’ Lightning Community templates: Customer Service, Partner Central, Customer Account Portal, Build Your Own and any custom template you may have developed.
These pre-built themes are built on top of our existing theming framework and the forceCommunity:themeLayout
Lightning component interface. They take advantage of several new design property interfaces (color picker, image picker, slider) that are surfaced in Community Builder and also leverage our new theme swapping functionality that allows you to change the active theme that is associated with the community instance. This means that it’s easy to quickly change the overall UI of the community without impacting any of the underlying pages, page layouts and/or components.
As a developer, you should check out theme swapping. With theme swapping, any custom CSS you have entered through the “</> Edit CSS” option in Builder is now tied directly to your active theme. For an existing community, ensure that any desired custom CSS you are using is copied to the newly selected theme.
Additional points to consider:
While our ‘out of the box’ pre-built themes are geared toward customers who don’t have the necessary skillset for building a custom theme, there are several key platform enhancements we are looking to rollout for developers starting with the Winter ’19 release:
Here’s an example of leveraging the new interfaces (design properties) to provide declarative controls in Community Builder.
Component file:
<aura:component> <aura:attribute name="backgroundOverlayColor" type="String" default="rgba(0,0,0,0.5)" /> <div> <div style="{!'background-color: ' + v.backgroundOverlayColor + ';'}" /> </div> </aura:component>
Design file:
<design:component> <design:attribute name="backgroundOverlayColor" type="Color" /> </design:component>
Whether you are currently developing your own custom theme / theme layouts or just getting ready to dive in, here are some key best practices to keep in mind:
If you’re already building custom themes today, get ready to start leveraging some of the new functionality rolling out with the Winter’19 release and take them to the next level for your customers. If you’re new to custom themes, hopefully this gives you a great overview of what’s on the horizon and the resources you need to get started.
If you want to learn more about what’s new in Summer’18 and what’s on the Winter’19 roadmap for Community Cloud, be sure to register for our Community Cloud webinar for developers on June 14th!
Wayne Lau (@waynelau_sfdc) is a UX designer in the Community Cloud team focused on our Lightning Community Builder and Digital Experience Platform.
KJ Kim (@kj_sfdc) is an engineer in the Community Cloud team focused on our Lightning Community Builder and Digital Experience Platform.
Henry Chen (@HenryChen_sfdc) is an engineer in the Community Cloud team focused on our Lightning Community Builder and Digital Experience Platform.
David Green (@d_l_green) is a product manager in the Community Cloud team focused on our Lightning Community Builder and Digital Experience Platform.