Blend Quizzes on Your Site with Riddle’s CSS Editor

3 min read

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 Style Override – it lets you seamlessly blend any quiz you create into your site experience.Quizzes are the most engaging type of content on Facebook.
– KissmetricsWe 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 the CSS Style Override

For customers on our Enterprise plan , you now have full control over almost every aspect of your Riddle:

  • Bullets
  • Buttons – round or square?
  • Fonts
  • Font colors
  • Background – use colors or background images

How can I change the CSS for an 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.

CSS Style OverrideIn this example, we changed the .riddle-frame element in the following way:

.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%;
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):

PGRpdiBjbGFzcz0icmlkZGxlX3RhcmdldCIgZGF0YS11cmw9Ii8vd3d3LnJpZGRsZS5jb20vYS82Njk4OSIgc3R5bGU9Im1hcmdpbjowIGF1dG87bWF4LXdpZHRoOjQ4MHB4OyI+PGRpdiBzdHlsZT0iZGlzcGxheTpub25lIj48c2VjdGlvbj48aDI+W0NTUyBFeGFtcGxlXSBXaGljaCBBcnNlbmFsIEludmluY2libGUgQXJlIFlvdT88L2gyPjxwPjxkaXY+SW4gMjAwMy8yMDA0LCBtYWdpYyBoYXBwZW5lZCwgYXMgdGhlIEd1bm5lcnMgd2VudCB1bmJlYXRlbiBpbiB0aGUgUHJlbWllciBMZWFndWUsIHNvbWV0aGluZyBubyB0b3AgZmxpZ2h0IEJyaXRpc2ggc2lkZSBoYWQgZG9uZSBmb3IgMTE1IHllYXJzLiBBcyB3ZSBsb29rIGJhY2sgb24gYSBkcmVhbSBzZWFzb24sIHdoaWNoIG1lbWJlciBvZiB0aGF0IGRyZWFtIHRlYW0gaXMgbW9zdCBsaWtlIHlvdT8gPC9kaXY+PGRpdj48YnI+PC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+VGhpZXJyeSBIZW5yeTwvaDM+PHA+PGRpdj5Zb3UncmUgYSBzaWxreSBzbW9vdGggb3BlcmF0b3Igd2hvIGJyaW5ncyBjcmVhdGl2aXR5LCBwYWNlLCBhbmQgYSBjdXR0aW5nIGVkZ2UgdG8gYW55IHRlYW0uIE91dHdhcmRseSwgeW91J3JlIGNhbG0gdW5kZXIgcHJlc3N1cmUsIGJ1dCBiZW5lYXRoIHRoZSBzdXJmYWNlIHlvdSBoYXZlIHJvY2sgc29saWQgZHJpdmUgYW5kIGRldGVybWluYXRpb24sIGFuZCB3b24ndCB0YWtlIGNyYXAgZnJvbSBhbnlib2R5LiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5QYXRyaWNrIFZpZXJhPC9oMz48cD48ZGl2PllvdSdyZSBhIG5hdHVyYWwgbGVhZGVyIHdobyBpbnNwaXJlcyBldmVyeW9uZSBhcm91bmQgeW91LCBhbmQgYXJlIGFibGUgdG8gYnJpbmcgdGhlIGJlc3QgcGVyZm9ybWFuY2VzIG91dCBpbiBhbnlvbmUgeW91IHdvcmsgd2l0aCwgcmVnYXJkbGVzcyBvZiB0aGVpciB0YWxlbnQgbGV2ZWwuIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPkFzaGxleSBDb2xlPC9oMz48cD48ZGl2PllvdSdyZSBhIGNvbXBldGl0aXZlIHBlcnNvbiB3aG8gZG9lc24ndCBtaW5kIG1peGluZyB0aGluZ3MgdXAgdG8gZ2V0IHRoZSBqb2IgZG9uZS4gRmllcnkgYXQgdGltZXMsIHlvdSdyZSB2YWx1ZWQgYnkgdGVhbW1hdGVzIGFuZCBjb2xsZWFndWVzLCBldmVuIGlmIHlvdSBkaXZpZGUgb3RoZXJzLiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5EZW5uaXMgQmVyZ2thbXA8L2gzPjxwPjxkaXY+WW91J3JlIGEgY3JlYXRpdmUgc291bCB3aG8gc29tZXRpbWVzIGdldHMgb3Zlcmxvb2tlZCBiZWNhdXNlIG9mIHlvdXIgY29vbCBhbmQgY2FsbSBuYXR1cmUuIFlvdSBoYXZlIHN1cGVyc3RhciB0YWxlbnQgYW5kIHRoZSBhYmlsaXR5IHRvIGluc3BpcmUgY29sbGVhZ3VlcyB0byBncmVhdGVyIHRoaW5ncyB0aHJvdWdoIHlvdXIgZXhhbXBsZSBhbmQgZGVlZHMuPC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+RnJlZGRpZSBManVuZ2Jlcmc8L2gzPjxwPjxkaXY+WW91J3JlIGEgZnJlZS1zcGlyaXRlZCBhZHZlbnR1cmVyIGJ5IG5hdHVyZSwgc29tZW9uZSB3aG8gZXhjZWxzIGJ5IGRvaW5nIHRoaW5ncyBhIGxpdHRsZSBkaWZmZXJlbnRseSBmcm9tIGV2ZXJ5b25lIGVsc2UuIFlvdSdyZSB3aWxsaW5nIHRvIGdvIHlvdXIgb3duIHdheSBldmVuIHdoZW4geW91J3JlIHBhcnQgb2YgYSBwYXJ0aWN1bGFyIHN5c3RlbSwgYW5kIGhhdmUgdGhlIHRhbGVudCB0byBmaW5kIHN1Y2Nlc3MgYnkgYnJlYWtpbmcgdGhlIHJ1bGVzLiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5Tb2wgQ2FtcGJlbGw8L2gzPjxwPjxkaXY+WW91J3JlIHNvbGlkIGFuZCBkZXBlbmRhYmxlLCBpZiBhIGxpdHRsZSBjb25zZXJ2YXRpdmUgaW4gYXBwcm9hY2ggYXQgdGltZXMuIFlvdSBsZWFkIGJ5IGV4YW1wbGUgYW5kIGFyZSB3aWxsaW5nIHRvIHB1dCBpbiB0aGUgaGFyZCB5YXJkcy4gQWx0aG91Z2ggeW91IGNvbnNpZGVyIHlvdXJzZWxmIGEgbG95YWwgcGVyc29uLCB5b3UgYXJlIHdpbGxpbmcgdG8gY2hhbmdlIGRpcmVjdGlvbiBvciBzZWVrIG5ldyBvcHBvcnR1bml0aWVzIGlmIG5lZWRlZC4gPC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+SmVucyBMZWhtYW48L2gzPjxwPjxkaXY+WW91J3JlIHNvbGlkIGFuZCBkZXBlbmRhYmxlLCBhbmQgaGF2ZSBhIGtuYWNrIGZvciBmaXhpbmcgbWlzdGFrZXMgYW5kIGNsZWFuaW5nIHVwIG90aGVyIHBlb3BsZSdzIG1lc3Nlcy4gU29tZXRpbWVzIHlvdSBmZWVsIGxpa2UgYW4gdW5zdW5nIGhlcm8sIGJ1dCBtYW55IHBlb3BsZSB2YWx1ZSB5b3UgYXMgYSBjb29sLCBjYWxtLCBhbmQgY29sbGVjdGVkIHRyb3VibGUtc2hvb3RlciB3aG8gZ2V0cyB0aGUgam9iIGRvbmUuIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPlJvYmVydCBQaXJlczwvaDM+PHA+PGRpdj5Zb3UncmUgYSB0YWxlbnRlZCBpbmRpdmlkdWFsIHdobyBzdWNjZWVkcyB3aGlsZSBsb29raW5nIGVsZWdhbnQgYW5kIHVucnVmZmxlZC4gWW91IG1ha2UgYSBiaWcgZGlmZmVyZW5jZSB0byBhbnkgdGVhbSB5b3UncmUgcGFydCBvZiwgYW5kIGFyZSB3ZWxsLWxpa2VkIGJ5IG1hbnkgcGVvcGxlLiBZb3UgaGF2ZSBhIGZpZXJ5IHBlcnNvbmFsaXR5IGF0IHRpbWVzLCBidXQgaXQncyBqdXN0IHlvdXIgcGFzc2lvbiBjb21pbmcgIHRocm91Z2guIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoYXQncyB0aGUga2V5IHRvIHdpbm5pbmc/PC9oMz48cD5Sb2NrLXNvbGlkIGRlZmVuc2U8L3A+PHA+Q3JlYXRpdmUgYXR0YWNrPC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+V2hpY2ggd291bGQgeW91IHJhdGhlciBiZT88L2gzPjxwPldlbGwtbGlrZWQ8L3A+PHA+V2VsbC1yZXNwZWN0ZWQ8L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5XaGVyZSB3b3VsZCB5b3UgcmF0aGVyIHdvcms/PC9oMz48cD5JbiB5b3VyIGhvbWUgY291bnRyeTwvcD48cD5PdmVyc2VhczwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoaWNoIGRvIHlvdSBwcmVmZXIgdG8gcmVseSBvbj88L2gzPjxwPkNyZWF0aXZpdHkgYW5kIHdvcmtpbmcgdGhpbmdzIG91dCBvbiB0aGUgZ288L3A+PHA+U3RyYXRlZ3ksIHBsYW5zIGFuZCBzdHJ1Y3R1cmU8L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5PbiBhIHNjYWxlIG9mIDAtNSwgd2hlcmUgMCBpcyBxdWlldCBhbmQgc2h5IGFuZCA1IGlzIHRoZSBsaWZlIG9mIHRoZSBwYXJ0eSwgeW91J2QgYmUgd2hpY2ggc2NvcmU/PC9oMz48cD4wLTE8L3A+PHA+Mi0zPC9wPjxwPjQtNTwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldobyB3b3VsZCB5b3UgbGVhc3QgbGlrZSB0byBzZWUgd2luIHRoZSBQcmVtaWVyIExlYWd1ZT88L2gzPjxwPlRvdHRlbmhhbTwvcD48cD5DaGVsc2VhPC9wPjxwPkxpdmVycG9vbDwvcD48cD5NYW5jaGVzdGVyIFVuaXRlZDwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoZW4gc3VkZGVuIGNoYW5nZSBoYXBwZW5zLCBob3cgZG8geW91IHRlbmQgdG8gcmVhY3Q/PC9oMz48cD5JIGFkYXB0IHF1aWNrbHk8L3A+PHA+SSB0YWtlIGEgbW9tZW50IHRvIGdhdGhlciBteXNlbGYgYmVmb3JlIGFkanVzdGluZzwvcD48cD5JIGdldCB0aHJvd24gaW50byBjaGFvcyBmb3IgYSBiaXQsIGJlZm9yZSBnZXR0aW5nIG15IGhlYWQgYXJvdW5kIGl0PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+V2hlbiBpdCBjb21lcyB0byBydWxlcyBhbmQgcmVndWxhdGlvbnMsIHBvbGljaWVzIGFuZCBwbGFucywgeW91IGJlbGlldmU6PC9oMz48cD5TdGlja2luZyB0byB0aGUgcnVsZXMgd2lsbCBoYXZlIGEgYmV0dGVyIG91dGNvbWU8L3A+PHA+U29tZXRpbWVzIHlvdSBoYXZlIHRvIGdvIG91dHNpZGUgdGhlIHJ1bGVzIHRvIGRvIGEgYmV0dGVyIGpvYjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoaWNoIEV1cm9wZWFuIGNvdW50cnkgd291bGQgeW91IG1vc3QgbGlrZSB0byB2aXNpdD88L2gzPjxwPkZyYW5jZTwvcD48cD5Td2VkZW48L3A+PHA+R2VybWFueTwvcD48cD5JdGFseTwvcD48cD5Ib2xsYW5kPC9wPjxwPlNwYWluPC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+WUVTIE9SIE5POiBZb3UgbGlrZSBqb2JzIGFuZCB0YXNrcyB0aGF0IGFyZSBmYXN0LXBhY2VkIHdpdGggdGlnaHQgZGVhZGxpbmVzPC9oMz48cD5ZRVM8L3A+PHA+Tk88L3A+PC9zZWN0aW9uPjwvZGl2PjxkaXYgY2xhc3M9InJpZC1sb2FkIiBzdHlsZT0iYmFja2dyb3VuZDojMDAwIHVybCgvL3d3dy5yaWRkbGUuY29tL2Fzc2V0cy9pbWcvbG9hZGVyLmdpZikgbm8tcmVwZWF0IGNlbnRlci8xMCU7cGFkZGluZy10b3A6NTYlO2JvcmRlci1yYWRpdXM6NXB4Ij48L2Rpdj48L2Rpdj48c2NyaXB0IHNyYz0iLy93d3cucmlkZGxlLmNvbS9maWxlcy9qcy9lbWJlZC5qcyI+PC9zY3JpcHQ+

