Help Articles for Customization
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
PUBLIC Document Version: 2022-02-04 Help Articles for Customization
CONTENTS
HOW DO THE CSS AND HTML CUSTOMIZATIONS WORK? ............................................................................. 3
How does it work? ....................................................................................................................................... 3
Custom HTML Header & Footer Fragments .............................................................................................. 3
Static template fields ................................................................................................................................... 3
Custom CSS Styling .................................................................................................................................... 3
CHANGING THE SIZE OF THE "PASSMARK" IN ASSESSMENTS ................................................................... 5
ADDING A DIFFERENT LOGO TO THE LOGIN SCREEN ................................................................................... 6
RENAMING MENU ITEMS...................................................................................................................................... 7
SAMPLE HTML BANNER CODE ........................................................................................................................... 8
Clickable Scrolling Banner ......................................................................................................................... 8
Scrolling Marquee Banner / Moving Text .................................................................................................. 9
Image with Text and Text Links ................................................................................................................ 10
Static Banner with Link ............................................................................................................................. 11
SAMPLE HTML HEADER CODE ......................................................................................................................... 12
Custom HTML Header & Footer Fragments ............................................................................................ 12
Sample Code #1 ......................................................................................................................................... 13
Sample Code #2 ......................................................................................................................................... 14
Sample Code #3 ......................................................................................................................................... 14
BRANDS ............................................................................................................................................................... 15
What is a Brand? ........................................................................................................................................ 15
What is the difference between Teams and Brands? ............................................................................ 15
How do I create and edit a Brand? ........................................................................................................... 15
How do I add users to a Brand? ............................................................................................................... 17
How can I See the Users that belong to a Brand? .................................................................................. 18
How do Brands Work with Language? .................................................................................................... 18
DISABLING FEEDBACK BUTTON ON MODULES ............................................................................................ 19
HOW DO I UPLOAD MY LOGO ........................................................................................................................... 20
CHANGE FAVICON AND IPAD AND IPHONE ICON .......................................................................................... 21
HOW TO USE A CUSTOM BACKGROUND IMAGE ........................................................................................... 22
2 PUBLIC Customization
HOW DO THE CSS AND HTML CUSTOMIZATIONS WORK?
By using Litmos learner view customization options you can make your Litmos account look and feel more like
your intranet or website.
Note: If you do not see this feature in your account, please contact suport@litmos.com.
Note: Each Litmos account will have one header, one footer and one CSS. If your account requires additional
branding, contact sales@litmos.com to discuss your options.
How does it work?
There are two customization options available which can be used together or separately.
• HTML fragment
• CSS Styling of top level navigation
Custom HTML Header & Footer Fragments
• An HTML Header fragment can be inserted as the first element on a web page. It will come directly after
the tag and enable the inclusion of navigation, logos and other header related items.
• An HTML Footer fragment can be inserted as the last element on a web page. It will come directly before
the tag and enable the inclusion of navigation, logos and other header related items.
• It’s not possible to upload images with the HTML fragment so any images used must be referenced from
another website or intranet location.
• Styles should be included inline and not in a separate CSS stylesheet.
• Navigation hyperlinks should be absolute references, not relative to the page.
• Client side scripting (e.g. Javascript) is not supported with the HTML.
Static template fields
The following fields can be used within the custom HTML to add user profile information.
• {{Profile.FirstName}}
• {{Profile.LastName}}
• {{Profile.UserName}}
• {{Profile.ImageSrc}}
• {{MyProfileLink}}
• {{SignOutLink}}
• {{SwitchView}}
Custom CSS Styling
The standard top level navigation in Litmos can be styled using a CSS fragment. The exact style names are yet
to be confirmed but will allow the control over color, positioning, size and visibility of items.
Note: It is not recommended to include custom fields, such as a subscribe to newsletter field, as it may interfere
with other fields within Litmos.
Customization PUBLIC 3
We built out a series of courses all about customizing your Litmos
instance. Check out the Instance Customization Pro
Learning Path in Litmos Dojo.
4 PUBLIC Customization
CHANGING THE SIZE OF THE "PASSMARK" IN ASSESSMENTS
By default, at the end of an Assessment, the "Passmark" value will be displayed as larger than other tags:
In order to change this, navigate to Account >> Theme >> Custom CSS.
In this box enter the following code:
#passmarkText {
font-size: inherit !important;
}
Customization PUBLIC 5
ADDING A DIFFERENT LOGO TO THE LOGIN SCREEN
Follow these steps to use a different logo on the Login page than the one uploaded into Litmos.
• The Logo file will need to be hosted on the internet, outside of Litmos through an image hosting service,
like https://imgbb.com/ for example. This will allow you to have a URL for your image.
• Go to Account settings >> Theme, and uncheck the option "Show this logo on the login screen".
Click Save
• Go to Account settings >> Messages and Settings and type the following code into the "Login" field
(note, you can alter the width and height as required):
Here is an example of what the Login page will look like once you save these changes:
You will notice that above the logo, the message "Welcome to CompanyName" will be visible.
To Remove this, go to Account Settings >> Themes and enter the following code in the Custom CSS box:
body > div.login-zone.col-md-6.col-md-offset-3 > div > div > div.login-welcome.col-md-6 >
div.intro,
body > div.login-zone.col-md-6.col-md-offset-3 > div > div > div.login-welcome.col-md-6 >
h1 {display: none;}
6 PUBLIC Customization
RENAMING MENU ITEMS
You can rename menu items. For instance, instead of Achievements, you can change it to Learning History or
Transcripts.
To change Achievements tab to desired text, you can use JavaScript. As an example, the following JavaScript
can be pasted under Account >> Theme >> JavaScript.
Please ensure Javascript is enabled.
If you do not see the option to use custom Javascript in your theme, you will need to ask us, or your account
manager to turn this on for you, for which there may be an additional charge depending on your account.
Vertical Navigation:
$(document).ready(function() {
$("#courserecentach > span").text('History');
});
$(document).ready(function() {
$("#navtip_achievements > span").text('History');
});
$(document).ready(function() {
$("#achievementsWrapper > h2").text('History');
});
$(document).ready(function() {
$("#learner-dashboard-sidebar > h2").text('History');
});
Horizontal View:
$(document).ready(function() {
$("#nav_sessions").text("Live Events and Webinars");
});
Customization PUBLIC 7
SAMPLE HTML BANNER CODE
This code will be applied in Accounts > Layout > Banner HTML. Also, be sure to check the "HTML banner"
checkbox.
If you are not familiar with HTML but would like to use the HTML banner, we recommend using a WYSIWYG
tool. This type of tool allows you to design HTML code visually and grab the code. We recommend using
http://bestonlinehtmleditor.com/, a free online tool that does just this. This tool allows you to edit one of the
Sample codes below or create a new one from scratch.
Clickable Scrolling Banner
HTML Banner Code (note the example below uses the same image src for each slide, after copying / pasting
you need to change the image URLs accordingly)
❮
❯
HTML Footer Code
var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) {
showDivs(slideIndex += n); } function showDivs(n) { var i; var x =
document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1)
{slideIndex = x.length}for
(i = 0; i < x.length; i++) {x[i].style.display = "none";}
x[slideIndex-1].style.display = "block"; }
8 PUBLIC Customization
CSS Code
.w3-content{position:relative;margin-top:0em;}.w3-btn,.w3-
button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-
align:middle;overflow:hidden;text-decoration:none;color:inherit;background-
color:inherit;text-align:center;cursor:pointer;white-space:nowrap}.w3-btn,.w3-button{-
webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-
select:none;-ms-user-select:none;user-select:none} .w3-disabled,.w3-btn:disabled,.w3-
button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-
events:none}.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click
.w3-button{width:100%;text-align:left;padding:8px 16px}.w3-
button:hover{color:#000!important;background-color:#ccc!important}.w3-content button
{position: absolute;top: 32%;}.w3-display-right {right:0}.w3-display-left {left:0}
Scrolling Marquee Banner / Moving Text
Latest news! Latest news! Latest news! Latest news!
Customization PUBLIC 9
Image with Text and Text Links WELCOME! Click below to navigate to: Course Library Achievements $nbsp; 10 PUBLIC Customization
Static Banner with Link Hello Admodum deserunt intellegam in duo, novum nonumy populo est at, qui an reque ignota constituto. Utinam aperiri equidem te vis. Cu ius velit populo impetus. Et qui ullum nusquam contentiones CLICK Customization PUBLIC 11
SAMPLE HTML HEADER CODE
Note: This feature is only available for certain plans. Please contact sales@litmos.com for more information.
Custom HTML Header & Footer Fragments
• An HTML Header fragment can be inserted as the first element on a web page. It will come directly after
the tag and enable the inclusion of navigation, logos and other header related items.
• An HTML Footer fragment can be inserted as the last element on a web page. It will come directly before
the tag and enable the inclusion of navigation, logos and other header related items.
• It’s not possible to upload images with the HTML fragment so any images used must be referenced from
another website or intranet location.
• Styles should be included inline and not in a separate CSS stylesheet.
• Navigation hyperlinks should be absolute references, not relative to the page.
• Client side scripting (e.g. Javascript) is not supported with the HTML.
Static template fields:
• {{Profile.FirstName}}
• {{Profile.LastName}}
• {{Profile.UserName}}
• {{Profile.ImageSrc}}
• {{MyProfileLink}}
• {{SignOutLink}}
• {{SwitchView}}
12 PUBLIC CustomizationSample Code #1
The following code is for the header below. This code is designed to reflect the litmos.com website.
Note: Although it is not required to be an HTML expert, it is recommended to have some HTML experience
before creating a header.
Welcome to elearning,
{{Profile.FirstName}} {{Profile.LastName}}Sample Code #2
The following code is for the header below This is the basic code for removing the Profile & Setting links.
Sign-Out
Sample Code #3
The following code is for the header below. This code includes the user image, user name, and an optional "Edit
Profile" link.
{{SwitchView}} | Sign Out
Welcome, {{Profile.FirstName}} {{Profile.LastName}}
Your username is: {{Profile.UserName}}
Edit Profile
14 PUBLIC CustomizationBRANDS
Create Brands and add Learners to those brands to control the UI theme for various groups of users. Each user
can be associated to one Brand. The Brand can be updated in the UI on the user profile, the bulk import, the
team bulk actions, Litmos Assign Engine and of course by use of the appropriate API requests.
What is a Brand?
A Brand is a way to control what a Learner can see based on what Brand they are in. Learners set to a Brand
will have the follow items designated for that brand:
Email Templates (see the “Customizable Email Templates & Mobile Text (SMS) Notifications” section for the
Account Settings help articles for more information)
Logo, Learner HomePage HTML Banner, Learner and Admin Pages Color Scheme, Course Player Color
Scheme, Custom header, Custom footer, Custom CSS, Custom JavaScript
What is the difference between Teams and Brands?
Although the basic concept to categorize Users with Brands and Teams are very similar, the purpose of these
two features is very different.
Brands Teams
Relationship to Users One to one One to Many
Does not control what Assigns Courses and Learning
Assign Courses and Courses and Learning Paths directly to users and
Learning Paths Paths a Learner can makes them available through
see the Course Library
A user's Brand Teams have no control over
Controls look of the
determines what UI what platform looks like to a
Platform
theme they will see. user
A user's Brand
Teams have no control over
Control Emails Sent determines what emails
what emails a user receives
they will receive
Team Leaders and Team
There are no Leaders Admins have the ability to run
Access Roles and Leaders or Access Roles reports and do basic
controlled by Brands Administrative actions for their
Team
How do I create and edit a Brand?
All accounts will contain a Default Brand that cannot be edited or deleted. This Brand will inherit all properties
set in the Account Theme and Account Email settings for the organization. The Default Brand can only be
viewed from the Brands feature page.
Customization PUBLIC 15In order to edit this Default Brand , an Account Owner would need to edit the Account Theme and Account Email
settings.
To create a new Brand:
1. As an Account Owner, navigate to Account Settings > Litmos Features > Brands
2. Select "Add Brand"
3. Give the Brand a name. By default, the brand will include all attributes from the Default Brand.
4. Select the Logo and emails that people in that Brand will see.
5. Click "Save"
16 PUBLIC CustomizationOnce the new Brand has been saved, the Brand theme settings can be edited and people can be assigned to
the Brand.
If you need to duplicate all of the attributes from one custom Brand to another, use the "Copy" option next to the
Brand to be copied.
Note: Brands are not available for all accounts. Please contact accountmanager@litmos.com for more
information.
How do I add users to a Brand?
• Individually - Admins can view and change a Brand for a user from within a user's profile. Change a
user's Brand by Selecting "Edit {first name}" from the user's profile, change the Brand, click "Save".
• By Team - All users in a Team can have a one time push from within the Team. This can be
accomplished by clicking the "Push all users under this team into a Brand", select the Brand, and click
"Submit".
Note: Assigning users to a Brand from a Team is a one time push and will not affect users who are later
added to the Team.
Note: All users belonging to the team and related sub-teams will be added into the Brand.
• Bulk Import - The Bulk Import code can be retrieved from Accounts > Brands and then added to the bulk
import CSV in the People tab. This would be similar to adding a assigning a user to a Team or Course
through the bulk import. The bulk import feature can also be used to update the Brand of existing users.
View the “Import People in Bulk” section for the People help articles for more.
• Litmos Assign Engine - The Litmos Assign engine lets Account Owners create rules which can
automatically add users to Brands.
• Brands Feature - As an Account Owner, users can be added to a Brand by navigating to Accounts >
Brands > select edit Brand > add people to the Brand .
Note: Brands have a one to one relationship. If a user is placed into a Brand they will be removed from the
Brand they were previously in.
Customization PUBLIC 17How can I See the Users that belong to a Brand?
• User Profile - Users will have the Brand they belong to at the bottom of the right hand column in their
User Profile.
• Brands Feature - As an Account Owner, all users in a Brand can be viewed by navigating to Accounts >
Brands. Select the "View Users" button to see the list of all users assigned to that Brand.
• Reporting - A number of reports allow a Brand column to be added or to filter by a Brand:
Quick Reports
− Teams Quick Reports > Users
− People
Reporting Engine (Column)
− Course Results Object
− People Object
− Assessment Results Object
Reporting Engine (Filter)
− Course Results Object
− People Object
− Assessment Results Object
How do Brands Work with Language?
If a User has a language that is not English, it is recommended that the email templates used for that Brand
include edits to the Languages for that template as well. If no edits have been made to the email template for
that language, they will receive the English template for that Brand.
It is also feasible to use the Brand feature for localization purposes. Customize the email templates and the UI
theme for each Brand in order to translate the UI theme elements (header, footer, html, etc) to a specific
language and add people into those brands who have matching languages preferences as set on their user
profiles. Litmos Assign can be used to help automate this behavior.
18 PUBLIC CustomizationDISABLING FEEDBACK BUTTON ON MODULES To disable the Feedback button for the modules, make sure you do not have anyone added to the notifications list in the course settings. Please refer to the image. • Navigate to Courses Tab • Select the desired course • Click on Settings subtab • Click on 'x' next to all the names in the notifications list Customization PUBLIC 19
HOW DO I UPLOAD MY LOGO
When you sign up for a Litmos trial account you can select a logo to upload or you can skip the logo and upload
it later on.
To upload or change your logo in your Litmos account, go to the Account section and select the Theme tab.
The recommended size for your logo is a maximum of:
90px high x 300px wide
If the logo you upload is greater than the recommended size it will be automatically scaled down.
We covered this in our Account: Theme course, check
it out in Litmos Dojo!
20 PUBLIC CustomizationCHANGE FAVICON AND IPAD AND IPHONE ICON
A Favicon is the icon that appears in a web browser’s address bar, tabs and bookmark menu. The icon must be
a .ico file type and be under 200kb. If you need to convert an image file into a .ico file, you can use Coolutils
which is a website that easily converts a file type of an image to a .ico file for free.
The icon from the iPad or iPhone will appear when using the mobile app. The icon must be a .png file type and
be under 200kb.
To change either of these icons:
1. Navigate to Accounts
2. Select the Theme sub tab
3. Under theme, select change next to either Favicon or iPad/ iPhone icon
4. Click Choose File
5. Browse to the file and click Open
6. Click Save at the bottom of the screen
Note: To see the Favicon take effect you may need to clear your cache. If you are still having problems check
that your unique url is all lowercase in the Profile sub tab within Accounts.
We covered this in our Account: Theme course, check
it out in Litmos Dojo!
Customization PUBLIC 21HOW TO USE A CUSTOM BACKGROUND IMAGE
If you have advanced customizations enabled on your Litmos account you can take control of the CSS
stylesheet by entering your own styles in the “Account>Theme” section of your account.
To use a custom background the css required would look like the following:
body{
background-image: url(http://media.litmos.com/02723_vanishingbridge_2560x1440.jpg)
!important;
}
.admin-body{
background: transparent;
}
#page-body{
background: transparent;
background-color: transparent !important;
}
Note: Litmos does not host your background image so this example assumes you have linked to an image
hosted elsewhere.
22 PUBLIC CustomizationIMPORTANT DISCLAIMERS AND LEGAL INFORMATION
Hyperlinks
Some links are classified by an icon and/or a mouseover text. These links provide additional information. About
the icons:
• Links with the icon : You are entering a Web site that is not hosted by SAP. By using such links, you
agree (unless expressly stated otherwise in your agreements with SAP) to this:
− The content of the linked-to site is not SAP documentation. You may not infer any product claims
against SAP based on this information.
− SAP does not agree or disagree with the content on the linked-to site, nor does SAP warrant the
availability and correctness. SAP shall not be liable for any damages caused by the use of such
content unless damages have been caused by SAP's gross negligence or willful misconduct.
• Links with the icon : You are leaving the documentation for that particular SAP product or service and
are entering a SAP-hosted Web site. By using such links, you agree that (unless expressly stated
otherwise in your agreements with SAP) you may not infer any product claims against SAP based on
this information.
Videos Hosted on External Platforms
Some videos may point to third-party video hosting platforms. SAP cannot guarantee the future availability of
videos stored on these platforms. Furthermore, any advertisements or other content hosted on these platforms
(for example, suggested videos or by navigating to other videos hosted on the same site), are not within the
control or responsibility of SAP.
Beta and Other Experimental Features
Experimental features are not part of the officially delivered scope that SAP guarantees for future releases. This
means that experimental features may be changed by SAP at any time for any reason without notice.
Experimental features are not for productive use. You may not demonstrate, test, examine, evaluate or
otherwise use the experimental features in a live operating environment or with data that has not been sufficiently
backed up.
The purpose of experimental features is to get feedback early on, allowing customers and partners to influence
the future product accordingly. By providing your feedback (e.g. in the SAP Community), you accept that
intellectual property rights of the contributions or derivative works shall remain the exclusive property of SAP.
Example Code
Any software coding and/or code snippets are examples. They are not for productive use. The example code is
only intended to better explain and visualize the syntax and phrasing rules. SAP does not warrant the
correctness and completeness of the example code. SAP shall not be liable for errors or damages caused by
the use of example code unless damages have been caused by SAP's gross negligence or willful
misconduct.
Bias-Free Language
SAP supports a culture of diversity and inclusion. Whenever possible, we use unbiased language in our
documentation to refer to people of all cultures, ethnicities, genders, and abilities.
Customization PUBLIC 23COPYRIGHT / LEGAL NOTICE www.litmos.com © 2021 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies. See www.sap.com/trademark for additional trademark information and notices.
You can also read
