Custom LMS - Branding, Color, Style

< Back to support page


Portal Administrators can customize the look and feel of their LMS with the key elements listed below. This document covers these three options at a basic level.
 
  • Edit Images: Upload images to use throughout the LMS, including your Header Logo, Course Images, and custom HTML pages.
  • Edit HTML Content: Some sections of the site allow content customization by updating the existing HTML code.
  • Edit Stylesheets: Use cascading style sheets to control the overall look and feel of your portal.

Once you have loaded all custom files into the LMS, learn how to apply them with the following documents:
   

Edit Images

Portal Administrators can click Site Management > Edit Images to manage the images used throughout their LMS. This function allows editing in the sense that you are adding or deleting the images available in your system library. The LMS does not provide the ability to edit actual image files. Modifications to the size, color, contrast, brightness, and other properties must be completed prior to uploading the image to the LMS.

Links at top of page allow you to manage two separate libraries:
 
  1. LMS Images -- Use these images for your Header Logo, Certificate Logo, and custom HTML content. The Edit HTML page offers a content editor with Image Library tool, and also allows you to insert images using links with relative paths.
  2. Course Images -- Upload files and associate them with any course in the catalog. Set defaults for each type of course -- Assessment, Classroom, eLearning, Course Group, Self-Study, Virtual Classroom. Associate images to individual courses to see the custom course image override its default.
 
 

To upload new images

  1. Next to Upload new Image, click Choose File to open a selection window.
  2. Find and select the image you want to upload. Click Open.
  3. Click Submit.

NOTE: Images uploaded must not exceed 10 MB in size. If you load an image to use for your Header Logo, we recommend it be within 50 pixels in height and 400 pixels in width for best results. You can no longer assign your header logo under the Edit Images page. The option to select a new Header logo has been moved to the Site Management > LMS Information page under LMS Branding.
 

To delete an image

  1. On the Edit Images page, select the checkbox to the right of the image file name.
  2. Confirm the deletion by selecting Yes in the deletion confirmation pop-up.
  3. Click Submit.
 

Edit HTML Content

The LMS does not store versions of pages for restoration to earlier revisions. We recommend that you copy and save the original HTML Source Code to Notepad or other text editor so that you can revert to the original if necessary. Then, update HTML content for your portal by using our rich text editor, or by editing the source code directly.
 
  1. From the left navigation menu, select Site Management > Edit HTML Content.
  2. On the Edit HTML Content page, from the HTML Content File drop-down list, select the content file you wish to edit. Commonly modified files are:
    • home_page: the area under the Welcome section on the Classic home page or the default content for What's New from the Navigation page.
    • custom_left_nav: the set of links under the Quick Links menu in the left navigation pane of the Classic home; you can customize this to contain links to external sites or to custom HTML pages you add to the LMS using the Edit HTML Content function. Change the title of the Quick Links menu by editing the HTML <title> tag under Source. Latitude pre-populates this section with several links, including access to the Latitude Navigator training portal and the ability to request an LMS Upgrade. Removing these links via the HTML editor will prevent this from happening.
    • login_page: the area to the left side of the page on which users enter their credentials to log in to the LMS. This is a great place to provide contact instructions and information if the user is having problems using the LMS.
    • register_page: the top section of user Self Registration page. You must contact Latitude ClientCare to have User Self-registration enabled before you will actually get access to the page.
  3. After making a selection, all current content displays in the Content area as rich text. Edit the information using the formatting buttons in the editor. If you know HTML and want to edit the code directly, click Source. The screen below shows these two editing options.
     

     
  4. Click Submit to save changes.

You can also add new HTML pages by clicking Add under the HTML Content File field. You can then link to these new pages from within other HTML content, including adding them as links in the Quick Links menu.

NOTES:

  • To insert images in HTML pages, see the Edit Images section below for more information. You will need to upload images before they can be referenced in HTML.
  • To update the an HTML page to use course or accreditation slide-ins when clicking Course or Accreditation links, refer to this step-by-step PDF document.
     

Edit Stylesheets

You can customize the overall look and feel of your LMS by editing or adding Cascading Style Sheet files (*.css files). Best practice is to copy and save the original Stylesheet code to Notepad or other text editor so that you can revert to the original if necessary.
 
  1. From the left navigation menu, select Site Management > Edit Stylesheets.
  2. On the Edit Stylesheets page, use the Stylesheet File drop-down list to select the stylesheet you wish to edit. Most of the commonly customized settings are found in the default stylesheet file. Simply edit color codes and remove the block comment syntax to apply changes.
     

     
  3. Click Submit to save changes.

NOTE: If you do not see the changes you implemented in the stylesheet and you are certain that your syntax is correct, try clearing your browser cache and refreshing the browser. Click HERE for LMS Style Guide.