How can I use Riddle’s CSS editor to modify my quiz?
We get this question a lot. Riddle’s CSS editor (Team plan) is incredibly flexible – and you can change almost any visual element to match your site’s look and feel.
Check out this spectacular poll by soccer publisher 90min – to promote the launch ‘Game Night’:
CSS editor: Using with Riddle
Here are some examples of code – so you can try out this feature even if you’re not a coder.
Simply paste the sample code into the CSS editor box in the style tab.
(Not an Enterprise user? Let us know at hello@riddle.com – we can give you access to the CSS editor so you can test this out.)
Display quiz image answers in one column (ideal if you want larger images):
.image-choice {
width: 100%;
float: none;
}
View example here: https://www.riddle.com/view/134669
Make your custom logo bigger (hurrah for custom branding!):
.custom-logo, .riddle-logo img {
max-width: 500px!important;
max-height: 500px!important;
}
CSS editor: Want larger text?
This will make your text larger – in this case the description text of your quiz. Choose your text size (1em = 12px in Riddle, 2em = 24px, .5em = 6px etc.):
Change the font for all of your quiz text:
*{font-size: 50px;}
.description {
font-size: 2em;
}
Change the size of a particular type of text?
- Title: h1.title.txt2 {font-size: 50px;}
- Description: .description *{font-size: 12px;}
- Answers: .choice .txt2{font-size: 16px;}
- Footer text: .footer-content *{font-size: 20px;}
Hide the border around your quiz:
.riddle-frame {
letter-spacing: .4px;
border-radius: 0px;
border: 0px!important;
}
CSS editor: Make ‘Start’ button square:
.riddle-frame .content-div .footer-content .start-btn {
width: 70%;
padding: 0px;
border-radius: 2px;
padding: 15px 0;
}
Add multiple call to action buttons:
This hack involves 2 Riddle features: The HTML editor for your result text and the custom CSS feature
First, create your regular result text and then switch to the HTML editor by clicking the “pro” button and then selecting the HTML icon (<>).
Add HTML code for additional call-to-action buttons and give each button its own CSS class. You can use this code to add 3 buttons for example:
<div class="cta-btn-box">
<a class="cta-btn cta-btn1" href="https://www.riddle.com/de">Click Me!</a>
<a class="cta-btn cta-btn2" href="https://www.riddle.com/de"> Click Me!</a>
<a class="cta-btn cta-btn3 " href="https://www.riddle.com/de"> Click Me!</a>
</div>To style these buttons, add the following CSS code:
.cta-btn-box{
text-align: center;
white-space: normal;
}
.riddle-content .description .cta-btn {
border-radius: 4px;
background-color: #19D2F1;
color: #FFFFFF;
padding: 10px 10px;
font-weight: bold;
text-decoration: none;
transition-property: color, background-color;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.riddle-content .description .cta-btn:hover {
background-color: #8CE8F8;
}
.riddle-content .description .cta-btn1 {
background-color: #FF8000;
}
.riddle-content .description .cta-btn2 {
background-color: #0101DF;
}
.riddle-content .description .cta-btn3 {
background-color: #01DF3A;
}
.riddle-content .description .cta-btn1:hover {
background-color: #FE9A2E;
}
.riddle-content .description .cta-btn2:hover {
background-color: #2E2EFE;
}
.riddle-content .description .cta-btn3:hover {
background-color: #00FF40;
}The result will look like this:
50+ more CSS hacks:
We’re always helping our partners with their own CSS style requests – so we’ve compiled this growing database of over 50 CSS tweaks and stylings you can apply to your own quizzes.
Got any questions about our CSS editor and your quiz?
Don’t see what you need?
Just give us a shout at hello@riddle.com or on support chat – our team of CSS gurus are happy to lend a hand!
CSS editor: video walkthrough
And we know video can be much more informative than text – so we’ve included a quick video introduction to our CSS editor from our co-founder Mike.
Video transcript:
Hey there. My name is Mike and I’m one of the co-founders here at Riddle in this video.
I’m just going to give you a quick overview on how to use our CSS editor to modify your quiz. Now, looking at our customize step, we give you lots (and lots and lots!) of different ways you can modify your quiz.
However, sometimes you just need that extra level of control.
So for example, take a look at one of our partners called 90min.com. They’re a big sports media publisher, and they use our CSS editor to embed this image behind the pole choices.
Super cool.
We also love this Choice hotel personality test example because they modified the quiz so that there is no border, plus they’ve actually changed the order, so they have placed the image below the text. They’ve also changed hover states and buttons and all sorts of good stuff.
So the CSS editor is a really powerful and flexible way to use or to modify your quiz.
So how do you do it?
What you want to do is in the customize step, scroll down to the CSS editor. You’ll see I’ve already put in some CSS.
Removing the code – this is a CSS-free quiz; it has our standard look and feel. And it’s fine.
However, once I add the CSS back – you can see that I’ve taken away the border, changed the font, and I’ve made the button a lot bigger.
So you can, again, just have lots and lots of control over how your quiz looks and feels.
If you are not so good at CSS, you can actually use our CSS overrides. We love helping out our Team customers with their CSS requests. And we just keep adding the CSS hacks we create to this list.
So if you are looking for some tips or tricks on how to, for example, overlay the title over the image, here you go.
Or if you want to hide the percentages in my personality scores? Boom. There you go. There are lots and lots of choices here.
Of course, if you have any questions about CSS or things in general, just give us a shout on our support chat. All our devs, myself, my co-founder Boris, we all race each other to respond quickly. So, you’ll get an answer back super fast.
All right. That’s our CSS editor. That’s our recipe book of CSS hacks… Happy Riddling.