[SalesForce] Customizing the Communities header

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?

Best Answer

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

Related Topic