Sample Html Header Code

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>

Litmos Documentation

Customizations

Sample Html Header Code

Custom HTML Header & Footer Fragments

Sample Code #1

Sample Code #2

Sample Code #3

Useful Links

In this article

Related articles