Free Demo
1.866.696.8709
Atrixware » Blog Archive CSS for Quiz Templates Explained Part 1 - 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 1

In this article, I will be discussing what each css name will modify for quiz templates in Weblearning 9. I will also note some property modifications that would be commonly used. In Part 2, I will be discussing how to make these changes using CSS properties.

What is CSS?

CSS will allow you to “style” web pages. (change font color, size, background color etc.) Since Weblearning is a web application, the same principles will apply for customizing quiz templates. Each template already has CSS applied to it giving it a look and feel. If you want to modify a template for example to change the color scheme to match company colors, you would override the current CSS with your own in the Weblearning Control Panel (discussed in Part 2).

CSS Syntax

Here is a basic outline of how the code should be formatted with an example

Terminology

selector {

property:value;

}

Example

body{

color:#FFFFFF;

}

CSS Template names and descriptions

Note: Sections highlighted in red represent what the name (class or id) will control.

css_resized7.jpg

.navbutton: the next, back and end buttons on the bottom of the template. Common Modification: Change the width, height, font or color

css_resized9.jpg

.q_essaytext: essay style question text. Common Modification: Change the font size, font color or background color

.q_fibtext: fill in the blank style question text. Common Modification: Change the font size, font color or background color

.q_picklist: the picklist question style. Common Modification: Change the width, font size, font color or background color

.q_matching_text: the matching question style. Common Modification: Change the width, font size, font color or background color

.q_matching_picklist: the matching picklist question style. Common Modification: Change the width, font size, font color or background color

.q_title_bar: the question title bar. By default will display the question number. Common Modification: Making it invisible, modifying the font, color, height and width

css_resized5.jpg

.tp_body: this style will apply as a default for everything inside of the template if there is no style defined. Common Modification: background color and default font

css_resized1.jpg

.tp_choiceb: question answers. Common Modification: font, size and color

css_resized8.jpg

.tp_question: the question text. Common Modification: font, size and color

css_resized4.jpg

#content: box that holds the question title bar, the question and answers. Common Modification: background color, background image and border

css_resized3.jpg

#header_bar: holds the timer and the quiz title. Common Modification: background color and border

css_resized6.jpg

#navbar: holds the navigation buttons at the bottom. Common Modification: background color and border

css_resized2.jpg

#logo_container: holds the logo image at the top of the template. Common Modification: Align to left, right or center

css_resized101.jpg

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