We often get questions how to change text size/color, buttons etc inside WatuPRO’s exam area. This short post should answer most of these questions.
Before this I want to start with important note: beside a couple of very basic definitions, WatuPRO does not define how elements look on the page. It follows the CSS definitions of your WordPress theme. This is done because the plugin should fit any design theme and not force any design preferences. What looks good for you may not look good for other customers.
If something is looking misplaced it’s because something in your CSS is redefining the default behavior of HTML tags. For issues that do not originate in the plugin we advice you to check with your theme designer. Sometimes we can provide paid design help but this is an exception and not a rule.
We can not under any circumstances make global changes to the plugin fonts, colors, spacing or arrangement based on the requests of a single customer.
At the bottom of this page you will find the full list of elements used in the front-end quiz page.
Anything that cannot be changed by CSS can be changed by creating copies of the “view” files as explained in the internal Help page of the plugin, section “Redesigning and Customizing the Views / Templates”.
Change the Buttons (Submit, Nex/Previous Etc Style)
This is what you need:
.watupro_buttons td input {
// Your CSS here
}
The “toggle answer feedback” button:
.watupro-main-feedback input[type=button] {
// Your CSS here
}
Changing the Text Size, or Color, or Anything Inside
This is easy. The whole exam content is wrapped in a div with ID “watupro_quiz” and class “quiz-area”. So you can use the class or the ID by your choice to apply any CSS inside. Examples:
(change the font size)
#watupro_quiz {
font-size:16px;
}
(change font color of text in h2 tag)
.quiz-area h2 {
color:blue;
}
Note that in many cases you can overwrite this CSS at a specific question level because you can format every question through the WordPress rich text editor.
How To Remove The Question Numbers
By default WatuPRO automatically numbers the questions of the quiz. In case you want to hide the numbers, they are all placed in spans with class watupro_num. So to hide them, simply do:
.watupro_num { display: none; }
Choices Show Under Radio Buttons or Checkboxes
Please see here.
If you have other similar questions please ask here in the comments and we’ll update the post.
List Of Elements On The Exam Screen
The elements are given in order from top to bottom and some of them may not be used in your quiz, depending on the quiz settings. All the elements are inside the main div with ID “watupro_quiz”.
– p class=’watupro-warning’ id=’timerRuns’ – the timer warning element that warns you about timer running behind the scene
– div id=”timeNag” displays the clickable link to start the timer, and the text before it
– div id=”timerDiv” is the timer itself
– div class=”watupro-exam-description” is the exam description holder, if description is provided
– form class=”quiz-form” holds the quiz form
– div class=’watupro-paginator-wrap’ holds the paginator, if such is used
– ul class=’watupro-paginator watupro-paginator-custom’ is the paginator itself. It’s recommended to style only the “watupro-paginator-custom” class
– div class=’watupro_catpage’ holds the category header and description for quizzes that are paginated one page per category.
– a h3 tag inside the above div shows the category title
– div class=’watu-question’ holds each question in the quiz
– div class=’question-content’ holds the question contents without the answers
– span class=’watupro_num’ contains the automatic question number
– p class=’watupro-qnum-info’ holds the “Question 1 of X” text for quizzes that show such
– table class=”watupro_buttons” holds the buttons under the quiz, each one in its own cell