2

I am trying to implement a custom community theme layout and add use default navigation bar there. For now, I am using Stella pre-built theme and the navigation bar is not displayed there. However, if I change the template to pre-build Customer Service, the navigation bar is displaying fine. At the same time, the search element and profile menu displayed correctly all-time on both pre-built themes. Could you please let me know what is the issue and how can I implement a custom theme layout with the default navigation bar? I need this for the home page.

The code I am using is pretty simple and taken from the documentation:

<aura:component implements="forceCommunity:themeLayout" description="connectHomePageLayout">
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<div class="navigation">
    {!v.navBar}
</div>
<div class="searchRegion"> 
    {!v.search} 
</div> 
<div class="profileMenuRegion">
    {!v.profileMenu}
</div>

enter image description here

1
  • I think the docs are wrong, but I can't find any reference to what they should be... but I do notice the header is called "themeHeader Aug 31, 2020 at 2:15

1 Answer 1

1

The docs do not state this, but it turns out you have to add some more themeXXXX components to the themelayouts.

I was able to work this out by looking at the css classes on the page.

Do something like this:

<aura:attribute name="themeFooter" type="Aura.Component[]" required="false" />
<aura:attribute name="themeHeader" type="Aura.Component[]" required="false" />

<div>
 <div class="themeHeader">
    {!v.themeHeader}
 </div>
 <div class="main" >
   <div class="content">
     {!v.body}
   </div>
   <div class="footer">
     {!v.themeFooter}
   </div>
 </div>
</div>

I haven't tried this, but following the same idea, you can probably add the themeHero to get that to show up too.

You must log in to answer this question.

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