CSS editor – how can I use?
We totally get it. Sure, our Riddle quizzes look good embedded on your site – but sometimes you want total creative control.
That’s where our CSS Editor comes in.
As part of our Team plan, you can change virtually every visual element of your Riddles.
- Want to get rid of the 1 px border around the quiz? No problem.
- How about changing the colors of your Facebook/Twitter icons. Done.
- Display answers in one larger column instead of our default two columns.
Here’s a video walkthrough – including live quiz examples:
For more information and detailed ‘how to’ steps – we recommend checking out our ‘Customize (almost) anything with our CSS Editor’ blog post.
Want to try it out? Try this sample code you can copy/paste into the CSS Editor:
.modern-description { background-color: transparent; padding-top: 0; padding-bottom: 0; } h1.title, h1.title.txt2 { font-size: 26px; font-weight: 400; } .modern .choice.active, .text-choice, .modern .choice { margin-top: 0; border: 1px solid #EBEBEB; background-color: #fff; border-radius: 0; } .modern .choice.active:first-child, .text-choice:first-child, .modern .choice:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; } .modern .choice.active:last-child, .text-choice:last-child, .modern .choice:last-child { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .modern .choice.active:hover, .modern .choice.active.isMultipleChoice:focus{ background-color: #D5D5D5; } .modern .choice.active:active, .modern .choice.active.isMultipleChoice:active { background-color: #B7B7B7; } .modern .choice.active:hover .choice-overlay .circle { border: 2px solid #FFF; } .modern .choice .choice-overlay .circle { border: 2px solid #474E52; } .modern .page-count { text-align: left; padding: 5px 0 0 0; } .modern-header.wrong, .modern-header.right { background-color: transparent; } .correct-icon { color: #16C068; } .wrong-icon { color: #EA2D0E; } .modern .choice.chosen:not(.correct):not(.isMultipleChoice) .circle:not(.hide), .modern .choice.chosen.incorrectChosen .circle{ background-color: #EA2D0E; } .modern .choice.chosen.correct .circle:not(.hide) { background-color: #16C068; } .modern .choice-result { text-align: left; } .modern .choice-result .choice-icon { background-color: transparent; padding-left: 0; } .modern .choice-result .col-xs-12 { padding: 0; } .modern .choice .percentage-bar { background: #fff; border-radius: 0; } .modern .choice[tabindex='-1'].correct .percentage-bar { background: transparent; } .modern .choice:first-child .percentage-bar { border-top-left-radius: 5px; border-top-right-radius: 5px; } .modern .choice:last-child .percentage-bar { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .modern .choice[tabindex='-1'], .modern .choice[tabindex='-1'].correct.isMultipleChoice.correctNotChosen, .modern .choice[tabindex='-1'].chosen.isMultipleChoice.incorrectChosen { background: #FFF; } .modern .choice[tabindex='-1'].chosen { color: #474E52; } .modern .choice[tabindex='-1'].correct { background-color: #16C068; color: #FFF; } .modern .choice[tabindex='-1'].correct .choice-overlay .percent-number { width: 25px; height: 25px; border-radius: 50%; margin-right: 9px; } .modern .choice[tabindex='-1'].correct .choice-overlay .circle { border: 2px solid #FFF; } .modern .choice[tabindex='-1'].correct .txt2, .modern .choice[tabindex='-1'].correct h2 { font-weight: 400; } .modern-footer { background-color: transparent; padding-top: 0; } .modern-footer:first-child { padding-bottom: 0; } .modern-footer .col-xs-12 { padding: 0; } h1.result-score.txt2 { font-weight: 400; font-size: 26px; } .share-result h3 { font-size: 19px; font-weight: 400; } .share-result a { color: #fff; background-color: #474E52 !important; }