Note: This feature is only available for certain plans. Please contact your Account Manager for more information.
Custom HTML Header & Footer Fragments
- An HTML Header fragment can be inserted as the first element on a web page. It will come directly after the <Body> tag and enable the inclusion of navigation, logos and other header related items.
- An HTML Footer fragment can be inserted as the last element on a web page. It will come directly before the </Body> tag and enable the inclusion of navigation, logos and other header related items.
- It’s not possible to upload images with the HTML fragment so any images used must be referenced from another website or intranet location.
- Styles should be included inline and not in a separate CSS stylesheet.
- Navigation hyperlinks should be absolute references, not relative to the page.
Static template fields:
{{Profile.FirstName}}
{{Profile.LastName}}
{{Profile.UserName}}
{{Profile.ImageSrc}}
{{MyProfileLink}}
{{SignOutLink}}
{{SwitchView}}
Sample Code #1
The following code is for the header below. This code is designed to reflect the litmos.com website.
Note: Although it is not required to be an HTML expert, it is recommended to have some HTML experience before creating a header.
<nav class="navbar navbar-default"> <div class="container"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://www.litmos.com/litmos-pricing" target="_blank">Pricing</a></li> <li><a href="https://www.litmos.com/learning-management-system">Tour</a></li> <li><a href="https://www.litmos.com/blog/mobile-learning">Mobile</a></li> <li><a href="https://www.litmos.com/customers">Our Customers</a></li> <li><a href="https://support.sap.com/">Support</a></li> <li><a href="https://www.litmos.com/blog">Blog</a></li> </ul> </div> </div> </nav>
Sample Code #2
The following code is for the header below This is the basic code for removing the Profile & Setting links.
<html> <div id="titlebar"> <div class="page-width"> <h1 class="top-org-name"> <img alt="Litmos" border="0" src="https://www.litmos.com/wp-content/themes/litmos-lms/images/litmos-logo.png"/> </h1> <div class="nav"> <a href="/account">Account</a> <a href="/account/logout">Sign-Out</a> </div> <div class="clear"> </div> </div> </div> </html>
Sample Code #3
The following code is for the header below. This code includes the user image, user name, and an optional “Edit Profile” link.
<p align="right">{{SwitchView}} | <a href="{{SignOutLink}}">Sign Out</a></p> <center> <table border="0" cellpadding="15"> <tr> <td><img src="[YOUR COMPANY LOGO URL]"></img></td> <td><img src="{{Profile.ImageSrc}}" class="img-circle" style="width:60px;height:60px;"></img></td> <td>Welcome, <strong>{{Profile.FirstName}} {{Profile.LastName}}</strong> <br>Your username is: {{Profile.UserName}} <br><a href="{{MyProfileLink}}">Edit Profile</a></td> </tr> </table> </center>