Atrixware
Free Demo
1.866.696.8709

Branding your Axis LMS Courses

Courses are the primary method of tracking your users' progress within Axis, and because of how much time your users are going to be spending there, it’s important that you’re not limited to just changing a banner; with Axis, you’re able to tailor the entire User Interface.

This is done by giving admins multiple levels of customizability - from system wide changes that affect every course, all the way down to a specific section.
  • Learning Portal - make changes that will affect all of your courses
  • Course - make changes to affect a specific course
  • Course Page - change aspects of a specific page of a course
  • Learning Object Icons - change specific icons of your different modules

And of course, after perfecting one of your courses, it can be duplicated indefinitely - so if there is little deviance in your courses, you’ll only need to make your changes once.



Learning Portal Level

Making changes on the Learning Portal is the best way to make changes to all of your courses. This includes simple changes like banners and background, but can extend to JavaScript and CSS you want on all of your courses. By default, all of your courses will pick up these Learning Portal changes, but you can disable them from your course’s Branding & Design section, and overwriting the changes.


To make changes on the Learning Portal level, you’ll want to head into your Learning Portal’s settings, accessible via the System tab. Once there, open your Site Designer and select Learning Portal Website.

There are a handful of changes that can be made from this page, but this article is only going to go over those which will affect all of your courses - to read more on the Learning Portal designer, check out this article.



Site Settings
    System > Site Design > Learning Portal Website > Settings


The Page Background will carry through to all of your courses. The background can be changed on a course by course basis, but selecting a background for the Learning Portal will change the background for all your courses.

There are many pre-built options which should fit a majority of color schemes, but you can create a custom one by selecting the Custom Tile, and adding a line of CSS to the CSS section.

The Page Banner will be the default banner for all users, and will affect all your courses. The banner is frequently changed on a course by course basis, but while you’re waiting for each course’s graphic, it’s going to use the Learning Portal’s.

By default, the page banner is ~200 pixels tall, by 1024 pixels wide - when uploading your own banner, it’s usually the best practice to keep it below 400 pixels high, and to have its width match that of your page.

The Page Width is extremely useful in optimizing your User Interface for mobile use, and will carry through to all your courses unless overwritten. The default width is 1024 pixels, and will always be centered in the middle of the window - but dragging it to the far right of the spectrum will allow the width to scale to the window, or completely fill it.

Menu Builder

The Menu Builder is a collection of tools that is always accessible to the user. By default, this is built of three menus, allowing the user to change their profile information, access different utilities (such as messaging or forums), and log out of the system. 
The menu build is built by creating container "Top Level Menus" then filling them with "Menu Items." When you're creating a Top Level Menu, you assign it a name, a description, and an icon. 

Once you create a Top Level Menu, you can select it from the left column; you will gain the ability to add items to it via the left column. While creating a menu items, you will be prompted to assign:
  • Item Caption: this is what users will see when the menu items are displayed.
  • Item Description: when a user hovers over this item's caption, this will display
  • Item Function: what makes this so powerful is that, in addition to over a dozen functions (and self populating functions such as Dynamic Course listing), you have the ability to run your own Javascript Code to give you exceptionally versatile power over what your menu items do.
  • Item Icon: much like the Top Level Menu Icon, you can upload custom images to act as icons for any menu items you create.
In additional to these menu items, you can also add breaks and line separation to your Top Level Menu so that your Menu Items are sectioned off from other Menu Items. 


JavaScript and CSS

Both JavaScript and CSS have their own sections, which allow administrators to use snippets of code which can flow through all the way down to their courses. CSS specifically, is very useful, as it is either going to affect the page, or it isn’t; opposed to JavaScript where parameters must be written in to restrict which pages it affects.

Course Settings
    Learning > Online Courses > Manage > Branding and Design
Making changes on the course level is perfect for testing out your designs on a smaller scale before moving them to the Learning Portal. It’s also an effective way to make select courses use a different style than those using the Learning Portal settings.



To make changes to an individual course’s visuals, select Online Courses from your Learning tab, then select which course to work with. From the course’s dashboard, look for the Branding & Design icon.

Branding and Design

The Course Banner is what will appear at the top of every page of this course. If a banner is not selected, the course will use your Learning Portal banner. When uploading your own banner, it’s usually the best practice to keep it below 400 pixels high, and to have its width match that of your page.


The Course Thumbnail is how this course will be represented on both the admin and user-side. This icon is used in many course listing widgets on the user-side, and several areas on the admin side, such as the Manage Courses listing. If a thumbnail is not selected, this will use the default course icon; if you’re planning on uploading your own icon, it is recommended to be a square image - 128px high by 128px wide for best quality.

By default, your courses will use your Learning Portal background. There are several dozen to choose from, but you can create a custom one by selecting the Custom Tile, and adding a line of CSS to the CSS section.

The Course Navigation allows the admin to choose where the navigation is placed in the course: left, top, right, or hidden. This will default to the left, but depending on your clients, and the number of pages in the course, placing it on the top, or removing it entirely may be a good option.

