Changing Text and Buttons Visuals

You are here:

The Advisor Quiz plugin allows you to customize the look of your quiz, giving options to style the entry screen, questions, answers and the buttons. You can choose the font family, size, weight and line height for the text and the colours and hover colours for the buttons. There’s also an option available to choose another icon/image to represent the checked/unchecked answers.

Where to find the options

To top

You can find the options to control the visuals of your quizzes in the Settings Page of the plugin, in the ‘Visuals’ section. Each main layout will have a set of options to control the visuals for that layout across all quizzes.

Global Font Size

To top

Choose the font family, weight, size and line height for all normal text across the quiz layout. This will apply to all text on the quiz, except on areas where other rules where specified.

Entry Screen

To top

In addition to the font options, you’ll also have fields to control the padding and margin for the text in the entry screen. You can also choose a custom colour and set a background colour for the text container. Usually the background colour can be useful to make it easier for the text to be legible, in case the background image has different colours. RGBA colours are available, meaning the container can have some transparency.

Questions

To top

You can select a custom font family or the questions will inherit it from the global setting or theme styles. Font weight, style, size and line height can also be controlled. The default padding can be changed as well as the text and background colours.

Answers Icons

To top

By default the answers will display a fontawesome icon, a square. Empty square when the answer is not selected and a checked square when the answer was selected. This can be changed and you can use any HTML code to set your custom graphic or icon. The quiz loads fontawesome, so we recommend you to use fontawesome HTML code to load an icon.

Answer Boxes

The answers visual options are the most complex, with many options that allow you to control the many states of an answer. Besides the usual font and padding options, there are colour options to each of the answers states:

  • Normal
  • Hover
  • Selected
  • Correct
  • Wrong
  • Unselected Correct

Buttons

To top

The buttons can be customized to fit your needs. There are options to control the font family, style, weight, size, line height and colour options for the different button states: Normal and hover.

Was this article helpful?
Dislike 0