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
Migrate CSS Overrides
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: 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

Override Template Elements with Custom CSS

Use the CSS Editor in Community Builder to add custom CSS that overrides the default template and Branding panel styles. You can also use it make minor changes to the appearance of out-of-the-box components, such as padding adjustments. However, use custom CSS sparingly because future releases of template components might not support your CSS customizations.

For large customizations, use the CSS resource in custom Lightning components and custom theme layout components instead of custom CSS. If you use global overrides, always test your community in sandbox when it’s updated each release.

Note

To make minor CSS modifications to a template item, use Chrome DevTools to inspect the page and discover the item’s fully qualified name and CSS class. Then use the information to override the item’s standard CSS with your custom CSS. To learn more about inspecting and editing pages and styles, refer to the Google Chrome's DevTools website.

The easiest way to inspect a component is to view the page in Preview mode. This example inspects the Headline component to locate the component’s fully qualified name—forceCommunityHeadline.Chrome DevTools inspector

If a top-level CSS class isn’t defined for a component, this option doesn’t appear, which means that you can’t reliably target the component.

Note

Then find the element that you want to style—for example, headlineTitleText. If the element doesn’t have a class name, you must write a specific selector targeting the element.Chrome DevTools inspector

With that information, you can create a custom style to override the default title color.
1.forceCommunityHeadline .headlineTitleText
2{
3    color: red;
4}

And then add it to the CSS Editor.CSS Editor

Similarly, you could use custom CSS to hide the component entirely.
1.forceCommunityHeadline
2{
3    display: none;
4}

You can link to a CSS style sheet as either a static or external resource in the head markup in Settings | Advanced. However, because global value providers aren’t supported in the head markup or in CSS overrides, you can’t use $resource to reference static resources. Instead, use a relative URL using the syntax /sfsites/c/resource/resource_name.

For example, if you upload an image as a static resource called Headline, reference it in the CSS Editor as follows: 
1.forceCommunityHeadline
2{
3    background-image: url('/sfsites/c/resource/headline')
4}

Head markup is also useful for adding favicon icons, SEO meta tags, and other items. However, be aware of future stricter CSP restrictions that could affect your code.

Tip