Group Specific Header (Customer / Partner Branding)

In this article we will describe how to show customer's logo in header if the current user is a member of that group. To set this up, do the following

  • Create the groups for each customers 
  • Upload the group logo for each of these groups
  • Add users in these customers group

Next, we can add few lines of script in header placement to customize the displayed logo in header depending on user's group membership

 

#if(!$UIContext.isGuest() && !$UIContext.isAdminOrSiteAdmin()) 
  #set($siteId = $UIContext.getSite().getId())
  #set($grpMembers = $UIContext.getCurrentUser().getGroupUser().getGroupMembers())
  #foreach($gm in $grpMembers)
    #if($gm.getGroup().getLogo() != $null)
       <img src="../att/$gm.getGroup().getLogo().getId()" style="max-height:49px" /> <h1 style="display:inline-block">$gm.getGroup().getGroupName()</h1>
       <style>
           #logo-group{display:none !important}
       </style>
       #set($logoSet = 1)
      #break
    #end
  #end
#else
   <h1 style="display:inline-block">$UIContext.getSite().getName() </h1>
#end

#if ($logoSet != 1)
<h1>
 $UIContext.getSite().getName()
</h1>  
#end
 

 

By following this example, you can customize further and add custom css rules to do further customizations like - changing colors, fonts etc. 

Also, you can add custom menu options in the navigation depending on user's group memberships. 

 


Rating: