3

New to communities, and I'm struggling to understand the documentation regarding theme layouts.

On the "Build Your Own" theme, you are provided only a Content Header, Content Body, and Content Footer. Whereas if I open an existing theme such as Customer Account Portal, it has a template header, template, and template footer.

DOCS: https://developer.salesforce.com/docs/component-library/bundle/forceCommunity:themeLayout

If I were to create these or the components in them would need to create a forceCommunity themelayout for the actual template header and footer? Or is this done with forceCommunity layout interface?

How would I create custom components (a new dropdown for example) for these template sections? I can't seem to add components to them in the pre-existing theme. Is this even possible?

Is there any way to access the lightning components for the pre-existing themes and layouts to use them as reference? I am not finding them in the developer console.

1 Answer 1

1

Today there are 2 "Build Your Own" community templates:

  1. Build Your Own (Aura)
  2. Build your Own (LWR)

One important difference between them is that Build Your Own (Aura) template requires 1 Aura component as theme and 1 Aura component as layout. So at the base everything is Aura. Within the regions of the layout you are free to embed both Aura and LWC components.

The "Build Your Own (LWR) template use one LWC component as theme layout. So no more Aura! Finally...

I encourage everyone to switch to LWR. 🚀


To customise the theme and layout of an Aura template you need to create 2 Aura components:

force-app/main/default/aura/fooTheme/fooTheme.cmp

<aura:component description="Foo theme" implements="forceCommunity:themeLayout">
  <div class="foo-theme">
    {!v.body}
  </div>
</aura:component>

force-app/main/default/aura/fooLayout/fooLayout.cmp

<aura:component description="Foo layout" implements="forceCommunity:layout" access="global">
  <aura:attribute name="content" type="Aura.Component[]" required="false"></aura:attribute>
  <div class="foo-layout">
    {!v.content}
  </div>
</aura:component>

Deploy these and assign them in the Community Builder. Make them as complex as you need.

Personally I would drag in one LWC component which looks like:

force-app/main/default/lwc/fooPage/fooPage.html

<template>
  <c-foo-header></c-foo-header>

  <main>
    <h1>Foo</h1>
  </main>

  <c-foo-footer></c-foo-footer>
</template>

But not everyone agrees with full custom! 🙈


To customise the theme layout of a LWR template, you need to create one LWC component:

force-app/main/default/lwc/fooThemeLayout/fooThemeLayout.html

<template>
  <slot></slot>
</template>

force-app/main/default/lwc/fooThemeLayout/fooThemeLayout.xml

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>54.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightningCommunity__Page</target>
    <target>lightningCommunity__Default</target>
    <target>lightningCommunity__Theme_Layout</target>
  </targets>
</LightningComponentBundle>

Feel free to ask more questions in the comments. Can elaborate more.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .