This article is also available in:
With Corporate and Enterprise Owl plans, it's possible to edit the CSS of your learning content.

You may want to change the fonts, colors, shapes of buttons, and background of your tests and courses created with Easy LMS. One way to do it is by adjusting the settings at the Styling tab, but you may want to make even more changes than those directly available.

Access to the CSS allows you to change the way online content is presented, such as colors, fonts, font sizes, shapes of buttons, etc. To have access to this feature, you need to have a Corporate or Enterprise Owl plan.

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 who changed the timer bar’s look, added flashy animated transitions, and other great stuff through custom CSS.

Quizzes, Assessments, and Courses

If you want to customize the CSS for your Quiz, Assessment, or Course, send us a message. If the change is simple (such as altering the font size), we can make it right away.

If you require more changes, we'll send you a file 📂 for customization so that you can send it back to us, and we'll then apply the changes to your account. Please send your request through the chat.

Changes in the CSS can be applied, specifically to a Quiz, Assessment, or Course, or throughout your account (if you want to use the same settings for each piece of content you create). The CSS can be saved as a list in a notepad document and sent to us. We will then implement it in your account.

Exams

You can edit the CSS of your Exam directly from your account. Go to your Exam > Create > Styling > Custom CSS:



On the File manager tab, you can also upload your fonts and images for use on the CSS style sheet (check out this article to find out more):



Just to give you an example, this is the link to an Exam that was styled with the available settings in the Dashboard:
https://www.onlineexambuilder.com/general-knowledge-exam-no-css/exam-319288

And this is the same Exam, but now with custom CSS styling:
https://www.onlineexambuilder.com/general-knowledge-exam-css/exam-276765

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.

Custom CSS cheat sheet

Our beloved designers shared some code snippets you can use to create your CSS sheet. Check them out below.

1. Exam, Quiz, and Assessment

Changing the font family

All Google fonts are now available for Exams.
If you want to change the font type of your Assessment and Quiz, please see a list of Web Safe Fonts, or see Google Fonts. Don’t forget to import the font to the File manager (in Exams > Styling) then copy-paste the font path to your CSS sheet.

Headings

This includes the questions.

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: Georgia, serif;}

Body text

This includes the answers.

body { font-family: Arial, Helvetica, sans-serif;}

Buttons

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Everything (the same font)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong,.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-family: Arial, Helvetica, sans-serif;}

Changing the font size

Headings

h1 { font-size: 28px;}h2, caption, .heading_h2, .examquestion>strong { font-size: 21px;}h3, .heading_h3 { font-size: 16.8px;}h4 { font-size: 15.4px;}h5 { font-size: 14px;}h6 { font-size: 11.2px;}

Body text

body { font-size: 13px;}

Buttons

.container .button, .container input[type=submit], .container input[type=button], .container button, .container .gameisrunning .continue { font-size: 13px;}

Questions

#questioncontainer h1 { font-size: 28px;}

Answers

.answers label, .answers label span, .answerinput * { font-size: 13px;}

Adding a background image

For Exams, you can do this directly through the dashboard in Styling > Theme > Dark photo background.

However, for Assessments and Quizzes you need the following lines of code:

html { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}html body { background: none rgba(59,59,59,0.7);}

To add a background image, you need first to upload this image to our servers. You can do that by adding them to the File Manager in one of your Exams. After uploading them there, a CSS path will be generated at the Styling > Custom CSS tab. You can then copy-paste this image/font path in your CSS sheet.


2. Courses

Changing the font family

If you want to change the font type of your Course, please see a list of Web Safe Fonts, or see Google Fonts. Don’t forget to import the font to the File manager (in Exams > Styling) then copy-paste the font path to your CSS sheet.

Headings

h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong { font-family: "Droid Serif", serif;}

Body text

body { font-family: "Open Sans", sans-serif;}

Buttons

button, .button { font-family: "Open Sans", sans-serif;}

Everything (the same font)

body, h1, h2, h3, h4, h5, h6, caption, *[class*=heading_h], .examquestion>strong, button, .button { font-family: "Open Sans", sans-serif;}

Changing the font size

Headings

The heading sizes are different among different screen sizes.

Tablet and Desktop

