Step 3: Add a Logo Component

Return to the theme layout component to add a company logo to it.

You can add a logo to the page in several ways.

Referencing the design token as part of the background image property through your CSS
Creating a custom component that displays a static resource��for example, {!$Resource.MyJavascriptFile}
Create a custom component that fetches the path to the asset from the server
Use an out-of-the-box component, such as the Rich Content Editor

If you want to use the same company logo image that was uploaded in the Theme panel, the easiest and most consistent way is to use the design token. Let’s look at that code first.

In the following CSS snippet from a component's style bundle, the code uses the brandLogoImage token (wrapped by a t()) to inject the company logo in the CSS as the background image of the logoContainer.

1.THIS .logoContainer {
2  background-image: t('url(' + brandLogoImage + ')');
3  background-position: center;
4  background-repeat: no-repeat;
5  background-size: contain;
6  width: 80%;
7  height: 50px;
8}

For this next example, let’s use a custom component and reference a static resource called cirruslogo. In the theme layout component, add the following code to the first slds-col container with the logo placeholder comments.

1<div class="logoContainer">
2    <img src="{!$Resource.cirruslogo}"/>
3</div>

Lightning Communities Developer Guide

Step 3: Add a Logo Component

See Also