Free Demo
Atrixware » Blog Archive CSS for Quiz Templates Explained Part 2 - Atrixware
learning management system
Axis LMS
Ready to Enhance and Streamline YOUR Training?
Works on Windows, MacOS, iPad, iPhone & Android

CSS for Quiz Templates Explained Part 2

In this tutorial, I will be explaining how to modify the CSS properties for the selectors discussed in the previous article.

All colors in CSS are referred to using Hexadecimal format ex. #FFFFFF.  Most image editing software will provide Hexadecimal values when a color is chosen.  If you do not have image editing software, you may want to download a color picker to choose or get the color value from an image (You will find several pickers if you search Google for “free color picker”).  To learn about CSS syntax and terminology to help complete this exercise, visit this link

Start by creating a quiz, put the quiz into a course and add a student.  Now upload a logo to Weblearning (Files>Browse>Upload File).   Click the Modules tab > Properties and select your logo from the banner drop down box. My logo has a background-color of #EAEAEA so I will change the background-color of the quiz template to match.  Click the Modules tab > Properties > Advanced Settings tab, locate the Extra CSS input field


Paste the following.




Thats it!  Just replace your background-color with the hexadecimal value desired and click Submit Changes.


Navigate back to the Extra CSS input field.  Now change the background color of the content area to white.  Paste the following below the code already entered.





If you preview your quiz, (Courses tab > Portal) you will notice that some of the borders are white and may not show up well on the new background.  To change the top and bottom border color and style, paste the following.







The border of #header_bar will appear solid, grey and 1px wide.  The top border of #navbar will not be visible because its width is 0 px.  You can add as many CSS properties for a selector (ex. #header_bar) as you would like but each line must end in semicolon as shown above.

The last item I will change is the color of the question font and size.  Paste the following code

.tp_question {    

font-family:Verdana, sans-serif;    

font-size: 16pt;    




Click Submit Changes and preview your quiz template customizations.  Your new template should look something like below


If you would like to make other changes, you can visit to review all css properties and descriptions

If you enjoyed this article please consider staying updated via RSS.

Comments are closed.

A Better, Easier & Less Expensive Learning Management System
Try the Atrixware Axis LMS