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;
}
Custom logo
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.