ESSENTIAL LMS BRANDING SPECIFICATIONS Insert Client Name Creation Date: June 23, 2011 Last Updated: July 11, 2017 Version: 16.5 Page 1
Contents Branding Elements... 3 Theme Management... 3 Header Images... 21 Certificates of Completion... 21 Notification Templates... 22 Curriculum Icons... 23 Search Category Icons... 26 Content Areas... 27 Page 2
Branding Elements This document includes branding elements which can be controlled by your team within the LMS. None of the elements listed below are required to be changed but can provide great flexibility in tailoring the look and feel of the LMS to fit within your corporate, branding style. Theme Management The Theme Management feature is a powerful configuration option which will allow your organization to create multiple branded user experiences. Clients can create one or more themes and then assign the theme at the user level to drive the look of the application (header images, color of the site, left hand menu configuration, etc.). The Theme Management page is divided into four sections. The header section of the page always displays at the top of the page and contains the following: Theme Name This is the unique name for the theme. Status This displays the current status for the theme. Only active themes will display on the Profile and User Management pages for selection. Manager This displays the name of the admin user defined as the manager of the theme. If a user has manage access to Theme Management, they will only be able to view and edit themes where they are listed as the manager. Theme Login URL This is a display only area and will display the unique login URL for the theme. On the top of the page below the header are links to the tab sections of the page. When a new theme is created, the default system theme which is defined on the Site Configuration page is copied to serve as the baseline for the new theme. The user is then allowed to edit the sections which require editing to create a new, distinct branding experience. Under the Look tab, you will have the ability to change the theme selected. You will also have the ability to change the header image for both the login page and the inside of the application. You have the ability to change the icon color in the menu or remove icons completely and leave just the text description. The final option under the look section controls the color of the incomplete section of the pie charts on the Completion Metrics page (just off the Dashboard page). Under the Menu tab, you have the ability to change the left hand menu. You can change menu names for those menus you enable. You can disable menu options (hiding them from end-users). You can also change the sort order of the menu options using the sort number column. The menu will display in order of the lowest to the highest sort number. Under the System tab, you will have the ability to modify the other configuration areas identified in the design survey. Configurations such as enabling self-registration, enabling advanced manager approval, minimum user name length, minimum password length, password reset frequency, etc. Under the Site Pages tab, you will have the ability to modify the dynamic content areas which are available on each end user facing page in the application. Each end-user facing page in the application has a content managed area for you to add branding, images, media, resources and instructions to your end users. Making the site pages controllable at the theme level allows different dynamic content to be displayed to the end user based on their theme. Page 3
Under the Learning Console tab, you will have the ability to configure the default display of tiles on the end user Learning Console page. This section also provides the ability to remove tiles from being available to users and to mark tiles as required and thus cannot be hidden by the end user. Under the Ecommerce tab, you will have the ability to select the payment gateway and enter account credentials you want used for any purchases by users with this theme. This feature is only available to clients who have the ecommerce module enabled. This tab is secured by a separate privilege in role management. Users will have to have View or View, Edit access to Ecommerce Gateway Parameters to see this tab. Page 4
On the Theme Management - Look tab, settings can be configured which modify how the LMS displays to users with this theme. The settings available are listed below the screenshot. When the Theme Management page is first opened, the system defaults to the Look Tab. From this tab, you can modify the core look of the application. The following is a description of each configuration option available on the Look tab. Primary Color This is the most used color in the application. This color at a 100% or at a percentage of the full color is used extensively in the application. In the screenshot below, this color is marked with the #2. Some of the most visible areas where the primary color is used include the following: o The background color for the top left menu indicator (Displays the word Menu or Admin depending on if the user is viewing the end-user menu or the administrator menu). o The base color for the transition area located in the top right portion of the page (where the profile picture, name, logout link and secondary menu are located) o The background color for the default button on each page (i.e. Submit). o The font color for none default buttons on each page o The border color for all navigation buttons. o The default curricula icons (percentage of the primary color) o The drop icon on the homepage (X) o The notes icon (pencil) Page 5
o o o o o The Add icon (+ sign) The page navigation buttons for all grids (percentage of the primary) Disabled buttons (40% of the primary color) Grid header areas (percentage of the primary color) Alternative rows within grids (percentage of the primary color) Secondary Color This complementary color is used in the following areas. Examples of this are marked with the #3 in the screenshot below. o Success or failure inline messages o Next action links o Selected indicator for tabs o Leaderboard header background color Accent Color This complementary color is used in the following areas. Examples of this are marked with the #4 in the screenshot below. o The background color for the LMS if a background image is not loaded. o Hover state on navigation buttons o Font used in page headers o Font used in Section headers (i.e. Profile page sections) o Not selected tab font Primary Overlay Font This is the font color that will be used anytime the primary color is the background (i.e. top left menu area, default button on a page, etc.). Examples of this are marked with the #5 in the screenshot below. Menu Background This is the background color of the primary navigation menu, the secondary menu, and the gear drop down menu (used for navigation within admin pages). Examples of this are marked with the #6 in the screenshot below. Menu Font This is the font color used for primary, secondary and gear menus. Examples of this are marked with the #7 in the screenshot below. Menu Icon This is the color of the standard menu icons. Clients have the ability to load their own icons. Any client loaded icon images will have the color of the image that was loaded and not this menu icon color. Examples of this are marked with the #8 in the screenshot below. Header Label Font This is the font color used for the main header area. This controls the font color of the user s name, the logout link, and the secondary menu icon. Examples of this are marked with the #9 in the screenshot below. Page 6
Page 7
Internal Header Image This controls the header image which display on all pages once the user has logged into the application. The header dimensions must be 1,380 px wide by 90 px tall. The header image must be web ready (72 or 96 dpi) and.png or.jpg file type. NOTE The full 1,380 px width will only display when the small menu is selected. When the full menu is displayed the right 180px of the image will be truncated because of the additional space the full menu consumes. External Header Image This controls the header image which displays outside the application (Login page, Self-registration, help logging in pages). If you use the main site URL and not the Theme specific Login URL, the header image that displays is based on the default theme for the site. The header dimensions must be 1,440 px wide by 90 px tall. The header image must be web ready (72 or 96 dpi) and.png or.jpg file type. The external header width is never truncated like the internal header. Background Image This image will display on large screen resolutions which are greater than 1,440 px in width as the background image for the LMS. This will typically display on the left and right of the LMS area which the LMS page being centered. This should be a single web ready image (72 dpi and.png or.jpg file type). The image should be between 5kb and 50kb in file size to optimize page loading performance. The image will be stretched based on screen size. In the screenshot below, this area is marked with the #1. Report Header Image This allows for the upload of a report logo which will appear on the top of all reports viewed by users with this theme. The images should be web ready with a resolution of 72 or 96 dpi and.png or.jpg file formats. Favicon File This allows the loading of a favicon.ico file that is specific to this theme. The favicon.ico image will display in different locations depending on the browser being used but is generally located at the top left of the browser tab and often displayed in the left section of the URL address window. The file must be an ico file format and be 16px x 16px in size. Transition This drop down controls the transition setting used in the top right corner of the page. This area overlays the internal header image. This option can set a fading or gradient transition (using the primary color), a solid transition background (primary color), or no background (transparent). o Gradient o 100% o Transparent Page 8
Basic Search Display This drop down has two options. Enabled is the default and turns on the basic search area (search category and search text field) on each page header. Disabled hides the basic search from the page headers. Remember Me Login Label This field allows a client to change the description displayed to the end user on the login page for the Remember Me checkbox. Register Now Login Label This field allows a client to change the description displayed to the end user on the login page for the Register Now link. Help Logging In Login Label This field allows a client to change the description displayed to the end user on the login page for the Help Logging In link. CEU Label Description This field allows a client to change the description for CEU based on the type of CEU their users primarily are concerned with (CLE, CPE, CME, etc.). This controls the label in the transcript, the more details page for training, and the curriculum management pages. Badge Description This field allows a client to change the description displayed to end users for the Badge term. Coupon Description This field allows a client to change the description displayed to end users for the Coupon term. Page 9
The Menu tab of the Theme Management page is the location where settings can be configured which modify how the end user menus display (both primary and secondary). When the Theme Management page is first opened, the system defaults to the Look tab. To access the menu section, select the Menu tab. From the Menu tab, you can modify the primary and secondary menu options displayed to end users. This includes changing the menu name, the tooltip for the menu (what displays when a mouse hovers over the menu), the short description (which displays when the menu is minimized because of small screen format), the sort order of the menu, and whether the menu is visible or not (in both the primary and secondary menus). At the top portion of the page is an area where the menu fonts can be configured. Below the font section is a grid with a row for each menu option. Reset All Icons This link resets any custom icons you have loaded for standard menu options (does not include custom pages or organization/geography specific pages) to the original system provided icons. When this link is selected, a pop-up window will display with a drop down menu that allows the selection of the icon color. Manage Content Page This link will open a page displaying all content pages for this site which have the Display in Left Menu option selected. This is the method to select one or more of those content pages to display for this theme. The page has a list of available pages on the left and a list of selected pages on the right. To move a page from being available to selected, select the arrow pointing to the right. To remove a page from being selected for the theme, select the arrow pointing to the left. Once a content page is added to the theme, it will appear in the menu grid. This allows the position for the menu link to be managed just like all other menu options. Content pages are slightly different than standard menus. The icon that displays cannot be theme specific. If you create a content page and want to use it for multiple themes, the icon that is associated with the menu link will be the same across all of the themes. Page 10
Page 11
Menu Grid The main part of the page is a grid which displays each menu option. The grid displays one row for all standard menu items (enabled or not), along with one row for the geographical page, one row for the organizational page, and one row each for each content page selected for the theme. The reason only one Organizational page row and one Geographical page row exists instead of every geography page and every organizational page is that only one organization and one geography menu will ever display to the end user. The application only displays the page corresponding to the organization/geography they are directly assigned. The grid contains the following columns Icon Image Selecting the icon image will open the Standard Icon window. This displays a catalog of standard icon images provided with the LMS. One of these icons can be selected or you can load a custom icon using the New Icon link described next. New Icon This link will open a browse window which will allow you to upload a different icon for the menu item. Browse to the icon and select upload. The icon should be a small file to ensure appropriate performance in the application. Menu Text This displays the elogic Learning standard menu name. This is display only and can never be changed. This provides a common reference point when clients use the display name to change the menu name that is displayed to end users. This menu text will never be visible other than on this page. Display Label This controls what text is displayed on the menu to the end users. Short Label This displays when the menu is minimized because of either a small screen format or the end-user has manually minimized to increase space on the page. The maximum number of characters allowed for the short label are 7. Tooltip This controls the text displayed to the user when they hover over the menu option. This is important for 508 compliance. Sort Order - To change the menu order, enter a numeric value in the Sort Order column. The menu will display in numeric, ascending order for the values you enter (i.e. 1 to 20). Primary Menu This checkbox controls whether or not the menu option displays to the end user in the primary menu (located on the left side of the page). If the checkbox is selected, then the menu Page 12
item will display otherwise it will not display. Geography and Organizational page rows do not have the Primary Menu or Secondary Menu options available. These options are controlled completely by whether or not a page exists for the user s organization or geography. Similarly since there can be multiple different Organization/Geography pages, the short label is defined on each page instead of at the theme level. Secondary Menu - This checkbox controls whether or not the menu option displays to the end user in the second menu (located on the top right side of the page when the three horizontal line icon is selected). If the checkbox is selected, then the menu item will display otherwise it will not display. Geography and Organizational page rows do not have the Primary Menu or Secondary Menu options available. These options are controlled completely by whether or not a page exists for the user s organization or geography. Similarly since there can be multiple different Organization/Geography pages, the short label is defined on each page instead of at the theme level. Mobile Menu Currently this column is not in use. It will be available in a future release to control the elogic Learning Mobile App. Page 13
The Theme Management System tab allows several user experience configurations to be defined. The settings available are listed below the screenshot. When the Theme Management page is first opened, the system defaults to the first tab, Look. To access the system section, select the System tab on the left side of the page (directly under Menu). There is row in the grid for each system configuration option that is defined in the Theme. The following is a description for each system option: Default Landing Page This drop down contains a list of the end user facing pages which are available in the left menu. Any page can be selected as the default landing page when the user first enters the LMS. This page will display regardless of how the user enters the LMS (normal login, selfregistration page, or single-sign-on). This also controls the destination for the Home button on the ecommerce confirmation page. When the user selects this Home button, they will be routed to the Landing Page selected in this dropdown. Browse Training Column Count This option controls the number of search category columns which display on the browse training page. You can select 1, 2, 3, or 4 columns. Browse Training Image Size (1-400) This option controls the pixel width of the search category image on the browse training page. You can enter a whole number between 1 and 400. Browse Training Font Size - This option controls the font size of the search category label on the browse training page. You can enter any whole number but in general a smaller font size should be selected if you have 3 or 4 columns. Enable External Training for Learner This option controls whether or not the Add External Training link appears to the end user on the End-User view of the transcript. If enabled, end-users will be able to add training to their transcript which was taken outside of the LMS. This option does Page 14
not impact the admin view of the transcript. The external training link will always be present to admin users. Disable Certification Transcript Tab - Clients who are not using the LMS to track end-user certifications will now have the ability to disable the certification tab on the end-user transcript page. This will make the tab invisible to the end-user thus creating a simpler transcript view and avoiding questions about the tab not in use. Enabled Credit Transcript Tab This checkbox when selected will enable the Credits (CEU) tab of the transcript to be displayed. When unchecked, this will make the Credits tab invisible to end users. Regardless of the selection here, the Credit tab will always be visible when access the Admin view of the transcript. Disable Homepage Notification Tab This flag controls whether or not the notification tab is visible to users from the homepage. If checked, it will not be visible. Disable Homepage Featured Tab - This flag controls whether or not the featured tab is visible to users from the homepage. If checked, it will not be visible. Disable Homepage Task List Tab - This flag controls whether or not the task list tab is visible to users with the manager flag checked from the homepage. The task list tab is never visible to a user without the manager flag checked. If this option is selected, the task list will not be visible to managers. Enable Auto Expand of Learning Path This checkbox controls whether or not Learning Paths display on the Homepage by default in the expanded view or by default in the collapsed view. Checking this box, will display the learning path expanded on the Homepage. Enable Advanced Search This enable the advanced search drop down area to be available in the basic search bar. This displays the advanced search parameters when selected. Search Includes Teaser This checkbox is enabled by default. It allows any Basic Search to perform a wildcard search against the curriculum teaser field in addition to the curriculum name. Search Includes Keyword This checkbox is enabled by default. It allows any Basic Search to perform a wildcard search against the curriculum keyword field in addition to the curriculum name. Search Includes Curriculum Number This checkbox is enabled by default. It allows any Basic Search to perform a wildcard search against the curriculum number field in addition to the curriculum name. Page 15
Hide Missed on Transcript This checkbox is disabled by default. It controls whether or not missed registrations (user did not complete training by the due date) will display on the user s transcript. When this is checked, the registration will not display. Enable Certification Entry for Learner This checkbox is disabled by default. It controls whether or not the end user will have the ability to self-report certifications they have earned outside the LMS (external certifications). When the checkbox is selected, the Add Certification link will appear on the end user view of the transcript. The system can either be configured to allow the certification to be automatically added to the end users transcript or it can go through an approval process. The setting for this configuration is found on the Site Configuration System page. Event Details Content Configuration This drop down field controls what content displays at the top of the event details page. The event details page is the page which displays the detailed event information to an end user (date, time, instructor, etc.). This drop down has three options. o Event Specific When this option is selected, only the content entered on the event using the Event Details field will display at the top of the page. This allows different information to display on an event by event basis. This content is entered/updated by selecting the Event Details menu option off the event management page. o Global per Theme When this option is selected, only the global site page content that is entered in the Event Details site page for the user s theme will display for all events. This site page is entered/updated by selecting the Event Details option off the theme management site page tab. o Combined Global and Event When this option is selected, but the global site page content and the event details specific content will display on the event details page. The global content will display first with the event specific content immediately after. Page 16
The Theme Management Site Pages tab provides the ability to update the dynamic content area for each end-user facing site page in the system. This dynamic area appears at the top of the page for the majority of the end-user facing pages in the system. If nothing is entered in the site page, then that section will collapse and not take any space on the page. If something is entered (up to 20,000 html characters), then the dynamic content area will expand to display the information entered (text, tables, videos, images, links, etc.). When a new theme is created, the content area from the default theme is automatically copied to the new theme. From the copy, the user can edit the content areas to be tailored to the specific needs of the users assigned to this theme. The search results grid will display a row for each site page. Site Page Name This column displays the name of the Site Page. This column also serves as the link to open the Content Page Management page in edit mode. Page 17
The Theme Management Learning Console tab provides the ability to the default display for the end user Learning Console page. The page has two sections. The top section contains a row for each tile available. The bottom section allows a company to set the default display order for tiles. Users will be allowed to reposition the tiles but the default indicates the initial display position. Icon The icon image is a hyperlink which will open a pop-up window that allows the user to change the icon image which displays to the end user when they select the Add Tile link on the Learning Console page. This is the image that is associated with the particular tile and provides a visual cue for the user to differentiate the tiles available. The pop window also has a Reset Default button Page 18
which will remove any custom images that your organization has uploaded and return the tile icon to the default icon. Visible When checked, this allows the tile to be available to be selected by the end users. When not selected, the tile cannot be added by the end user to their Learning Console page. Required When checked, this makes the tile required and thus cannot be removed by the end user from the learning console page. Default When checked, a rectangle representation of the tile will appear in the Default Layout of the Learning Console section of this page. This allows the administrative user to set the initial position of the tile. A tile must be visible in order to be selected for the default layout. Display Name This text entry field controls the title name for each tile. This name will display on the top left section of the tile. There is enough room on the tile for up to a 40 character name. Description This text entry field controls the expanded description which displays to the end user when they select the Add Tile link on the Learning Console page. This is the description that is associated with the particular tile and provides the user more information about the purpose of the tiles available. Default Layout of the Learning Console This section allows the administrative user to reposition the default tile layout by using the mouse to drag and drop the position of each small rectangle tile section. Page 19
The Theme Management Ecommerce tab provides the ability to update the ecommerce gateway settings for purchases made by users with this theme. The Gateway Provider drop down field allows for the selection of the Gateway to use (Authorize.Net, PayFlowPro, FirstData, etc). Once the Gateway Provider is selected, a set of fields will dislay which will be dependent on the gateway you are using. First Data requires different fields than Authorize.Net as an example. If your provider requires a validation file to be loaded, this will have to be loaded by elogic. Based on our understanding, FirstData is currently the only payment gateway provider which requires a validation file. If your ecommerce functions are not working properly, please contact elogic Learning support to investigate. Page 20
Header Images The essential LMS allows for two separate header images to be loaded into the application. One will display to the user before logging into the application (external) and the other will display after the authentication (login) process is complete (internal). The Internal Header Image controls the header image which display on all pages once the user has logged into the application. The header dimensions must be 1,380 px wide by 90 px tall. The header image must be web ready (72 or 96 dpi) and.png or.jpg file type. NOTE The full 1,380 px width will only display when the small menu is selected. When the full menu is displayed the right 180px of the image will be truncated because of the additional space the full menu consumes. The External Header Image controls the header image which displays outside the application (Login page, Self-registration, help logging in pages). If you use the main site URL and not the Theme specific Login URL, the header image that displays is based on the default theme for the site. The header dimensions must be 1,440 px wide by 90 px tall. The header image must be web ready (72 or 96 dpi) and.png or.jpg file type. The external header width is never truncated like the internal header. Please refer to the Client Header examples document for ideas on header images similar to the one displayed below. Certificates of Completion With the Certificate Template Management feature, clients have the ability to create an unlimited number of custom Certificates of Completion. Once a template is created, it is available to be selected on Curriculum Management pages (courses, training sessions, learning paths, library items, compliance paths, and checklists). This determines which, if any, Certificate of Completion will display to the user in their transcript when they have successfully completed that particular curriculum. The certificate of completion templates will also be able to be used on Certification Types. This controls which certificate will display to the user in their transcript for any certifications they have been awarded. There are two resolution options for the certificate of completion. The default option (standard resolution) is optimized for viewing within the browser. It provides the best performance for the user to open and view. If you require the certificate of completion generated to be high quality for printing, there is also a high resolution option. This option will take longer to open for the user, but the quality of the PDF generated is higher and will print with more clarity. Certificate templates are rendered in a pop-up webpage in the LMS. They are composed of 4 parts (a background image, invisible table, tokens, and a PDF generation button). The first step in building a Certificate Template in the LMS is to create an 8 ½ x 11 inch background image for the Certificate. The size of this image will depend on whether you are using the high quality option or not. 830px by 580 px are the default dimensions for standard image quality (72 DPI). 3330px by 2550px are the dimensions for high quality (300 DPI). You can do this in any graphics tool which supports output of web ready images (jpg, png, or bmp file formats). This image should include signatures, logos, graphics, etc. Once the image has been uploaded to the certificate template, the next step is to overlay labels and code tokens using the invisible table to position the token. The code tokens are the report logic for the certificate. This will dynamically query the database and replace the token with the correct data for the transcript record the user is accessing. Page 21
Commonly used tokens for certificates will include (Curriculum Name, User First Name, User Last Name, Completion Date, Score, etc.). The image below is an example of a finished certificate of completion. Notification Templates The essential LMS has the ability to automatically send email notifications to end users as they progress through the various types of training available through the system. These notifications are driven by templates. The templates are similar to a mail merge feature where text is combined with tokens and the tokens are dynamically replaced with information that is specific to the user and the training that triggered the notification. For example, the token [UserFirstName] is automatically replaced with the user s first name and the token [CurriculumName] is automatically replaced with the name of the training the user is taking. Clients have the ability to create an unlimited number of notification templates and these templates can include images which can be viewed by any common email client that supports HTML/RTF formats (Outlook, Gmail, Yahoo, etc.). Clients have included company logos, email signatures (image of an actual signature) and other imagery in the notification templates. Page 22
Curriculum Icons The essential LMS has the ability to load icon images with each training record loaded you re your training catalog. These icon images will display to the end user in several locations. They display on the search results page (both internal and external for ecommerce browsing), registrations tab of the home page, featured sections in the application, pre-requisite page, and checkout page for displaying related items of interest. If an image is not loaded for a particular curriculum record, the system will create a default icon using the first character of the curriculum name. The curriculum icon image must be 50px X 50px in size in a png file format that is less than 100KB in file size for page loading performance. Registrations Tab of Homepage Page 23
Search Results Page 24
Shopping Cart Confirmation Page Related Items Page 25
Search Category Icons With the essential LMS, clients have the ability to create an unlimited number of search categories. These categories are then assigned to training items which in turn allow the end users to search for training by the search category. The search categories are the most visible to the end user on the Browse Training page. This page displays all search categories available to the user (based on curriculum assignment rules). The search categories are displayed in columns in the sort order defined by the client. The number of columns displayed is a configurable setting. Each search category can have an icon image associated with it. When this is done, the image displays to the end user on the Browse Training page. If an icon is not associated, then a white space is displayed next to the Search Category term. The image below is an example of the Browse Training page. This client setup the page to have 3 columns. The image size can be adjusted by the application and should be smaller the more columns that are selected to display on the Browse Training page. A 60px X 60px image (png file type) is typically a good size for most client setups. Page 26
Content Areas The final component of branding in the essential LMS is perhaps the most flexible area in the application. On each end user facing page in the LMS there is a dynamic content area. This area is controlled with an easy to use web editor and allows clients to insert up to 20,000 characters of HTML on each standard end user facing page. The area will shrink to nothing if nothing is entered or will grow as large as needed to display the HTML entered. Since it is controlled with a web editor, clients can enter any combination images, text, scrolling text, tables, videos, links, and files desired. All content areas inside the application (visible to the users after login) are displayed at 1,200px in width when the standard menu size is displayed. If the user manually reduces the menu to the short menu width, then 1,380 px in width is available. Since the application is designed to be responsive and auto size based on the end-user s screen size, we highly recommend any images or content loaded in the content areas to be set to 100% for sizing instead of fixed widths. This will allow the content areas to be responsive as well and adjust to the end-user s screen size. The content areas outside of the application (before login) can be up to 1440px in width (same size as the header image). The external content areas should be set to 100% as well instead of fixed sizes to maintain responsiveness. The most popular pages for inserting imagery are listed below. For client examples, please review the essential LMS v10 Branding Examples document. Login Page Homepage Transcript Help Support Profile Browse Training Below End User (Left) Menu Page 27