The Course Navigation Style allows you to choose from a handful of color schemes for your Navigation Bar; or, if you’d like to style it yourself, select Custom from the dropdown, and add CSS to the CSS section below.

CSS

There is a lot of different CSS you can use in your courses - below are some of the most commonly used examples. If you’re not familiar with CSS, it is highly recommended that you not stray from these examples, save for the bolded areas; these are hexadecimal values, which can be replaced with other 6-digit values.

While reading about CSS...
  • Anywhere you see a pound sign (#) followed by 3 or 6 digits is a color; you can find hex codes for your company's colors here
  • Anything written in between /* */ are comments that don't need to be included, but are useful if you're not familiar with CSS
To apply this CSS to all of your courses, add this to your Learning Portal CSS section.

Module Statuses
    .status_complete, .status_submitted {
    background-color:#c4d879; /* Change the color of the 'Completion' Module Statuses */
    }

    .status_paused {
    background-color:#f1d289; /* change the color of the 'Paused' Module Status */
    }

    .status_complete, .status_submitted, .status_offline_submitted, .status_started, .status_paused, .status_autosave, .status_other {
    display: none !important; /* hide all your module statuses */
    }
Buttons
    .pt_button, .pt_button_inactive {

    /* Increase the size of the Start button */

    width: 130px !important;

    height: 46px !important;

    /* Make the text larger and easier to read for mobile users. */

    font-size: 37px !important;

    text-shadow: 1px 1px 0 #b0c26d, 2px 2px 0 #b0c26d, 3px 3px 0 #b0c26d, 4px 4px 0 #b0c26d, 5px 5px 0 #b0c26d;

    color: #f2f1f0 !important;

    font-weight:bolder;

    /* Change the background color to a light green */

    background: #c4d879 !important;

    /* Remove the button borders */

    border: none !important;

    }


    .content_item table tbody tr .modlist_td:nth-of-type(3){

    /* Further increase the visibility of the Start / Resume buttons button */

    background-color: #c4d879;

    cursor: pointer;

    border-top: 1px solid #ffffff;

    }


    .modlist_line1 {

    /* Increase the Readability of Module titles on small screens */

    font-weight: bolder;

    font-size: 28px;

    letter-spacing: 1px;

    }

Navigation

    .nav_flat_custom {

    background-color:#5d459b; /* change the color of the navigation block to purple */

    }


    #course_navigation li a{

    color:#ffffff; /* change the color of the text that appears on your nav tabs to white */

    }


    #course_navigation li a:hover { /* what appears when user hovers over your tabs? */

    color:#000000; /*change the text color to black*/

    background-color:#ffffff; /* change the background of the tab to white */

    text-decoration:underline; /* underline the tab name for emphasis */

    }

Page Settings

Besides working on a course as a whole, you are also able to apply page-specific JavaScript and CSS. To access this, go to your Page Manager from your course’s dashboard, then edit a page’s settings.

Learning Object Icons

Whenever you add a learning object to one of your Axis courses, that learning object is given a default icon to help both the user and the admins distinguish what type of content it is. By using the "Change Learning Object Icon” button, the admin is able to use one of hundreds of pre-populated icons.



If you’d like to use your own icons, and logos, it’s a very simple procedure.
    Before uploading any icons you intend to use for learning objects, keep in mind that the pre-populated icons are 128 x 128 pixel square PNG images. You’ll want to do your best to mimic these conditions to prevent your icons from appearing blurry or stretched.
To upload your own learning object icons:
    System > Files > File Manager


Select the /_images/ folder from the leftmost menu, then open /item_icons folder select the upload button, and select your icon from its home on your computer. After you’ve uploaded your image, your icon should now be selectable when you go to change your learning object icons.
The features discussed in this article may or may not be available on your LMS system.
Comments
There are no comments for this article. Be the first to post a comment.
Related Articles RSS Feed
Learning Cheatsheet - External Video Hosts
Viewed 359 times since Wed, May 18, 2016
Printable Certificates in Axis LMS
Viewed 3616 times since Wed, Jul 17, 2013
Managing a User’s Data in Axis LMS
Viewed 171 times since Thu, Dec 8, 2016
Learning Cheatsheet - Changing Learning Object Icons
Viewed 320 times since Wed, May 18, 2016
API Cheatsheet - Automating Enrollments with my Cart, CRM, HR or Other System
Viewed 1464 times since Sat, Feb 16, 2013
Axis LMS SlidePoint Presentations
Viewed 210 times since Thu, Sep 15, 2016
Axis LMS Website Designer
Viewed 2246 times since Fri, May 10, 2013
Axis LMS Course Pages
Viewed 204 times since Wed, Sep 21, 2016
Axis LMS Content Accessibility
Viewed 1431 times since Tue, Feb 12, 2013
508 Compatibility in Axis LMS
Viewed 1337 times since Wed, Apr 3, 2013