Summer’18: Pre-Built Themes in Lightning Communities

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.

Lightning Community theming

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).

Summer ‘18: Pre-built themes

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.

What you should know about pre-built themes (with Summer‘18)

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:

• Saved settings: We automatically save and maintain any configurations you make to each theme so it’s easy to jump between themes without losing customizations. If you have tested multiple themes in a community, we recommend removing the themes you do not plan to use in that community (via Settings > Theme > Manage).
• Hero options: All pre-built themes come with an optional hero theme component for the Home page that is optimized for search, or “call to action” functionality and can be toggled on/off through theme properties.
• Audience targeting: The new theme components (ex: Compact Header) do not currently support component-level targeting (visibility). You can achieve this in three simple steps:
  • 1) Create a new custom theme layout (via Settings > Theme > Configure)
  • 2) Create a new page variation
  • 3) Assign the new theme layout to your page variation (via Page Properties)
• Branding: Today, branding values you define in Builder (e.g.: Action Color) do not automatically propagate down into the theme components. This means that the Dynamic Branding feature will not automatically work in the pre-built themes. This is something we are planning to address with the upcoming Winter ‘19 release.
• Multiple theme layouts: Several themes comes with two theme layouts: home and inner. When working with different theme layouts it’s important to note that theme component property values (e.g.: setting your header height to 80px) are applied to the pages with that theme layout assignment. If you have two theme layouts in your community, be sure to review all of your theme component settings.
• Mobile: Specific aspects of the theme component properties (e.g.: header height) are currently hardcoded for mobile devices using the Salesforce Lightning Design $mq-small media-query (max-width: 47.9375em).

What’s in store for the Winter’19 release

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:

• Standalone packaging: Developers will be able to programmatically build ‘reusable’ standalone themes using the Metadata APIs. “Export theme” functionality will also be coming to the Builder soon.
• Design properties: We will be exposing a series of currently internal-only design property interfaces (ex: Color picker) that you will be able to leverage in your own custom Lightning components.

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>

• Themes on AppExchange: In addition to standalone theme packaging, we will also be opening up AppExchange for developers to publish reusable themes for customers to download and leverage.

Best practices to follow for themes

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:

• Component styling: Always try to limit the amount of CSS overrides you leverage for styling Salesforce components. If you do use them, make sure you do sanity check during sandbox releases and use styling best practices.
• Avoid nesting: Keep components in hierarchies separate – don’t reach into your parent/child components (via CSS or JavaScript).
• Responsive design: Always build with responsive design in mind and optimize all of your theme-related assets for mobile connections.
• Design tokens: Leverage public Lightning Communities tokens in your theme layouts where it makes sense (e.g. brandLogoImage, action color, etc)
• Multiple theme layouts: Consider separate theme layouts for significantly different visual layouts and/or scoping specific CSS overrides
• Establish guardrails: Keep any declarative customization that you expose in Builder for customers to manage simply. Make it hard to produce bad results and consider styling guard rails (especially for mobile devices)
• Quality: Test, test, test (Including on Internet Explorer 11 and using actual devices instead of emulators).

Summary

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!

Resources

• Dreamforce 2017: Develop Visually Stunning Lightning Communities
• Build Better Communities with Lightning (YouTube video)
• Lightning Communities Developer Guide
• Building Custom Theme Layout Components (Documentation)
• Build a Custom Theme Layout Component for Lightning Communities (Trailhead project)

About the authors

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.