Customize Assessment Display Elements using CSS Overrides

Using CSS overrides, Brillium display elements can be removed from the assessment interface in order to customize the look and branding of assessments. The following describes the CSS that can be added to the CSS Overrides on the Properties tab of an assessment to achieve the specified changes to the assessment screens.

The following CSS will remove the indicated display elements from the Brillium assessment interface.

.header-main {
display: none;
}

.steps {
display: none;
}

.group {
display: none;
}

.question-number {
display: none;
}

.question {
  background: rgba(255,255,255,0.07);
}

CSS Override Code	Effect
.header-main { display: none; }	Removes the logo, assessment name, and the upper most header container.
.steps { display: none; }	Removes the step bar at the top of the screen.
.group { display: none; }	Removes the Question Group section from display. Note: This should only be used if no assessment Topic instructions are used or desired.
.question-number { display: none; }	Removes the question number column from display. Note: This may have an adverse effect on some display elements of the feedback screen if question review is enabled. Testing is strongly encouraged.
.question { background: rgba(255,255,255,0.07); }	Removes the question container shaded background area to display only white. This is typically to give a uniform appearance more like a document, or when required by legal or accessibility reasons. Note: This example uses white color with .07% alpha transparency, but any "rgba" code can be substituted to suit a particular desired effect.