1. Home
  2. Docs
  3. QSM Themes
  4. Ivory Theme

Ivory Theme

The Ivory theme from Quiz and Survey Master comes with all the essential features required to create world-class quizzes. Versatile, user-friendly, stable, and mobile-friendly this theme is the best pick for creating multiple types of quizzes. 

The shape of the card with rounded corners has provided the perfect setting to display featured images that are presented in a Portrait view without any distortion and houses the welcome information followed by the Next Button.

The elegant fonts, simple design clubbed, button animations, and cool watch face gives the theme a classic style while retaining an elegance that makes it perfect for a variety of topics.

The Quiz’s Featured Image covers half of the Quiz Card and has slightly rounded corners along with dim shadow and the other half consists of the welcome message and the Next Button.

Ivory Theme

The Quiz Card has blunt edges and slightly rounded corners. Following are the things to notice in the QSM Ivory Theme.


Ivory Theme Appearance - QSM Themes
Theme Appearance
  1. Current Page Number – In Ivory Theme, the Current Page Number is located at the very top-left of your Quiz. Its color cannot be changed and is fixed.
  2. Progress Bar – In Ivory Theme the progress bar is horizontally placed, and displays the progress in percentage at the very beginning. You can change the Progress bar color from Theme Customization.
  3. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a countdown timer with a beautiful watch face mentioning the remaining time in minutes and seconds. The timer can be found in the top-right corner of your quiz.
  4. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Ivory theme you will find the answers in rounded radio icons. You can change the hover color from Theme Customization.
  5. Gradient Stripe – Ivory Theme has a thin gradient stripe that is static just above the ‘Next’ button. The Stripe’s color is relative to the Button Color and can be controlled from Theme Customization.
  6. Previous Button – Ivory theme’s previous button is located at the top-left corner with a back arrow icon. You can change its color by navigating to Style > Customize Theme and its relative to the Button Color.
  7. Next Button – Next Button is located at the bottom-right of the Quiz Card. You can change the button color from Theme Customization.

If you have included a ‘polar’ question type inside your quiz, you will see a unique slider icon in your quiz. 

Theme Customizations

Ivory Theme Customizations - QSM Themes
IvoryTheme Customizations

You can customize the Ivory theme by navigating to Style Tab > My Themes > Ivory  > Customize.

You have the option to Change/Set a Feature Image, Change background Color, Change Button Color, Change Progressbar Color, Change Option Hover Color, and Change the Font Color.

After making the required changes click the “Save Settings” button. 

📌 QSM core plugin and themes now fully support the RTL (Right to Left) language format. Benefit from improved usability for right-to-left language users.

Animation and Effects

QSM Ivory Theme in Action

Ivory Theme has a mesmerizing hover effect on the quiz answers/options. The option color changes as the user hover over each option. Likewise, the progress bar also advances forward or backward depending on the action you perform.

Adding a Quiz Featured Image

The best part of QSM Themes is that it allows you to add a Quiz Featured Image. A featured image is the one that is displayed to the user at the very beginning before the quiz commences.

It is the best way to brief the users and make them know what to expect in that particular quiz i.e. explain to the users what the quiz is all about.

There are two ways of setting a featured image for a Quiz.

The first being, setting the Featured Image while creating a New Quiz. In the Quiz Settings inside the Quiz Creation Wizard, you will be asked to set a featured image. You can then enter an external image URL or Choose from Media Library.

And, Secondly, You can also change the Featured Image from the Style Tab while configuring the Quiz. Just Click on Ivory Theme > Customize > Featured Image.

Theme Settings for Existing Users

If you are an existing user i.e you have been using Quiz and Survey Master prior to the release of QSM Themes (QSM v7 or Earlier), You can too upgrade your old quizzes running on the default QSM theme to the New Ivory Theme.

For upgrading to the Ivory Theme follow the below mentioned steps:

  1. Make sure you are on the Latest Version of Quiz and Survey Master and Update if you aren’t.
  2. From your Quiz, navigate to the Style Tab and click on the Purchase Themes option.
  3. Click on the Ivory Theme and Purchase the Ivory Theme
  4. Once Purchased, Ivory Theme will reflect in the “My Themes” tab.
  5. Hover over the Ivory Theme and Click on “Activate”
  6. The theme gets applied and now you can customize the theme as required.

If you want your theme to look exactly the same as shown in the above video, make the following changes.

  1. Navigate to the Options tab and make the following changes:
    • Enable the “Show progress bar” option
    • Set the “Questions Per Page” option value to “1”
    • Set the “Time Limit (in minutes)” option value to “5” or to any number of your choice
    • Click on the “Save Changes” button
  2. Set a Featured Image by clicking on the Customize Button and choose the image from your Media Library or Upload a New One.
  3. Keep the colors in their default values, and you are good to go.

Educators & Professional Web Developers, Try QSM!

4.9 / 5
Over 1 million downloads

Subscribe to Our Newsletter

Get weekly updates, no spam guaranteed we promise ✌️