Changing background colors
Customize the look and feel of your quiz by changing the background color.
Whether you want to match your company branding, create a themed quiz, or simply make your content look better, FlexiQuiz lets you choose from a wide range of colors to suit your needs.
In this guide, we'll show you how to update the background color of your quiz and learning content.
Where you can change the page background color with FlexiQuiz
You can customize the background color in several areas of your quiz, depending on the page layout you are using.
There are two layout options available:
- Classic
- Bordered (new for 2026)
The images below highlight the different sections where background colors can be applied for each layout.
Classic:
Bordered:
You can use a consistent color throughout your quiz or choose different colors for individual sections to match your branding or create a specific theme.
How to change background colors for a bordered layout
- To start, create a quiz or edit an existing one. You need to have at least one question or text/media item to view your color theme.
- Now choose your page layout. From the Create screen, click the Styling icon, then the Layout tab.
- Go to Page style, then choose Bordered from the drop-down menu.
- Then click on the Styling tab.
- Go to Page color to pick and update the color of the page where the text appears. Click on the circle and you can choose one of the FlexiQuiz color options or add a HEX code to match your branding.
- Go to Background color to update the border color.
- Click preview on the top right to view your color choices.
How to change the colors for a classic layout
- Start by creating a quiz. You need to have at least one question or text/media item to view your color choices.
- Now choose your page layout. From the Create screen, click the Styling icon, then the Layout tab.
- Go to Page style, then choose Classic from the drop-down menu.
- Then click on the Styling tab.
- Go to Page color to update the color of the page where the text appears and the header.
- Go to Background color to update the side colors.
- Click preview on the top right to view how your color choices look on the page.
How to change the color of different parts of the quiz
You can customize the colors of various elements throughout your quiz to match your branding or create a specific look and feel.
To change the colors:
- Open your quiz or learning activity and go to the Configure screen.
- Select Theme from the left-hand menu.
- Scroll to the Background colors section.
- Choose the area you would like to customize:
- Click the color selector for the area you want to update, then choose a color using the FlexiQuiz color picker or enter your own HEX color code.
- Click Preview in the top-right corner to see how your new color scheme looks before publishing.
o Page – The main content area where questions, text, and media are displayed.
o Background – The area surrounding the page content, including the page borders.
o Header – The section that displays the quiz title.
o Logo Header – The area where your logo is shown.
o Footer – The section at the bottom of the page containing the FlexiQuiz link and progress bar.
Quickly update your quiz with color themes
Choose from a range of professionally designed color themes to instantly update your quiz's look.
Each theme includes coordinated background colors, fonts, and navigation button styles, helping you create a polished, consistent experience in just a few clicks.
All of our themes are designed with accessibility in mind and provide strong color contrast to improve readability for people with visual impairments.
To add a theme to your learning materials.
- From the Create screen, click on the Styling icon.
- Now choose the Themes tab.
- Click on a color from our color theme options.
- Click preview to view the color theme as part of your quiz or learning materials.
Relevant help guides:
How to customize your navigation buttons.
Blog: Top ways to style your quiz or learning materials.
Back
