How to Customize Assessment UI With CSS

Learn how to access and use the Brillium Enterprise CSS Overrides feature to create a unique assessment experience

Brillium Enterprise or White Label package users often want to match the Brillium assessment experience to their brand, website, or learning portal.  While many assessment UI elements can easily be customized using Brillium's authoring features and settings, some elements of the assessment experience cannot and are driven by underlaying Cascading Style Sheets (CSS) code. 

Allowing users to create their own style sheets would be a challenge to support, and it would be unsafe to allow most users to do so. But for those rare situations where some design aesthetics require adjustment, we offer an advanced CSS Overrides feature that can enabled for users with the technical resources to make use of it.

Overriding the standard Brillium CSS style sheets allows you to modify some of the elements that affect the look and feel of Brillium such as changing colors, font sizes, text sizes, and a host of other elements.

CSS Overrides is currently only available to users on a Brillium Enterprise plan or users that purchase a White Label package

NOTE

This feature is made available for customers with the technical expertise to use it. Brillium Support does not provide direct support or guidance in the use of Cascading Style Sheets (CSS) and cannot advise on code implementation.

It is highly recommended that any CSS modifications be made by an experienced web developer when using this feature.

Beginners Beware, Only Experts Dare

Modifying CSS is not for the faint-hearted. This affects some complex code and UI elements that determine how assessments display across all devices. This feature is designed for web developers and must be enabled by Brillium Support.

đŸ”´CAUTION

Using CSS overrides introduces a certain level of risk that assessments may not display as desired, due to difference sin the way web browsers display elements. Making changes can negatively impact the way that Brillium assessments display on certain devices.

How and Where To Access CSS Overrides

CSS overrides is an advanced feature that has some prerequisites.

Requirements:

đŸ”´CAUTION

The CSS Reference File is provided for developers to use as a "reference only" and is not intended to be uploaded to Brillium in its entirety. All CSS overrides should be limited to only those attributes that differ from the standard Brillium assessment experience.

CSS changes need to be made on a per-assessment basis. This is an intentional limitation designed to prevent overrides from accidentally affecting Brillium assessments across an entire workspace.

How to Make Changes to Assessment CSS

  1. Select Assessments from the main menu
  2. Select an assessment from the assessment list
  3. Select the Properties tab from Brillium Assessment Builder
  4. Select the Advanced disclosure triangle to expose the CSS Overrides text area
  5. Enter CSS overrides in the CSS text area to apply changes. 

TIP

Be sure to enter complete CSS statements, including curly braces.

Accessing CSS Overrides Screen(Accessing the CSS Overrides feature on the Properties tab of Brillium Assessment Builder)