Free Demo
1.866.696.8709
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
FREE DEMO

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 http://www.w3schools.com/Css/css_syntax.asp

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

blog45.jpg

Paste the following.

body{    

background-color:#EAEAEA;    

}    

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

blog41.jpg

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.

#content{    

background-color:#FFFFFF;    

}

blog44.jpg

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.

#header_bar{    

border-style:solid;    

border-color:#333333;    

border-width:1px;   

}    

#navbar{
border-top:0px;
}

blog43.jpg
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;    

color:#000066;    

}    

blog42.jpg

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

blog48.jpg

If you would like to make other changes, you can visit http://www.w3schools.com/css/css_reference.asp 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