Monthly Archives: August 2013

WatuPRO CSS Tips and Tricks

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

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 {

(change font color of text in h2 tag)
.quiz-area h2 {

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

BroadFast for WordPress 2.0 and the Intelligence Module

We’ve just update the WordPress auto responder to version 2.0. All existing members will receive a free upgrade with a newsletter coming in a day.

What’s New?

  • HTML signup form code available so you can embed your signup forms even on static pages or outside of your WordPress blog.
  • Newsletter reports.
  • Autoresponder campaign reports.
  • The plugin is now compatible with the new Intelligence module.
  • Bug fixes and code improvements.

Intelligence Module

The Intelligence module is a new plugin that’s sold together with the autoresponder for $87. It currently adds 3 very powerful and important features:

  • Trackable links: embed trackable links in your email messages and get detailed reports which links are clicked most and which messages deliver highest click-trough rates.
  • Event triggers are powerful workers that can subscribe, unsubscribe and move the users between mailing lists when they do various actions. Triggers can be activated automatically when user subscribes, unsubscribes, reads email or clicks on a trackable link.
  • Send post or page as a newsletter. You can send any post or page, any time, to a selected mailing list. If later you edit the post you can decide to update the associated newsletter as well.

If you are existing customers you’ll receive a promo code that will let you buy the Intelligence with 50% discount. Please feel free to contact us if you don’t receive the newsletter.