@media only screen and (min-width: 40.0625em) { h1 { font-size: 2.55556rem; } h2 { font-size: 2.11111rem; } h3 { font-size: 1.66667rem; } h4 { font-size: 1.11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Mobile

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}

All screen sizes

h1 { font-size: 1.88889rem;}h2 { font-size: 1.55556rem;}h3 { font-size: 1.22222rem;}h4 { font-size: .77778rem;}h5 { font-size: 1rem;}h6 { font-size: 1rem;}@media only screen and (min-width: 40.0625em) { h1 { font-size: 2.55556rem; } h2 { font-size: 2.11111rem; } h3 { font-size: 1.66667rem; } h4 { font-size: 1.11111rem; } h5 { font-size: 1rem; } h6 { font-size: 1rem; }}

Body text

p, li, th, td, label, input, select, textarea, .qtype, .errorMessage, .assessboard p, .assessboard li, .contentcontainer .col12 .singleaxisscorecard p, .contentcontainer .col12 .singleaxisscorecard li {font-size: 1rem;}

Buttons

button, .button { font-size: .88889rem;}

Questions

#questioncontainer h1 { font-size: 28px;}

Answers

.answers label>span, .answers label { font-size: .8rem;}

Adding a background

body { background: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]') no-repeat center center fixed; background-size: cover;}

To add a background image, you first need to upload this image to our servers. You can do that by adding them to the File Manager in one of your Exams. After uploading them there, a CSS path will be generated at the Styling > Custom CSS tab. You can then copy-paste this image/font path in your CSS sheet.

For better readability, you can add an overlay color between the background image and the content. Change the last number for the opacity; 0.5 stands for 50% transparency).

For a black overlay:

.off-canvas-wrap { background: rgba(0, 0, 0, 0.5);}

For a white overlay:

.off-canvas-wrap { background: rgba(255, 255, 255, 0.5);}



Resize the image

To use a logo in a Course, you will probably need to resize it. Hence, please use this tool to resize the logo before uploading it to Amazon: Online Image Resizer.

Upload the image. You can crop it if you need to, but if this isn’t needed, go directly to Step 4. Put the number “108” in the last box, and keep the checkbox checked, like this:



Now download the logo. PNG is your best bet.

Upload the logo

To use the logo, you need to upload this image to our servers. Please add them to an Exam > Styling > File manager and copy-paste the CSS path at the bottom of the Custom CSS subtab to use it in your Course.

Calculating the right width

In CSS, you will have to specify the height and width of the logo you’re adding. You have to respect the aspect ratio of the logo, so you need a calculator to do that: Easy Aspect Ratio Calculator. Here is how you use it:

Find the current dimensions of your image first. Go to the logo you just uploaded in your Explorer, right-click on it and click Properties. Select the Details tab. You will see your dimensions listed on the top:
Go to the online calculator. Enter the width and height of the image (the one in the properties), select New height, and enter the new height (see below after background-size, the second value is the height you want).
The calculator will say something like, “Behold! The new width,” and your number is there! Do round this number to the nearest one (there is no such thing as half pixels).

Logo on the left side (next to the menu button)

Please note that the image below was styled directly from the menu button, and solid background color was added to the logo with padding inside. If you need this to be different, you need to fiddle around with the background-size and the background-position (see the example below).

.tab-bar::after { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-repeat: no-repeat; background-position: right top; background-size: 156px 51px; content: ''; display: block; position: relative; float: left; width: 156px; height: 51px;}@media only screen and (min-width: 64.063em) { .tab-bar::after { background-size: 165px 54px; width: 165px; height: 54px; }}@media only screen and (max-width: 40em) { .tab-bar::after { width: 138px; height: 45px; background-size: 138px 45px; }}

Logo on the right side

Please note that the image below was styled to have slight padding from the side and top. If you don’t want that, you can set the height of the image to 54px for desktop and 45px for mobile and set the background-position to top right instead (see the example above). The image will take the top bar’s full height and stick to the edges of the window.

.tab-bar { background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-position: top 10px right 10px; background-repeat: no-repeat; background-size: 117px 40px;}@media only screen and (max-width: 40em) { .tab-bar { background-position: right 10px center; background-size: 102px 35px; }}

Logo on the bottom left or right

Adjust the width, height, and background-size according to the dimensions of your image.

In the example below, the logo is aligned to the right. To align it to the left, change right: 0 to left: 0.

If you need the logo to be a little bit from the edge, write things like right: 10px and bottom: 10px.

.main-section .ui-page::after { content: ''; display: block; width: 102px; height: 35px; background-image: url('https://d24s38jd6z1bka.cloudfront.net/upload/customers/[relative_url_of_the_file_you_have_uploaded]'); background-size: 102px 35px; background-repeat: no-repeat; background-position: center; position: absolute; right: 0; bottom: 0; z-index: 99;}
Was this article helpful?
Cancel
Thank you!