When integrating Learnosity’s whitelabel APIs into your products, most UI-based APIs can be customized to match the look and feel of your application. Request object properties can influence appearance and functionality, and public methods can be used after initialization to add or control behavior.
Some customizations, however–such as matching colors and fonts to those used in your design or adding specific formatting options to the authoring experience–may be too unique to already be part of the out-of-the-box Learnosity experience.
These customizations are often handled by writing your own Cascading Style Sheet (CSS) styles that override Learnosity styles. For some page-specific or application-specific requirements, it’s common to add a CSS document to only those pages that need to be modified.
However, it’s also possible to create a single CSS document that will be delivered with every Learnosity assessment (and related APIs), in a given consumer. For example, if a desired style override is intended for every assessment used in a production consumer, it may be easier to centralize that style with Learnosity than to add it separately to many pages in your application.
NOTE: Your consumer is not only where your learner submissions are stored, but also where your credentials and license features are validated. You will typically have segregated consumers for production and development to prevent any testing from adversely affecting your live content.
It’s important to remember that one CSS file is used for this purpose. While it’s easy to add many different styles to this single document, and only use those that you need, when you need them, it’s not possible to segregate those styles into separate documents. Put another way, if you currently use stylesheet XYZ in one part of your application, and stylesheet ABC in another, they will need to be combined if their uses are required under a single consumer. Attention may need to be given to potentially clashing selector names to make sure the correct style is used at any given time.
Similarly, the use of a CSS document is confined to the consumer to which it is added. This means, for example, if you want your production styles to also be available to your developer consumer, you’ll need to add the CSS file to each consumer.
Creating the Stylesheet
Covering how CSS works is outside the scope of this document, so we’ll assume you already have a working stylesheet. If you need more information on how to write and use CSS, there are many online resources to help you, and there are also Learnosity-specific Help articles and documentation reference pages that discuss different ways classes can be used in different implementations.
For this article, we’ll assume you have a simple stylesheet with a single class that styles text to appear red in color:
.red-text {
color:#FF0000;
}
We’ll further assume that you have:
- Saved this example file with the name, customerStyles.css (your final file names will be set by you).
- Hosted this file at a convenient location that allows you to edit and maintain the document moving forward.
- Successfully tested your styles using local files.
Adding the Stylesheet to your Consumer
A user with appropriate permissions can add your stylesheet to your consumer using Learnosity’s self-management tool, Console. (Users with System Admin, Management Admin, or General Admin roles can complete this task. For more information, see “Managing User Roles in Learnosity Console.”)
Screenshot 1: adding the stylesheet to your consumer using Learnosity Console
With the appropriate permissions:
- Copy the URL of your hosted stylesheet. For this example, we’ll assume http://www.mydomain.com/customerStyles.css ( but your URL will differ).
- Open Learnosity’s Console.
- Using the navigation menu at left, select Expand Menu -> Configuration -> Consumers to navigate to the Management - Consumers page.
- Select the consumer where you want to register the CSS file. (To add a file to more than one consumer, simply repeat all of these steps for each consumer separately.)
- Select the `Api Options` tab and find the `API CSS file` input field.
- Paste the URL of your hosted stylesheet into this field and click the Save button.
Using Custom Styles
There are multiple ways to use the stylesheet you’ve just added to your consumer, including styling content during authoring, customizing the assessment player or reports, targeting content with public methods, and more. The following articles touch on some of these examples, and more will be added over time.