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 Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Community
Customize the Theme Layout of Your Template
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: Lightning Locker and Stricter CSP
Analyze and Improve Community Performance
Connect Your Community to Your Content Management System
Report on Deflections: The Deflection Signals Framework
Deploy a Community from Sandbox to Production
PDF

Newer Version Available

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

Customize the Look and Feel of a Lightning Template

You can control the appearance of a Lightning template in several ways, each of varying complexity and granularity.
Within Community Builder, you can modify styles that are specific to the template and therefore can’t be shared between communities. The options in Community Builder are the simplest to use and don’t require coding.
  • The Theme panel updates the template with simple, point-and-click properties. This approach is ideal for admins to use.

    Individual component property panels, such as for headers or search, provide additional more specific adjustments in look and feel.

    Note

  • The CSS Editor lets you create custom CSS that overrides the basic styles of template elements. This option is suitable if you’re familiar with CSS and want to make only minor modifications to some out-of-the-box components or template elements.

    With the introduction of theme swapping, any custom CSS you have entered is now tied directly to your active theme. For existing communities, ensure that any desired custom CSS you may currently be using is copied to the newly selected theme. Where custom CSS is necessary, leverage public Lightning Communities tokens in your theme layouts where it makes sense (brandLogoImage, action color, etc) to ease the pain of future updates to the template and themes.

    Note

However, to completely customize the appearance of a template, you need to build your own components.
  • Custom Aura components encapsulate a CSS resource as part of the component bundle, making the components reusable across communities.
  • Content layout components define the content regions of your page and contain components.
  • Theme layout components let you customize the structural layout of the template, such as the header and footer, and override its default styles.