Customizing the Interface

Overview

Learndot allows interface customization, where you can control the global layout configuration and design. Learndot also gives you control of logos and banners configuration, as well as the Learner UI.


Customizing the Header and Footer

The header and footer of Learndot Enterprise can be configured to match the header and footer of most websites. These areas can use Javascript.

Please follow the steps to enable custom header and footer.

  1. Go to System > Look and Feel > Skin
  2. Set Global Layout to "Blurb Header & Footer"
  3. Once step 2 is set, system will load blurb content to header and footer.
  4. Header code needs to be stored in page Header blurb. (Create a new blurb if this blurb does not exist in the system)
  5. Footer code needs to be stored in page Footer blurb.

Customizing the Page Body Content

Selecting Page Templates

System pages are dynamically populated with data by the system and are fixed in layout. Different template layouts exist that you can choose from. 

  • Go to System > Look and Feel > Skin
  • Scroll down to the Templates section

  • Review the URL of the page, and select a new template from the list, then click Save
  • Click the "View" link to see the page layout change

Adding New Templates

This ability is only available via the Services team, who can add new templates to the product for a fee. The process of adding a new template to the system and getting it to a production environment takes around 4 weeks - from the last development effort (or last change request). 

Building Custom Pages

Custom pages are used to display content in alternate ways (layouts and options) that system pages do not offer. They can be developed by your team, or the Learndot team. All custom page maintenance is the responsibility of the customer.

  1. Add any custom pages that are needed to create the user-flow/user-experience you need.
  2. Details available at Pages.

Changing CSS

CSS allows the style and feel or a site to be configured. There are two different interfaces available where the CSS can be configured so that the site will more closely match your branding.

Changes to the CSS of the Public pages can be made as needed. 

  • Go to System > Look and Feel > Skin
  • Under the heading Stylesheets make changes in the box "Inline CSS"

  • Press Save at the bottom of the screen

Changes to the CSS of the Learner UI pages can be made as needed. 

  • Go to System > Look and Feel > Learner UI
  • Click Update Options button in the top right

  • Make changes in the box Custom CSS

  • Press Save at the bottom of the screen

Changing Logos and Banners

To change any logos and banners in the system, details available at Configurable Logos

Pro Tip

The best size image to use are, Logos: 200 x 200 px , Banner: 1200 x 400 px

System Settings

There are additional system settings that control other aspects of the user interface.

System Setting

Description

company.logo

Configures a static file (image) as the company logo.

company.tag

Configures a static file (image) as the company tagline.

skin.favicon

Can point to a static file that becomes your site's favicon.

skin.javascript

Can point to a static file that gets load as JavaScript.

skin.html.head

Allows you to inject additional HTML at the end of the <head>...</head> section.

skin.proposal.style.enabled

Allows you to enable/disable the embedded CSS that gets loaded into training proposal page.

skin.html.body.begin

Allows you to inject additional HTML at the beginning of the <body>...</body> section.

skin.html.body.end

Allows you to inject additional HTML at the end of the <body>...</body> section.

Example - Setting a Custom Favicon

Changing the favicon is an easy way to customize the look and feel of your entire site. The following steps are required to install a favicon:

  • Upload the new favicon through the "Static Files" option in the Administration menu. (To do so, navigate to System > Contents > Static Files)

    Pro Tip

    • A good place to upload it is "skins/default/images/" - you may have to create these folders.
    • The file can be placed in other locations, such as in the current skin's folder, just take note of where you saved it.

  • Navigate to System > Set up > System Settings
  • Search for the "skin.favicon" setting in the list of available settings, using the search bar at the top of the screen 

  • Press the edit button in the left column of the settings list next to the "skin.favicon" setting
  • Ensure that the Enabled option is selected

  • Enter the path of the favicon in the Value field

  • Press Save to apply the new setting and close the Settings window


You should see the new favicon next time you open a page on your site. If you don't see the new favicon first try forcing a refresh by pressing Ctrl+R. If you still can not see the change, check the settings and ensure the correct file has been uploaded.

If you don't see the new favicon first try forcing a refresh by pressing Ctrl+R. If you still can not see the change, check the settings and ensure the correct file has been uploaded.

Changing Labels 

There are certain text elements that are controlled with a file called "messages.properties". This file contains key/value pairs for variables used in templates that display text. The value of a label can be changed by overwriting it in a system setting, then requesting the support team to restart the Learndot for you.

  • Find the text in Learndot that you wish to update
  • Open the messages.properties file and Search for the text to see if it exists in the file (sample messages.properties file here).
  • Then find the Key and write it down (you'll need it later)
  • Find a system setting called "messages.properties.override" using the search bar at the top of the screen. Or create it if it doesn't exist by clicking the New button and following these details: 

    • Enabled: Yes
    • Name: messages.properties.override
    • Type: String
    • Value: <this is where you add your changes>, i.e. sample value: shoppingCartLabel=Super New Shopping Cart Label;
  • Make your changes in the value field and click save
  • Email support@learndot.com to request that your site be restarted, for the changes to take effect.

If your site is live (in production), you may wish to wait for the next upgrade or request an outage window for the restart. As a guide, Sunday nights PST may be a low traffic time.


Time Zone

The display format of time zones can be configured to control the display of time information in the various interfaces across the application via System Settings.

The System Settings for this are as follows:

System Setting Name

Default Value

date.time_zone.format.short

z

date.time_zone.format.long

zzzzz

The configurations follow the Java SimpleDateFormat standard for formatting the time zone for display, here are some examples:

Configuration

Sample

z

EST

zzzzz

Eastern Summer Time (New South Wales)

Z

+1100

Please note that you can also include arbitrary text into the format by enclosing the text in single quotes.
For example: 'GMT'Z becomes GMT+1100.