CSS code snippet examples
You can copy, paste, and edit any of these code snippets below to customize your Riddle.
Formatting options
Change font, color, and text of the button below choices
Change the color of the button in line 13: background-color by adding you own color value (ideally a HEX value).
Change the text by changing line 9: content: "Show me my results".
.multiple - choice.btn - primary {
text - indent: -100 vw;
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: #4f4bc0;
padding: 25px;
border: none;
border-radius: 0.5rem;
color: # 4 F4BC0;
font - size: 1.6 rem;
font - weight: 600;
transition: all .1 s;
}
Change text color in form block fields
.form - control, .form - control: focus {
color: #4f4bc0;
}
Center text in answer choices
.quiz - choices.choice.choice - content.choice - title {
align - self: center;
margin - bottom: 0;
text - align: center;
}
Center title on result page in Classic layout
.block h1 {
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: -60 px;
}
h2.incorrect span {
visibility: hidden;
}
h2.incorrect span::after {
content: "This is wrong";
visibility: visible;
margin - left: -60 px;
}
Change color of paragraph and links in the description text
.description p a {
color: #4f4bc0;
}
Change color of "Correct" / "Wrong" text
.correct-wrong-banner-wrapper .correct-wrong-banner .correct {
color: #98c9a4;
}
.correct-wrong-banner-wrapper .correct-wrong-banner .wrong {
color: #ea99a2;
}
Change color of % bar for "Correct" / "Wrong" answers in Single choice block
.quiz-choices .choice .choice-content .percentage-bar.correct:after {
background: #98c9a4;
}
.quiz-choices .choice .choice-content .percentage-bar.wrong:after {
background: #ea99a2;
}
Change color of social share buttons
.share-button-wrapper .share-button svg path {
fill: #f0725c!important;
}
Change text color in free text block
.text - entry - wrapper.input {
color: #ffffff!important;
}
Change background color in an answer field
.form-control,
.form-control:focus {
background: #ffffff;
color: #ffffff;
}
Change answer option text color when hovering
.choice-content:hover, .choice-title:hover {
color: white!important;
}
Hide elements
Hide attribution
.attribution {
display: none!important;
}
Hide % and text oval for showing percentages in poll / survey content blocks
voting - result, .correct - tick {
display: none!important;
}
Hide "Guesses" / "Found" section for Text entry block
.lives - wrapper {
display: none!important;
}
Hide "Guesses" / "Found" section for Tap & find block
.display {
display: none!important;
}
Hide "Correct" / "Wrong" text after tick / cross
h2.correct span {
visibility: hidden;
}
h2.incorrect span {
visibility: hidden;
}
Hide numeric block result
voting-result .number {
display: none;
}
Custom logo
Move custom logo above the Riddle in the 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: 131 px;
}
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: 18 px;
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;
left: 18 px;
position: absolute;
}
Change the position of the reaction poll slider options
Change the number of pixels in lines 8 and 19. At 320px the slider options will be directly under the left and right circles.
.instructions > p.direction > span:nth-child(1) {
visibility: hidden;
}
.instructions > p.direction > span:nth-child(1)::before {
visibility: visible;
content: "Negative"!important;
right: 320px;
position: absolute;
}
.instructions > p.direction > span:nth-child(3) {
visibility: hidden;
}
.instructions > p.direction > span:nth-child(3)::before {
visibility: visible;
content: "Positive"!important;
left: 320px;
position: absolute;
}
Change the reaction poll slider hint text
.instruction - hint: after {
content: 'Test';
text - indent: 0;
display: block;
line - height: initial;
}
Hide "Positive" / "Negative" text under reaction poll slider
.instructions > p.direction > span: nth - child(1) {
visibility: hidden;
content: none!important;
}
.instructions > p.direction > span: nth - child(3) {
visibility: hidden;
content: none!important;
}
Hide reaction poll slider hint and dot
.instruction - hint: after {
content: none!important;
}
span.dot - middle {
visibility: hidden;
}
Hide number on pulsating dot
div.thumb {
visibility: hidden;
}
Hide number label in middle of reaction poll slider
p.label-text {
visibility: hidden;
}
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: 0 px!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: -60 px;
}
h2.incorrect span {
visibility: hidden;
}
h2.incorrect span::after {
content: "this is wrong";
visibility: visible;
margin - left: -60 px;
}
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: 0 px!important;
}
Important
These snippets are examples and sometimes require extra tailoring to suit your needs.
You sometimes need to add .riddle to a selector, i.e. .riddle .btn.btn-primary, not button.btn.btn-primary.