1

I have recently made a new LWR site and want the header and the footer to be fully custom. I am quite new to Salesforce and the documentation on Custom Theme Layouts is very vague.

enter image description here

^^^ In the image above I have made a theme layout component and a page layout component. However theme header and theme footer still appear even though I am not calling them.

blankthemelayout (lwc) VVVVV

<template>
<div class="container">
  <header data-f6-region class={headerStyle}>
      <slot name="header"></slot>
  </header>
  <section data-f6-region class={sectionStyle}>
      <slot></slot>
  </section>
  <footer data-f6-region class={footerStyle}>
      <slot name="footer"></slot>
  </footer>
 </div>
import { LightningElement, api } from 'lwc';

 /**
 * @slot header
 * @slot footer
 * @slot default

  export default class blankThemeLayout extends LightningElement {
    @api backgroundColor = '#fff';

    renderedCallback() {
    this.template.querySelector(".container").style.backgroundColor = this.backgroundColor;
  }
 }



<?xml version="1.0" encoding="UTF-8" ?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="blankThemeLayout">
  <apiVersion>52.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Blank Theme Layout (LWC)</masterLabel>
   <targets>
    <target>lightningCommunity__Theme_Layout</target>
    <target>lightningCommunity__Default</target>
   </targets>
    <targetConfigs>
     <targetConfig targets="lightningCommunity__Default">
        <property name="backgroundColor" type="Color" default="#feb8c6"></property>
      </targetConfig>
   </targetConfigs>
</LightningComponentBundle>

I was wondering what I need to do to remove the theme header and theme footer as I can't find any documentation on them.

2 Answers 2

0

if you remove the slots in the template file

<slot name="header"></slot>
<slot name="footer"></slot>

and in the js

 * @slot header
 * @slot footer

you could remove it, or did I get you wrong?

And here is a quite good documentation.

0

If you drag and drop the layout from custom component, this happens.

Instead select the custom theme from Settings-> Theme-> Theme Layouts->New Theme Layout, and add the custom theme you created using LWR layout. Screenshot of selecting Custom theme on SF Community

Hope this solves the issue.

2
  • How does this address the issue of the headers and footers?
    – Derek F
    Feb 20, 2023 at 16:53
  • the additional headers and footers are on the theme. you've put a "layout" within the default "theme" so there are double headers and footers. Following the screenshot uses your custom layout AS the theme rather than placing it within the default. Jul 13, 2023 at 16:20

You must log in to answer this question.

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