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;
}