New Riddle (with CSS modifications):

PGRpdiBjbGFzcz0icmlkZGxlX3RhcmdldCIgZGF0YS11cmw9Ii8vd3d3LnJpZGRsZS5jb20vYS82Njk3MSIgc3R5bGU9Im1hcmdpbjowIGF1dG87bWF4LXdpZHRoOjQ4MHB4OyI+PGRpdiBzdHlsZT0iZGlzcGxheTpub25lIj48c2VjdGlvbj48aDI+W0NTUyBFeGFtcGxlXSBXaGljaCBBcnNlbmFsIEludmluY2libGUgQXJlIFlvdT88L2gyPjxwPjxkaXY+SW4gMjAwMy8yMDA0LCBtYWdpYyBoYXBwZW5lZCwgYXMgdGhlIEd1bm5lcnMgd2VudCB1bmJlYXRlbiBpbiB0aGUgUHJlbWllciBMZWFndWUsIHNvbWV0aGluZyBubyB0b3AgZmxpZ2h0IEJyaXRpc2ggc2lkZSBoYWQgZG9uZSBmb3IgMTE1IHllYXJzLiBBcyB3ZSBsb29rIGJhY2sgb24gYSBkcmVhbSBzZWFzb24sIHdoaWNoIG1lbWJlciBvZiB0aGF0IGRyZWFtIHRlYW0gaXMgbW9zdCBsaWtlIHlvdT8gPC9kaXY+PGRpdj48YnI+PC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+VGhpZXJyeSBIZW5yeTwvaDM+PHA+PGRpdj5Zb3UncmUgYSBzaWxreSBzbW9vdGggb3BlcmF0b3Igd2hvIGJyaW5ncyBjcmVhdGl2aXR5LCBwYWNlLCBhbmQgYSBjdXR0aW5nIGVkZ2UgdG8gYW55IHRlYW0uIE91dHdhcmRseSwgeW91J3JlIGNhbG0gdW5kZXIgcHJlc3N1cmUsIGJ1dCBiZW5lYXRoIHRoZSBzdXJmYWNlIHlvdSBoYXZlIHJvY2sgc29saWQgZHJpdmUgYW5kIGRldGVybWluYXRpb24sIGFuZCB3b24ndCB0YWtlIGNyYXAgZnJvbSBhbnlib2R5LiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5QYXRyaWNrIFZpZXJhPC9oMz48cD48ZGl2PllvdSdyZSBhIG5hdHVyYWwgbGVhZGVyIHdobyBpbnNwaXJlcyBldmVyeW9uZSBhcm91bmQgeW91LCBhbmQgYXJlIGFibGUgdG8gYnJpbmcgdGhlIGJlc3QgcGVyZm9ybWFuY2VzIG91dCBpbiBhbnlvbmUgeW91IHdvcmsgd2l0aCwgcmVnYXJkbGVzcyBvZiB0aGVpciB0YWxlbnQgbGV2ZWwuIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPkFzaGxleSBDb2xlPC9oMz48cD48ZGl2PllvdSdyZSBhIGNvbXBldGl0aXZlIHBlcnNvbiB3aG8gZG9lc24ndCBtaW5kIG1peGluZyB0aGluZ3MgdXAgdG8gZ2V0IHRoZSBqb2IgZG9uZS4gRmllcnkgYXQgdGltZXMsIHlvdSdyZSB2YWx1ZWQgYnkgdGVhbW1hdGVzIGFuZCBjb2xsZWFndWVzLCBldmVuIGlmIHlvdSBkaXZpZGUgb3RoZXJzLiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5EZW5uaXMgQmVyZ2thbXA8L2gzPjxwPjxkaXY+WW91J3JlIGEgY3JlYXRpdmUgc291bCB3aG8gc29tZXRpbWVzIGdldHMgb3Zlcmxvb2tlZCBiZWNhdXNlIG9mIHlvdXIgY29vbCBhbmQgY2FsbSBuYXR1cmUuIFlvdSBoYXZlIHN1cGVyc3RhciB0YWxlbnQgYW5kIHRoZSBhYmlsaXR5IHRvIGluc3BpcmUgY29sbGVhZ3VlcyB0byBncmVhdGVyIHRoaW5ncyB0aHJvdWdoIHlvdXIgZXhhbXBsZSBhbmQgZGVlZHMuPC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+RnJlZGRpZSBManVuZ2Jlcmc8L2gzPjxwPjxkaXY+WW91J3JlIGEgZnJlZS1zcGlyaXRlZCBhZHZlbnR1cmVyIGJ5IG5hdHVyZSwgc29tZW9uZSB3aG8gZXhjZWxzIGJ5IGRvaW5nIHRoaW5ncyBhIGxpdHRsZSBkaWZmZXJlbnRseSBmcm9tIGV2ZXJ5b25lIGVsc2UuIFlvdSdyZSB3aWxsaW5nIHRvIGdvIHlvdXIgb3duIHdheSBldmVuIHdoZW4geW91J3JlIHBhcnQgb2YgYSBwYXJ0aWN1bGFyIHN5c3RlbSwgYW5kIGhhdmUgdGhlIHRhbGVudCB0byBmaW5kIHN1Y2Nlc3MgYnkgYnJlYWtpbmcgdGhlIHJ1bGVzLiA8L2Rpdj48L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5Tb2wgQ2FtcGJlbGw8L2gzPjxwPjxkaXY+WW91J3JlIHNvbGlkIGFuZCBkZXBlbmRhYmxlLCBpZiBhIGxpdHRsZSBjb25zZXJ2YXRpdmUgaW4gYXBwcm9hY2ggYXQgdGltZXMuIFlvdSBsZWFkIGJ5IGV4YW1wbGUgYW5kIGFyZSB3aWxsaW5nIHRvIHB1dCBpbiB0aGUgaGFyZCB5YXJkcy4gQWx0aG91Z2ggeW91IGNvbnNpZGVyIHlvdXJzZWxmIGEgbG95YWwgcGVyc29uLCB5b3UgYXJlIHdpbGxpbmcgdG8gY2hhbmdlIGRpcmVjdGlvbiBvciBzZWVrIG5ldyBvcHBvcnR1bml0aWVzIGlmIG5lZWRlZC4gPC9kaXY+PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+SmVucyBMZWhtYW48L2gzPjxwPjxkaXY+WW91J3JlIHNvbGlkIGFuZCBkZXBlbmRhYmxlLCBhbmQgaGF2ZSBhIGtuYWNrIGZvciBmaXhpbmcgbWlzdGFrZXMgYW5kIGNsZWFuaW5nIHVwIG90aGVyIHBlb3BsZSdzIG1lc3Nlcy4gU29tZXRpbWVzIHlvdSBmZWVsIGxpa2UgYW4gdW5zdW5nIGhlcm8sIGJ1dCBtYW55IHBlb3BsZSB2YWx1ZSB5b3UgYXMgYSBjb29sLCBjYWxtLCBhbmQgY29sbGVjdGVkIHRyb3VibGUtc2hvb3RlciB3aG8gZ2V0cyB0aGUgam9iIGRvbmUuIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPlJvYmVydCBQaXJlczwvaDM+PHA+PGRpdj5Zb3UncmUgYSB0YWxlbnRlZCBpbmRpdmlkdWFsIHdobyBzdWNjZWVkcyB3aGlsZSBsb29raW5nIGVsZWdhbnQgYW5kIHVucnVmZmxlZC4gWW91IG1ha2UgYSBiaWcgZGlmZmVyZW5jZSB0byBhbnkgdGVhbSB5b3UncmUgcGFydCBvZiwgYW5kIGFyZSB3ZWxsLWxpa2VkIGJ5IG1hbnkgcGVvcGxlLiBZb3UgaGF2ZSBhIGZpZXJ5IHBlcnNvbmFsaXR5IGF0IHRpbWVzLCBidXQgaXQncyBqdXN0IHlvdXIgcGFzc2lvbiBjb21pbmcgIHRocm91Z2guIDwvZGl2PjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoYXQncyB0aGUga2V5IHRvIHdpbm5pbmc/PC9oMz48cD5Sb2NrLXNvbGlkIGRlZmVuc2U8L3A+PHA+Q3JlYXRpdmUgYXR0YWNrPC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+V2hpY2ggd291bGQgeW91IHJhdGhlciBiZT88L2gzPjxwPldlbGwtbGlrZWQ8L3A+PHA+V2VsbC1yZXNwZWN0ZWQ8L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5XaGVyZSB3b3VsZCB5b3UgcmF0aGVyIHdvcms/PC9oMz48cD5JbiB5b3VyIGhvbWUgY291bnRyeTwvcD48cD5PdmVyc2VhczwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoaWNoIGRvIHlvdSBwcmVmZXIgdG8gcmVseSBvbj88L2gzPjxwPkNyZWF0aXZpdHkgYW5kIHdvcmtpbmcgdGhpbmdzIG91dCBvbiB0aGUgZ288L3A+PHA+U3RyYXRlZ3ksIHBsYW5zIGFuZCBzdHJ1Y3R1cmU8L3A+PC9zZWN0aW9uPjxzZWN0aW9uPjxoMz5PbiBhIHNjYWxlIG9mIDAtNSwgd2hlcmUgMCBpcyBxdWlldCBhbmQgc2h5IGFuZCA1IGlzIHRoZSBsaWZlIG9mIHRoZSBwYXJ0eSwgeW91J2QgYmUgd2hpY2ggc2NvcmU/PC9oMz48cD4wLTE8L3A+PHA+Mi0zPC9wPjxwPjQtNTwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldobyB3b3VsZCB5b3UgbGVhc3QgbGlrZSB0byBzZWUgd2luIHRoZSBQcmVtaWVyIExlYWd1ZT88L2gzPjxwPlRvdHRlbmhhbTwvcD48cD5DaGVsc2VhPC9wPjxwPkxpdmVycG9vbDwvcD48cD5NYW5jaGVzdGVyIFVuaXRlZDwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoZW4gc3VkZGVuIGNoYW5nZSBoYXBwZW5zLCBob3cgZG8geW91IHRlbmQgdG8gcmVhY3Q/PC9oMz48cD5JIGFkYXB0IHF1aWNrbHk8L3A+PHA+SSB0YWtlIGEgbW9tZW50IHRvIGdhdGhlciBteXNlbGYgYmVmb3JlIGFkanVzdGluZzwvcD48cD5JIGdldCB0aHJvd24gaW50byBjaGFvcyBmb3IgYSBiaXQsIGJlZm9yZSBnZXR0aW5nIG15IGhlYWQgYXJvdW5kIGl0PC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+V2hlbiBpdCBjb21lcyB0byBydWxlcyBhbmQgcmVndWxhdGlvbnMsIHBvbGljaWVzIGFuZCBwbGFucywgeW91IGJlbGlldmU6PC9oMz48cD5TdGlja2luZyB0byB0aGUgcnVsZXMgd2lsbCBoYXZlIGEgYmV0dGVyIG91dGNvbWU8L3A+PHA+U29tZXRpbWVzIHlvdSBoYXZlIHRvIGdvIG91dHNpZGUgdGhlIHJ1bGVzIHRvIGRvIGEgYmV0dGVyIGpvYjwvcD48L3NlY3Rpb24+PHNlY3Rpb24+PGgzPldoaWNoIEV1cm9wZWFuIGNvdW50cnkgd291bGQgeW91IG1vc3QgbGlrZSB0byB2aXNpdD88L2gzPjxwPkZyYW5jZTwvcD48cD5Td2VkZW48L3A+PHA+R2VybWFueTwvcD48cD5JdGFseTwvcD48cD5Ib2xsYW5kPC9wPjxwPlNwYWluPC9wPjwvc2VjdGlvbj48c2VjdGlvbj48aDM+WUVTIE9SIE5POiBZb3UgbGlrZSBqb2JzIGFuZCB0YXNrcyB0aGF0IGFyZSBmYXN0LXBhY2VkIHdpdGggdGlnaHQgZGVhZGxpbmVzPC9oMz48cD5ZRVM8L3A+PHA+Tk88L3A+PC9zZWN0aW9uPjwvZGl2PjxkaXYgY2xhc3M9InJpZC1sb2FkIiBzdHlsZT0iYmFja2dyb3VuZDojMDAwIHVybCgvL3d3dy5yaWRkbGUuY29tL2Fzc2V0cy9pbWcvbG9hZGVyLmdpZikgbm8tcmVwZWF0IGNlbnRlci8xMCU7cGFkZGluZy10b3A6NTYlO2JvcmRlci1yYWRpdXM6NXB4Ij48L2Rpdj48L2Rpdj48c2NyaXB0IHNyYz0iLy93d3cucmlkZGxlLmNvbS9maWxlcy9qcy9lbWJlZC5qcyI+PC9zY3JpcHQ+

