Sample HTML Header Code

Note:  This feature is only available for certain plans.  Please contact sales@litmos.com 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.
  • Client side scripting (e.g. Javascript) is not supported with the HTML.

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.   The codes above have been underlined for your convenience.  This code is designed to reflect the litmos.com website.

Sample_header.JPG

Note:  Although it is not required to be an HTML expert, it is recommended to have some HTML experience before creating a header.

 

<p style="text-align:center;font-family:arial;"><strong> Welcome to elearning, {{Profile.FirstName}} {{Profile.LastName}}  
<img class="alignnone size-full wp-image-4245" title="litmos Web - Our Customers" src="https://yourcompany.litmos.com{{Profile.ImageSrc}}" alt="" width="20" height="20"
<style="text-align: center;">  You're username is: {{Profile.UserName}}.
<style="text-align: center;">
<a href="https://yourcompany.litmos.com{{SignOutLink}}" rel="attachment wp-att-4252">
<img class="alignnone size-full wp-image-4252" title="Litmos Web - Home" src="http://www.litmos.com/wp-content/uploads/2013/03/logoutbutton-hi.png" alt="" width="45" height="20"
</a></p>

<p>
<img class="alignleft  wp-image-4242" title="Litmos Logo Only transparent" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Logo-Only-transparent.png" alt="" width="215" height="60"

<a href="http://www.litmos.com/" rel="attachment wp-att-4252"
<img class="alignnone size-full wp-image-4252" title="Litmos Web - Home" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Home.jpg" alt="" width="91" height="42" 
<a/>

<img class="alignnone size-full wp-image-4252" title="Litmos Web - Home" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Home.jpg" alt="" width="91" height="42"
</a>

<a href="http://www.litmos.com/pricing/" rel="attachment wp-att-4251"
<img class="alignnone size-full wp-image-4251" title="Litmos Web - Pricing" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Pricing1.jpg" alt="" width="105" height="42"
</a>

<a href="http://www.litmos.com/learning-management-system/">
<img class="alignnone size-full wp-image-4250" title="Litmos Web - Tour" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Tour.jpg" alt="" width="81" height="42" 
</a>

<a href="http://www.litmos.com/mobile-learning/" rel="attachment wp-att-4248"
<img class="alignnone size-full wp-image-4248" title="Litmos Web - Mobile" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Mobile.jpg" alt="" width="101" height="42"
</a>

<a href="http://www.litmos.com/our-customers/" rel="attachment wp-att-4245"
<img class="alignnone size-full wp-image-4245" title="litmos Web - Our Customers" src="http://www.litmos.com/wp-content/uploads/2013/03/litmos-Web-Our-Customers.jpg" alt="" width="174" height="42"
</a>

<a href="https://litmos.zendesk.com/home" rel="attachment wp-att-4246"
<img class="alignnone size-full wp-image-4246" title="Litmos Web - Support" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Support.jpg" alt="" width="112" height="42" />
</a> <a href="http://www.litmos.com/blog/" rel="attachment wp-att-4249">
<img class="alignnone size-full wp-image-4249" title="Litmos Web - Blog" src="http://www.litmos.com/wp-content/uploads/2013/03/Litmos-Web-Blog.jpg" alt="" width="82" height="42" <a href="https://yourcompany.litmos.com{{MyProfileLink}}">
<img class="alignnone size-full wp-image-4250" src="http://www.litmos.com/wp-content/uploads/2013/03/1363921971_sign-up.png" alt="" width="42" height="42" />
</a>

 

Sample Code #2

The following code is for the header below.   Code that will need to be customized have been underlined for your convenience.  This is the basic code for removing the Profile & Setting links.

sample_html_header.PNG

<html>
<div id="titlebar">
   <div class="page-width"> 
       <h1 class="top-org-name">
          <img alt="Litmos" border="0" src="http://www.litmos.com/wp-content/themes/litmos-lms/images/litmos-logo.png" />
        </h1>
        <div class="nav">
            <a href="/account">
            <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. Code that will need to be customized have been underlined for your convenience. This code includes the user image, user name, and an optional "Edit Profile" link.

screenshot.png

 

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

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.