The following sections provide an example of how to configure the header.vm and custom.less file and the resulting header.
Configure the header.vm file
<div class="my-header">
#if ($isAuthenticated)
<div class="header-right authenticated">
Welcome <span class="username">$user.displayName</span> !<br />
Your email is <span class="email">$user.emailAddress</span>.<br />
Your $user.authenticationRealm id is <span class="id-$user.authenticationRealm">$user.authenticationId</span>.
</div>
#else
<div class="header-right not-authenticated">
You are not authenticated.
</div>
#end
</div>
Configure the custom.less file
@tenantCustomHeaderHeight: 100px;
.my-header {
background: black url('{PATH}/images/header.png') no-repeat;
height: @tenantCustomHeaderHeight;
width: 100%;
}
.my-header .header-right {
float: right;
color: #fff;
margin: 10px;
text-align: right;
font-family: 'open-sans',sans-serif;
font-size: 0.9em;
}
Result