Skip to main content

Styling options for exams

🦉 Exam theme ✓ Typography ✓ Colors ✓ Buttons ✓ Logo and background ✓ Custom CSS

You can make your exam match the look and feel of your website/brand, add your own logo and a background image, and much more!

On the Styling tab of your exam, you can see a lot of options to make your exam look even better and match your company or personal style. Let's take a look at them:

Theme

Here you can see a drop-down list with options to choose from:

  • Light: That will make your background color something close to white:

  • Dark: That will make your background somewhat black and greyish:

  • Dark photo background: That option allows you to add your own background photo with your logo and everything. You can add your background image in the Images section, which will open an upload field just for that:

Take a look at the Exam with a background image (which will be darkened a bit so your questions can stand out):

  • Minimalist: Your background will be switched to all white (the questions 'section' won't stand out from it):

Typography

Here you can change the question font type and size, answer font type and size, and the question alignment. You can choose between web safe fonts and all Google fonts:

Colors

Change the color of the background, text, and interface elements here (and make them match your brand).

Buttons

Here you can change the color of the buttons, like the start button of your test:

Example:

Images

Here you can add your own logo and a custom background image - if you selected that option under Theme (as explained above).

Custom CSS

With the Advanced plan, you can customize the CSS of your Exam directly from the Custom CSS tab.

On the File manager tab, you can also upload your own fonts and images for use on the CSS style sheet (check out this article.

Depending on your CSS skills, there are a lot of changes that you can make to the interface of your tests. We've had customers change the timer bar's look, add animated, flashy transitions, and do other great stuff with custom CSS.

Just to give you an example, this is the link to an Exam that was just styled with the available settings in the Dashboard: https://www.onlineexambuilder.com/ocean-sailor/exam-70792

And this is the same Exam, but now with custom CSS styling: https://www.onlineexambuilder.com/ocean-sailor-css/exam-93757

All changes made on the Styling tab will be applied to your exam from then on, even if it's an existing one or if it's embedded on a website.

Did this answer your question?