How to create a theme layout in community with profile menu bar & configure it in community builder.

ThemeLayout.cmp

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout" >

<!--forceCommunity:availableForAllPageTypes, -->

<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"/>

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

<!--<aura:attribute name="relatedSec" type="Aura.Component[]" required="false"/>-->

<div>

<div class="menuX">

<span class="navigation">

{!v.navBar}

</span>

<span class="profileMenuRegion navmenu">

{!v.profileMenu}

</span>

<span class="searchRegion navmenu">

{!v.search}

</span>

</div>

<div class="newHeader">

{!v.newHeader}

</div>

<div class="mainContentArea">

{!v.body}

</div>

<!--<div class="relatedSec">

{!v.relatedSec}

</div>

-->

<div class="newFooter">

{!v.newFooter}

</div>

</div>

</aura:component>

ThemeLayout.design

<design:component label="Custom Theme Layout> </design:component>

ThemeLayout.css

.THIS .navmenu{ position: relative; float:right; } .THIS .navigation{ position: relative; float:left; width:auto; } .THIS .menuX{ background-color: black; padding: 50px; } .THIS .profileMenuRegion{ padding-top:5px; } .THIS .newHeader { clear:both; } .THIS .newHeader{ padding:20px; } .THIS .mainContentArea{ float: left; width: 100%; padding: 20px; } /* .THIS .relatedSec{ float:right; width:30%; padding: 20px; padding-top: 30px; }*/ .THIS .newFooter{ clear:both; padding: 20px; }

Go to community builder and click on gear icon(setting)

Setting -> Theme -> Configure. Click on edit icon and select your custom theme.

Finally, your theme is ready to use. You can drag and drop both standard and custom components.