1

We have created a Community and want to Customize the header.

In Setup -> Customize -> Communities -> All Communities -> Administration Settings -> Branding I was able to replace the Header with an HTML file that looks great. It contains a search bar that redirects to a VF page.

The only problem is, the client wants the Name dropdown and options that appears in the Community Designer page ( Setup -> Customize -> Communities -> All Communities -> Community Designer ) in the top right:

enter image description here

I haven't found a way to customize the Top Header to both

  1. Add an input, select, form etc.
  2. Get the styling and behaviour of the name dropdown.

Is there any way to achieve this?

0

This basically comes down to creating a custom theme layout with custom styling. You will need to create a lightning component that :

implements="forceCommunity:themeLayout"

as follows:

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
<aura:attribute name="search" type="Aura.Component[]" required="false"/>
<aura:attribute name="profileMenu" type="Aura.Component[]" required="false"/>
<aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
<aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
<div>
    <div class="searchRegion">
        {!v.search}
    </div>
    <div class="profileMenuRegion">
        {!v.profileMenu}
    </div>
    <div class="navigation">
        {!v.navBar}
    </div>
    <div class="newHeader">
        {!v.newHeader}
    </div>
    <div class="mainContentArea">
        {!v.body}
    </div>
</div>

you will notice that each class represents a section/component of the standard layout, you can then add custom styling (and reorder the components) to fit your needs.

once you have created the above component, you will need to assign it to a layout under community settings:

enter image description here

and finally to the page in question:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.