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.

1. 11/20/2020 Editing Design Styles (CSS) - Documentation Quiz And Survey Master
https://quizandsurveymaster.com/docs/advanced-topics/editing-design-styles-css/ 1/4
Advanced Topics
Limiting quiz
attempts
Editing Design
Styles (CSS)
Limiting quiz
attempts per user
Limiting total
quiz attempts
Requiring a user
to be logged in
Setting an active
time range
Setting up Social
Media Sharing
Home Docs Advanced Topics Editing Design Styles (CSS)
Editing Design Styles (CSS) - Documentation Quiz And Survey
Master
Home » Documentation » Advanced Topics » Editing Design Styles (CSS)
Editing Design Styles (CSS)
Documentation for 7.0 version of plugins is available at QSM 7.0
Documentation
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.

2. 11/20/2020 Editing Design Styles (CSS) - Documentation Quiz And Survey Master
https://quizandsurveymaster.com/docs/advanced-topics/editing-design-styles-css/ 2/4
URL and Post
Settings
Filters and
Hooks
Common Theme
Conflict Fixes
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

3. 11/20/2020 Editing Design Styles (CSS) - Documentation Quiz And Survey Master
https://quizandsurveymaster.com/docs/advanced-topics/editing-design-styles-css/ 3/4
Best WordPress quiz plugin to create quiz and surveys using WordPress. Quit paying monthly charges and start
using it for free.
30,000+ Active Installations
Links
Privacy Policy
Cookie Policy
Addons Terms And Conditions
WordPress Quiz Plugin
Affiliates
Follow us Our Sites
Brand Exponents
Responsive Menu
Hide My WP
Projectopia
‘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
Updated on July 18, 2018
← Limiting quiz attemptsLimiting quiz attempts per user →

4. 11/20/2020 Editing Design Styles (CSS) - Documentation Quiz And Survey Master
https://quizandsurveymaster.com/docs/advanced-topics/editing-design-styles-css/ 4/4
Showcase
Blog
Hire WordPress Engineers!
Signup for Newsletter
email@domain.com
Subscribe
Copyright © 2020 ExpressTech. All Rights Reserved.
We have placed cookies on your device to help make this website better. Read More Okay, thanks