Social data giant Kissmetrics knows that quizzes and interactive content are flat-out awesome at boosting engagement. They turn passive readers into viral brand advocates – increasing time on site and social shares. But why disrupt your site’s branding with a clunky 3rd party widget? Check out Riddle’s shiny new CSS quiz editor – it lets you seamlessly blend any quiz you create into your site experience.
Quizzes are the most engaging type of content on Facebook.
– Kissmetrics
We know that your site is precious to you – the result of months and years of effort. You’ve patiently labored for the visual look and feel for the perfect user experience – and your readers love you for it.
At Riddle, we’ve been working with top brands such as the BBC, Arsenal FC, and the Huffington Post. They’re big fans of how easy it is to create and embed Riddles, then apply a custom set of fonts and colors to match their sites with our global style sheets.
But they asked us if we could do more.
We’re always up for a challenge – and fuelled by pizza, beer, and the odd ping pong break, our ace dev team delivered.
Introducing Riddle’s CSS quiz editor
For customers on our Enterprise plan, our CSS quiz editor now gives full control over almost every aspect of your Riddle:
- Bullets
- Buttons – round or square?
- Fonts
- Font colors
- Background – use colors or background images
This is a bit of a silly example – but you can see that we’ve used the CSS quiz editor to:
- Move the logo up and added a bit of text to it
- Show the quiz title and results as a text overlay over the image with a nice transparent background
- Change the highlight colors for correct and wrong answers are different
- Style the buttons, remove the embed border, and much more
Use the CSS quiz editor to change any element
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 this example, we changed the .riddle-frame element in the following way before pasting into the CSS quiz editor:
.riddle-frame {border-radius: 0px;
border: 0px!important;
box-shadow: 5px 5px 15px #d2d2d2;
padding: 20px;
text-align: center;}
.riddle-frame .content-div .footer-content .start-btn {
width: 100{d2a41be1df1bb1f57ff4ab4fc5e8dae5f7aa3c163f6a38d6ac3f2cbd477c596b};
padding: 15px 0;
border-radius: 0px;}
.riddle-frame .content-div .choices .choice {padding: 8px 0;}
.riddle-frame .content-div .page-number {}
Original Riddle (no CSS modifications):
New Riddle (with CSS modifications):
Need some free help using Riddle’s CSS quiz editor? Ask us!
We know CSS can be tricky – if you’d like us to help tweak your Riddles, just let us know at hello@riddle.com.
If you can give us a description of what you’d like to change (as well as the color codes, fonts, etc.), our crack team of code ninjas will provide a recipe of the code snippets that you can insert yourself into the CSS quiz editor – and you’ll be all set.
And it’s a free service. 🙂
Want to create and customize a Riddle quiz, list, or poll yourself? We’re big believers in trying before you buy – so all of our plans have a 14 day free trial, including full access to features like the CSS quiz editor, as well as a 30 day money-back guarantee.
Any questions? Just give us a shout at hello@riddle.com – we look forward to hearing from you!
