Editing Design Styles (CSS)

Quiz And Survey Master has a few built-in “styles” to choose from. However, if you know CSS, you can customize the design of your quizzes and surveys. There are a few ways you can customize CSS:

1. Using the “Custom Style CSS” on the “Style” tab
2. Adding CSS to the “Additional CSS” in the Customizer
3. Adding CSS to your theme

If you only want to make small style changes to all of your quizzes or surveys, your best option is to use the Customizer or your theme’s style.css.

The “Custom Style CSS” replaces all CSS for a particular quiz or survey. If you choose “Custom” as the style, you can create a custom design using the “Custom Style CSS” text box on the “Style” tab. However, none of the default QSM styles will be loaded if using that option.

For CSS, this plugin has gone through many transitions. This plugin was originally built as a side project of “My Local Webstop” so the classes originally looked like mlw_element. Then, the project was spun out so classes began using “qmn_element”. Eventually, we changed the name and started using a newer format of “qsm-element”.

For backward compatibility, we left the various classes on the elements but you should always choose the “qsm-element” formatted class as the others will eventually be removed.

Sample Set of CSS Classes used

‘qsm-quiz-container’ – class for the div element that wraps the entire quiz

‘qsm-quiz-form’ – class for the form element of the quiz

‘qsm-error-message’ – class for the error message that appears when certain fields are required or when certain answers do not pass validation (i.e. email fields not containing emails)

‘qsm-page’ – class for each “page” of the quiz or survey. NOTE: If the quiz or survey uses the “questions per page” option, this page element is not used

‘qsm-before-message’ – class on the div element of the text that is shown before the quiz which can be customized on the “Text” tab.

‘qsm_contact_div ‘ – class on the div element that wraps each contact field

‘qsm-contact-type-text’ – additional class on the div element that wraps each contact field that designates the type of contact field

Older CSS classes Used

‘mlw_qmn_quiz‘ – class for entire quiz

‘mlw_quiz_form’ – class for form

‘quiz_section’ – class for each quiz page

‘mlw_qmn_message_before’ – class for message before text

‘mlw_qmn_question’ – class for question text

‘qmn_error’ – class for error messages

‘mlw_qmn_question_comment’ – class for comment fields

‘mlw_qmn_comment_section_text’ – class for message for comment section

‘mlw_qmn_message_end’ – class for message end text

‘mlw_qmn_quiz_link’ – class for pagination buttons (Next/Previous)

‘mlw_qmn_timer’ – class for the timer

‘mlw_horizontal_multiple’ – class for horizontal multiple response answers

‘mlw_answer_open_text’ – class for open answer question types

‘mlw_answer_number’ – class for number question types

‘mlw_qmn_hint_link’ – class for hint

‘qmn_radio_answers’ – class for multiple choice answers

‘qmn_quiz_radio’ – class for radio inputs

‘mlw_horizontal_choice’ – class for horizontal multiple choice answers

‘qmn_check_answers’ – class for multiple response answers

‘qmn_page_counter_message’ – class for the pagination numbers