Custom LMS - Branding, Color, Style

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.

  • Images: Upload images to use in other areas of the LMS, including custom HTML pages and your Header Logo.
  • HTML Content: Some sections of the site allow content customization by updating the existing HTML code. 
  • 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 here: LMS Information and Portal Configuration


Edit Images

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

You can link to these images from your custom HTML content by using links with relative paths or by using browsing and selecting from the Image Library from the Edit HTML page.



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

Best practice is to 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.
    login_page: the area to the left side of the page on which users enter their credentials to log in to the LMS
    register_page
    : the top section of user Self Registration 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.

NOTE: To insert images, see the Edit Images section below for more information.

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.