CSS code snippet examples

You can copy, paste, and edit any of these code snippets below to customize your Riddle.

Formatting options

Change font and color of the button below choices

You can change the color of the button in line 13: background-color by adding you own color value (ideally a HEX value).
You can change the text by changing line 9: content: "Show me my results".

.multiple-choice .btn-primary {
text-indent: -100vw;
visibility: hidden;
display:block;
line-height: 0;
}

.multiple-choice .btn-primary::after {
content: "Show me my results";
visibility: visible;text-indent: 0;display:block;background-color: red;padding: 25px;border: none;border-radius: 0.5rem;color: #fff;font-size: 1.6rem;font-weight: 600;transition: all .1s;
}

Customize text entered in form block fields

.form-control {
color: red;
}

Center text in answer choices

.quiz-choices .choice .choice-content .choice-title {
align-self: center;
margin-bottom: 0;
text-align: center;
}

Change "Right" / "Wrong" text for quiz questions

h2.correct span {
visibility: hidden;
}

h2.correct span::after {
content: "this is correct";
visibility: visible;
margin-left: -60px;
}

h2.incorrect span {
visibility: hidden;
}

h2.incorrect span::after {
content: "this is wrong";
visibility: visible;
margin-left: -60px;
}

Change color of paragraph and links in the description text

.description p a {
    color: #FFFFFF;
}

Change color of "Correct" / "Wrong" text

.correct-wrong-banner-wrapper .correct-wrong-banner .correct {
    color: #98c9a4;
}
.correct-wrong-banner-wrapper .correct-wrong-banner .correct {
    color: #ea99a2;
}

Change color of the % bar for "Correct" / "Wrong" answers

.quiz-choices .choice .choice-content .percentage-bar.correct:after {
    background: #98c9a4;
}
.quiz-choices .choice .choice-content .percentage-bar.wrong:after {
    background: #ea99a2;
}

Hide elements

Hide attribution

.riddle .attribution {
display:none!important;
}

Hide % and text oval for showing percentages in poll / survey content blocks

voting-result, .correct-tick {
display: none!important;
}

Hide "Lives" / "Found" section for Tap & find block

.display {
display: none!important;
}

Move custom logo above the Riddle in our Classic Layout and make the background of the logo frame white

This is important if the footer and the logo should have different background colors.

.custom-logo-wrapper {
background-color: #FFFFFF!important;
}

.custom-logo-wrapper {
position: fixed!important;
top: 0;
width: 100%;
}

.poll {
padding-top: 131px;
}

Reaction poll block

Change text on the reaction poll slider options (default "Negative" and "Positive")

.instructions > p.direction > span:nth-child(1) {
visibility: hidden;
}

.instructions > p.direction > span:nth-child(1)::before {
visibility: visible;
content: "My TEXT for Negative"!important;
right: 18px;
position: absolute;
}

.instructions > p.direction > span:nth-child(3) {
visibility: hidden;
}

.instructions > p.direction > span:nth-child(3)::before {
visibility: visible;
content: "My Text for Positive"!important;
right: 18px;
position: absolute;
}

Personality test

Move intro text for the "Other Results" above the main result

This example can be used for a variety of use cases. As long as all elements are in the same column, you can re-order them by giving them an explicit order in the flex box. The result image has order 0. You need to start the new order with 1 unless you also want to place the image in a different spot.

.intro {
padding: 0px!important;
order: 1;
background-color: white!important;
color: black!important;
align: left!important;
}

h1 {
order: 2;
}

p {
order: 3;
}

.other-results {
order: 4;
}

Quiz

Customize text for "Correct" / "Wrong" messages

h2.correct span{
visibility: hidden;
}

h2.correct span::after {
content: "this is correct";
visibility: visible;
margin-left: -60px;
}

h2.incorrect span{
visibility: hidden;
}

h2.incorrect span::after {
content: "this is wrong";
visibility: visible;
margin-left: -60px;
}

Videos

Hide video controls for MP4 videos

.vjs-control-bar {
display: none!important; 
}

Display uploaded MP4 video at full width

.block[data-block-type="Ad"] {
padding: 0px!important;
}

Important

You must add .riddle to any selector, i.e. .riddle .btn.btn-primary, not button.btn.btn-primary.

Table of Contents