You can take the custom CSS styling extremely far if you like.

Check out the example below, which looks similar to the awesome quizzes found on JustFab.com

It uses Custom CSS in a personality test to align image based questions in one row instead of in blocks of 2 questions per line.

Jmx0O2RpdiBjbGFzcz0mcXVvdDtyaWRkbGVfdGFyZ2V0JnF1b3Q7IGRhdGEtcmlkLWlkPSZxdW90OzEwMDQxOCZxdW90OyBkYXRhLWZnPSZxdW90OyMxNDg2Q0QmcXVvdDsgZGF0YS1iZz0mcXVvdDsjRkZGRkZGJnF1b3Q7IHN0eWxlPSZxdW90O21hcmdpbjowIGF1dG87bWF4LXdpZHRoOjEwMCU7d2lkdGg6OTYwcHg7JnF1b3Q7Jmd0OwombHQ7c2NyaXB0IHNyYz0mcXVvdDtodHRwczovL3d3dy5yaWRkbGUuY29tL2ZpbGVzL2pzL2VtYmVkLmpzJnF1b3Q7Jmd0OyZsdDsvc2NyaXB0Jmd0OwombHQ7aWZyYW1lIHN0eWxlPSZxdW90O3dpZHRoOjEwMCU7aGVpZ2h0OjMwMHB4O2JvcmRlcjoxcHggc29saWQgI2NmY2ZjZjsmcXVvdDsgc3JjPSZxdW90O2h0dHBzOi8vd3d3LnJpZGRsZS5jb20vYS8xMDA0MTg/JnF1b3Q7Jmd0OyZsdDtzZWN0aW9uJmd0OyZsdDsvc2VjdGlvbiZndDsmbHQ7c2VjdGlvbiZndDsmbHQ7aDImZ3Q7U3BvcnR5Jmx0Oy9oMiZndDsmbHQ7cCZndDsmbHQ7ZGl2Jmd0O1lvdXIgc2hvZSBzdHlsZSBpcyBzcG9ydHkuJmx0Oy9kaXYmZ3Q7Jmx0O2RpdiZndDtJZiB5b3UgbGlrZSB0aGlzIHF1aXosIHNpZ24gdXAgYXQgJmx0O2EgaHJlZj0mcXVvdDtodHRwOi8vcmlkZGxlLmNvbSZxdW90OyB0YXJnZXQ9JnF1b3Q7X2JsYW5rJnF1b3Q7Jmd0O3JpZGRsZS5jb20mbHQ7L2EmZ3Q7IGFuZCBjcmVhdGUgeW91ciBvd24gbm93LiZsdDsvZGl2Jmd0OyZsdDtkaXYmZ3Q7Jmx0O2JyJmd0OyZsdDsvZGl2Jmd0OyZsdDsvcCZndDsmbHQ7L3NlY3Rpb24mZ3Q7Jmx0O3NlY3Rpb24mZ3Q7Jmx0O2gzJmd0O0NsYXNzeSZsdDsvaDMmZ3Q7Jmx0O3AmZ3Q7Jmx0O2RpdiZndDtZb3VyIHNob2Ugc3R5bGUgaXMgY2xhc3N5LiZsdDsvZGl2Jmd0OyZsdDtkaXYmZ3Q7SWYgeW91IGxpa2UgdGhpcyBxdWl6LCBzaWduIHVwIGF0ICZsdDthIGhyZWY9JnF1b3Q7aHR0cDovL3JpZGRsZS5jb20vJnF1b3Q7IHRhcmdldD0mcXVvdDtfYmxhbmsmcXVvdDsmZ3Q7cmlkZGxlLmNvbSZsdDsvYSZndDsgYW5kIGNyZWF0ZSB5b3VyIG93biBub3cuJmx0Oy9kaXYmZ3Q7Jmx0Oy9wJmd0OyZsdDsvc2VjdGlvbiZndDsmbHQ7c2VjdGlvbiZndDsmbHQ7aDImZ3Q7UGljayBhIHNob2UmbHQ7L2gyJmd0OyZsdDsvc2VjdGlvbiZndDsmbHQ7L2lmcmFtZSZndDsKJmx0Oy9kaXYmZ3Q7

The CSS used to achieve this in a personality test is:

.image-choice {
float: left;
width: 23%;
margin-top: 2%;
margin-left: 1%;
}
.image-choice:nth-child(odd) {
margin-right: 0px;
}

If you want to show more than 4 images in one row, just adjust the width. To show 5 images you would specify the width as 19%. To show 3 images change it to 32%.

Want some free help creating a custom CSS look/feel for your Riddles? 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 – and you’ll be all set.

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, and a 30 day money-back guarantee.

Any questions? Just give us a shout at hello@riddle.com – we look forward to hearing from you!

Get your free e-Book

No login required. Just download our Quizmaster book and learn how to use quizzes for your marketing funnles
free
Scroll to Top