Follow

Styling 3.X Quizzes

In the 2.X branch of WordPress Simple Survey, one design issue we had was the heavy dose of jQuery-UI HTML and CSS structure that was making it impossible for designers to come up with their own look and feel for their quizzes. This also prevented the quizzes from being responsive.

After numerous complaints through our support forum, we intentionally removed the jQuery UI stuff which is no longer fashionable and frustrated a lot of designers, and opted for a simpler HTML and CSS structure that naturally takes to the theme that the quiz is injected in to. This has the benefit of being easily style-able and works nicely with responsive themes.

This is a vast improvement and designers will appreciate that quizzes feel like they were designed for the theme without any customizations. However, this does mean that the quiz can be quite neutral out of the box in some themes.

Here are some CSS suggestions to do common modifications and to help us non web designers.


Modify the question and answer size and color

.wpss .wpss-question, .wpss .wpss-question p{ 
  font-size: 15px; 
  color: orange; 
}

.wpss .answers, .wpss .answers .answer_text, .wpss .answers label{
  font-size: 15px;
  color: orange;
}

Modify the progress bar size and color

.wpss-progress-bar {
  border: none !important; 
  background: #f5f5f5; 
  height: 10px !important;
}

.wpss-progress-bar span {
  background-color: #24890d !important;
}

Modify the Next and Back button color and size

.wpss .wpss_prev_next a{
  font-size: 15px !important;
  color: #0066FF;
}

Add border and shading to quiz

.wpss{
  padding: 5px;
  border: 1px #00FFB3 solid;
  background-color: #00FFB3;
}

.wpss .wpss-form{
  background-color: #FFB300;
}
Have more questions? Submit a request

Comments

Powered by Zendesk