Yup – from button styling to text, colors to borders, you have control over nearly every element of a Riddle – and you don’t have to be a code guru to do it.
Each time you create a quiz, it will feel completely organic to your site – not a 3rd party widget. See how Choice Hotels used our CSS quiz editor for their ‘Where should you go on vacation?’ quiz:
BEFORE: Choice Hotels quiz – no CSS
AFTER: Choice Hotels quiz – with CSS editor
What can you customize with our CSS quiz editor?
For customers on our Team plan, our CSS quiz editor now gives full control over almost every aspect of your Riddle.
This is just the tiniest tip of the iceberg:
- Bullets
- Buttons – round or square?
- Fonts
- Colors of any element
- Background – use colors or background images
CSS quiz editor – live quiz examples
Our CSS quiz editor is part of our Team plan – along with multi-user accounts, uploading your own fonts, and loads more.
Check out how Price Waterhouse Cooper modified the CSS for a series of one question quizzes into this report targeting cognitive bias among C-level executives.
They changed the borders, buttons, uploaded their own font and more – all so that each quiz more closely match their site.
English Premiership champions Chelsea FC are big fans of using Riddle’s quiz maker to engage their fans, both on- and off-season.
They used the creative freedom of our CSS quiz editor in their timed “Arsenal vs. Chelsea” quiz:
Getting started with our CSS quiz editor
Let’s take a look on how to get started with our CSS quiz exditor:
- Go to the ‘Customize’ step > ‘Style’ tab.
- Scroll down to CSS quiz editor.
- Paste in the new CSS code for any elements you’d like to customize.
To modify the CSS code, you can change the CSS property of each part of the Riddle by first investigating the property name and then adding a new CSS property for the respective class.
To investigate the property names, we suggest to use Google Chrome’s developer tools:
- Click on ‘inspect’ then find the element name – typically in this format: h1.title.ng-binding (in this case for the title text)
- To change the parameter, just copy this tag along with the specific color or other characteristic.
In the example below, we made the following CSS changes to remove the frame border, change the buttons and more.
.riddle-frame {
letter-spacing: .4px;
border-radius: 0px;
border: 0px!important;
}
.riddle-frame .content-div .footer-content .start-btn {
width: 70%;
padding: 0px;
border-radius: 2px;
padding: 15px 0;
}
.riddle-frame .share-result .btn {
background-color: #07265D !important;
border-radius: 1px;
}Original Riddle (no CSS modifications):
New Riddle (with CSS modifications):
Want to save time with our CSS quiz editor?
We’ve also created this database of common CSS edits – over 60 tips/tricks on editing/hiding/altering quiz elements and your quiz’s visual styles.
Just click, copy, and paste the CSS into the CSS quiz editor for your account.
Our CEO Boris shows a fraction of what’s possible with Riddle’s CSS quiz editor. He added text overlays, created new placements for sponsors’ logos and more in this burger quiz (in the ‘Enterprise’ section).
Ask us anything @ CSS
CSS might seem a little intimidating if you’re new to coding.
But fear not, we’re happy to create a free CSS ‘recipe’ to blend your Riddle quiz in your site with our CSS quiz editor.
All we need is a bit of guidance from you – such as the URL you’ll be embedding your quiz on, and we’ll get our CSS ninjas on the case.
(This is a free service for all subscribers to our Team plan – so don’t be shy.)
You can also use Riddle’s team style template feature to save any changes you make with our CSS quiz editor.
Apply all your customizations with just a click – or make it a ‘default’ template for any quiz, list, or poll you make going forward.
Any questions @ our CSS quiz editor?
Just give us a shout at hello@www.riddle.com/blog if you have any questions about CSS (or making a quiz in general).
We love to help – and respond in minutes from 7am to 10pm UK time (2am to 5pm EST).
