Customize everything with Riddle’s quiz CSS Editor

3 min read

We introduced our CSS editor – so you can customize every visual element of your quiz to seamlessly match with your site’s look and feel.

For brands and agencies, your site (or your client’s) is your face to the world.

We know how important it is that any content embed represents your brand – not stick out like a 3rd party widget.

Take a look at this example from Choice Hotels:

Before – standard Riddle styling

After – CSS Editor used by Choice Hotels

CSS editor – what can you customize?

Frankly – pretty much anything and everything.

Take control over all the colors, borders, buttons, hover states and more. Let your inner creative geek run wild – customize any of our 14 types of personality tests, quizzes, listicles and more.

(And the best part? You don’t have to be a coding wizard to take advantage of our CSS editor.)

Nope – you can use the same technology as our top brand and publishing partners like the BBC, the Oakland Raiders, and more.

Every time you make a quiz using our CSS editor, it will look and feel perfect on your site – and completely natural to your audience.

CSS editor – live quiz examples:

Right – want to see the CSS editor in action?

We include it as part of our Team plan – along with lots of other goodies like uploading your own custom font – or inviting your colleagues and clients to collaborate with our multi-user accounts.

The big global consulting firm Price Waterhouse Cooper added 1 question quizzes into their online report educating CEOs about cognitive bias.

PWC’s designers made a wide range of changes – including removing the border, adding their own font, and so on. You can see how naturally each quiz fits into the report below:


If you’re a footie/soccer fan, you’ll probably have heard of the legendary English Premiership club Chelsea FC.

They love using quizzes with our CSS editor (like this “Arsenal v. Chelsea timed quiz“) to challenge and entertain their fans:


How to get started with our CSS editor?

Right – here’s how to get creating, in three easy steps:

  1. Click on the ‘Customize’ step > ‘Style’ tab.
  2. The CSS editor is at the bottom of this section.
  3. Just paste in your new CSS – and the quiz preview will auto-update so you can test the results.

CSS editor - sample screenshot

CSS editor – video tutorial

Our co-founder Mike gives a quick walkthrough of our CSS editor – including live use cases and examples:

CSS editor – common customizations

If you’d like to save some time, take a look at our database of common CSS edits.

We’ve included over 60 CSS ‘recipes’ for customizing common quiz elements.

To see them in action, simply copy/paste any of them in the CSS editor:

screenshot of CSS tips and tricks

Got questions abou CSS?

Sure – we totally get it. CSS can be seem super difficult if you’re not a coder by profession.

The good news? We’ll help create your own free CSS ‘recipe’ so your quizzes blend fully into your site.

It’s a free service – all part of your Team plan.

Once you’ve got your CSS all set – the rest of your team will never have to worry about it.

Simply use our style template feature to automatically apply these changes every time you create a quiz.

We’re big customer support (and quiz) geeks…

Please drop us a line at if we can help with any CSS or quiz questions.

We love to help – and are lightning-fast to respond to all questions while we awake (7am to 10pm UK time / 2am to 5pm EST).

Download our free e-book “Quizmaster”

Learn how to use quizzes for your marketing -
capture more leads and grow your business!
Scroll to Top