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

Breeze Theme

Our team of experts has painstakingly crafted an incredibly functional, powerful theme. Breeze is a premium theme developed by Quiz and Survey Master. The theme displays a featured image at the beginning of the quiz along with the set welcome text. 

The sleek, simplified design of the Breeze theme makes it fresh and appealing. This Premium Theme comes with a beautiful design, button animations, captivating hover effects, and several customization options. 

If you quiz a timed quiz, the quiz also has a unique circular watch face that tracks the time left to complete the quiz. You can customize a lot of color options and make the quiz a part of your website.

The theme displays a full image at the beginning of the quiz along with the welcome message that can be changed in the ‘Text’ Tab and a ‘Next’ button located at the bottom-right of the quiz. 

Breeze theme- QSM
Breeze Theme

The Quiz Card is blunt at the edges and is slightly curved. Following are the things to notice in the QSM Breeze Theme.

Appearance

QSM-Breeze-Theme-Appearence-Quiz-and-Survey-Master
Theme Appearence
  1. Back Button – Breeze theme’s back button is located at the top-left corner with a back arrow icon. You can change its color by navigating to Style > Customize Theme but it is relative to the Option Hover Color.
  2. Page Name – Breeze lets you set a page name for your quiz. Page Name can be set from Questions Tab > Page Settings > Page Name.
  3. Current Page Number – In Breeze Theme, the Current Page Number is located at the very top of your Quiz. Its color cannot be changed and is fixed.
  4. Timer – If you have set a time limit for your quiz from the ‘Options’ tab, you will see a circular countdown timer with a beautiful watch face mentioning the remaining time. The timer can be found in the top-right corner of your quiz.
  5. Progress Bar – In Breeze Theme the progress bar is horizontally placed, and displays the progress in percentage along with the moving color line. You can change the Progress bar color from Theme Customization.
  6. Quiz Question – Breeze lets you display your question in bold text, it will also display any media/feature image that you’ve set while creating the quiz
  7. Quiz Answers – Depending on the question type you choose the quiz answers will vary, however in the Breeze theme you will find the answers in rounded radio icons. You can change the hover color from Theme Customization.
  8. Gradient Stripe – Breeze 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.
  9. Previous Button – Lets you goto the previous page. You can change its color by navigating to Style > Customize Theme but it is relative to the Option Hover Color.
  10. 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 the ‘polar’ question type inside your quiz, you will see a unique slider icon in your quiz. 

Theme Customizations

Breeze Customizations
Theme Customizations

You can customize the Breeze theme by navigating to Style Tab > Themes > Breeze > Customize

Want to change the theme’s colors, background color, and background image? buttons & text color or the background colors? Answer Label Types and Progressbar color, etc. You can control it all from the Theme Settings. Each theme component can be customized as mentioned below.

  • General – Allows you to change the Theme’s color, Background image/colors, and text colors
  • Buttons  – Allows you to change Button color and button text color
  • Answer Choices – Allows you to change Answer Choices colors. One unique feature of the Sapience theme is that it allows you to customize answer label types using Numbers, Alphabets, or default icons. Simultaneously you can change the background color, text color, and the option border colors of the answer choices which again are unique to the Sapience Theme.
  • Progress Bar – Allows you to change the Progress Bar colors
  • Header Elements – Allows you to change the Page Number color and Page Name color
  • Advanced Settings – Allows you to enable/disable page label. You can set the page label from Questions Tab > Page Settings > Page Name

Note: All the colors that you change can be brought back to their default values by hitting the “default” button found inside the color picker.

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.

Breeze Theme in Action

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

How can we help?