LTO: Custom Branding

* Please contact support for the latest CSS file

Litmos Training Operations Branding:

Branding in Litmos Training Operations is to wrap LTO body with customer’s header and footer

Below are the steps on how to work with Branding.

To copy your company’s header and footer html, go to your landing page (this is normally your Training/Education site) mouse right-Click and select “View Page Source” and copy page source and save it on local machine.
The body section can be ignored since the LTO body is wrapped with your header and footer (usually body will be after Header tag until footer tag in customer’s site).

After clicking on the blue arrow, click on the Appearance tab

Appearance Tab

Under Appearance tab, there are four sections where the header and footer html should be added
You can click on Preview button to go to the attendee page.

Document Top

This section can be left empty or Doctype can be put in this section.

Script Header

HTML for internal style and script is put in this section. If there are any external JavaScript files or CSS file, the link for the files is also put here.
All of the script tags and style tags are put in this section.

If HTML code in too big for the server and if any error message is popped up when saving, put cursor at start of Script Header and hit Enter key and click on save button again.
External style sheets and script files can be hosted on customer’s site and use full path

Example:

<link href='https://training_demo.crts.io/wp-content/themes/training_demo/viewcentral.css' rel='stylesheet' type='text/css'>

Or the files can be downloaded and hosted (Login to Admin site–>Side Nav–>Managing Data–>File Upload) in LTO and add relative path. The same applies for any images.

Example:

<link href='/events/uploads/ Training_Demo /viewcentral.css' rel='stylesheet' type='text/css'>

HTML put in this section is wrapped inside head tags and body tag begins.

Example:

Say below HTML code is put in Script Header section:

<!--Script Header Starts here-->

<link href='/events/uploads/Training_Demo/viewcentral.css' rel='stylesheet' type='text/css'>

<style>
    .button {
        width: 50px;
        padding: 10px 5px;
    }
</style>

<script src="/events/uploads/training_demo/modernizr.custom.all.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
function init () {

}
</script>

<!--Script Header Ends here-->

The attendee page source is as below:

Form Header

HTML for header and left side nav is put in this section.
If HTML is copied manually from your site (view Page Source) then HTML after body tag in the Page Source is where the Header usually starts.
Google Analytics is also place in the header section
A <div> tag can be added which will be used to control Litmos Training Ops body/content. Litmos Training Ops Body is present between Form Header and Form Footer.
The <div> tag is closed at beginning of Form Footer section thereby Litmos Training Ops Body is embed/wrapped in the <div> tag. The class attribute is used to point to class in style sheet.
LTO body is added in between Form Header and Form Footer (This can be viewed in page course of attendee page. Go to attendee page–>right mouse click in empty area of the page–>View Page Source).

Example to understand the HTML in Form Header Section:

Sample code for Form Header Section:

<!--Form Header Starts-->

<!--HTML for Header is put in this Section-->

<!--The HTML for Left Side Nav is also put here in this section as below-->

<div class="main-container" style="width:1200px;">

    <h2>LTO Header</h2>

    <!--Side nav HTML Starts-->

    <div class="side-nav" style="width:190px;float:left;">
        <!--Bootstrap classes can be used for side nav but LTO is not responsive and might cause issues with devices with small screens-->

        <ul>

            <li>This is left side nav</li>

            <li>HTML is out in Form Header Section</li>

        </ul>

    </div><!--Left side Nav Ends-->

    <div class="lto-body" style="width:800px; float:left;"><!--LTO body begins here-->

The attendee page source is like:

The main-container and lto-body classes above have closing div tags in Form Footer section.

Form Footer:

This section contains HTML for footer.
The <div> tag opened in Form Header section is closed in this section and this section contains right and bottom (side nav to right if any and footer) of the branding .

Example to understand the HTML in Form Footer Section:

Sample code for Form Footer Section:

</div><!--LTO Body Ends-->

<div class="right-nav" style="width:180px; float:left;"><!--Right side Nav Begins-->

    <ul>

        <li>This is Right side Nav</li>

        <li>HTML for right side nav is put in Form Footer Section</li>

    </ul>

</div> <!--Right Nav Ends-->

</div><!--main container Ends-->

<footer><!--Footer Begins-->

</footer><!--Footer Ends-->

HTML for right side nav is put here if there is any. The Page source for HTML is rendered as below in attendee page:

The main-container and LTO-body classes in Form Header section have closing div tags here. The HTML for Right side nav is put in this section.

Some changes for LTO body can also be directly changed under Appearance tab. like font size, link color, title color etc., and these changes apply only to body and not to header/footer.

Label Tab

Most of the content in LTO body can be found here. All of the text in Attendee View can be changed here.
We can select Message Type “All” and do a search on the keyword and click on the blue arrow to select it and add HTML tag to it (an inline style can be applied, or class attribute can be added which can be referred in an external stylesheet).
If labels on default brand are modified, then they affect labels in admin view as well.
HTML tags can be directly used for labels, but it is suggested to override them in the external style sheet because the system might run into some unexpected issues if HTML is not proper. It is suggested to directly add HTML tags only if the person modifying is aware of possible consequences.

→Search (Ctrl+F) for Keyword “Training Catalog” under Labels tab in admin view and click on blue arrow to select it.

Here Training Catalog is having <h2> tag. The style for <h2> is applied (the style can be overridden by external style sheet) to label “Training Catalog”.

→Search (Ctrl+F) on keyword “Schedules” under Labels tab in admin view and when correct label is found, click on blue arrow to next to it select.

Label “Schedules” can be put in a <div> tag and the class attribute can used to point to class in external style sheet.

Menu Tab

All the Menu Buttons below the header are under Menu Tab and these are part of LTO body.
HTML tag can be added to style these buttons (an inline style can be applied, or class attribute can be added which can be referred in an external stylesheet). URL for custom buttons can be provided here.
Icons or custom buttons can be used in place of the default buttons, this can be achieved by unchecking the checkboxes “Display Menu Links” and “Display Menu Links on Top”.

HTML code for custom buttons can be put in Form Header section in Appearance Tab. In the sense that custom buttons will now be part of Header.
URLs for custom buttons can be obtained from “Links and Views” (Administration–>Attendee Views–> Links and Views)

Menu Layout Tab

Layout of Menu Buttons: menu buttons can be moved in grid as per requirement. Buttons can be moved by clicking left/right/up/down arrows.
To hide menu buttons, move the buttons under “Hidden Links” with directional arrows.
Custom Buttons can also be used whose URL is defined under Menu tab (there are five custom buttons available)

Navigation Tab

All the buttons apart from Menu Buttons are here in this tab.
Similar to Menu buttons, HTML tags can be added to Navigation buttons (an inline style can be applied or class attribute can be added which can be referred in an external stylesheet)

URLs for custom Menu Buttons/Icons: (Administration–>Attendee Views–> Links and Views)

URLs for Menu buttons can be found here which then can be used when using custom buttons.
Click on Link button to see the URL. This URL can be used wherever needed in the system.

Special Note

Do not open two instances of attendee view in same browser at same time as the style sheets may be cached. This can cause issues when the browser renders the page. Clear the browser cache after any changes made to style sheet.

Litmos Training Operations Documentation

Branding