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

Customize gap between questions for answer fields

.choices.is-columns {
        gap: 1px!important;
        margin-bottom: 4px!important;
 }
.choice {
        margin: 0px!important;

}

Change text color in form block fields

.form-control, .form-control: focus {
        color: #4f4bc0;
}

Center text in quiz answer choices

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

Centre text for general answer choices

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

Restyle "Skip" button

.btn[data-test="skip-btn"] {
    background-color: rgba(0,0,0,0)!important;
    font-size: 1rem!important;
}

.form-actions {
    display: grid!important;
}

Capitalize first letter of the "Choose" button

.riddle .btn {
    text-transform: capitalize;
}

Make "Choose" button all lower case

.btn {
    text-transform: lowercase;
}

Add wave layout to bottom of Riddle

.block > .main-media::after {
    content: "";
    display: block;
    width: 100%;
    height: 8vw;
    position: absolute;
    transform: translateY(calc(-100% + 1px));
    background-color: var(--color-bg);
    z-index: 2;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none' %3E%3Cpath d='M0 0 c150 0 200 45 300 45 c100 0 150 -45 300 -45 v50 H0z' /%3E%3C/svg%3E");

}

.riddle .riddle-type-component {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

footer::before {
    content: "";
    display: block;
    width: 100%;
    height: 8vw;
    background-color: var(--color-bg);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 50' preserveAspectRatio='none' %3E%3Cpath d='M0 0 c150 0 200 45 300 45 c100 0 150 -45 300 -45 v50 H0z' /%3E%3C/svg%3E");
    transform: rotate(180deg);
    border-top-left-radius: var(--riddle-border-radius);
    border-top-right-radius: var(--riddle-border-radius);
    margin-top: -2px;
}

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

Hide choice dots in Classic and Epic layout

.choices:not(.multi-choice) .choice:before {
    display: none;
}

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

General information

You can add CSS for any specific block by starting the code with .block-id-xx. You can hover over any block icon to find the block ID number.

You can add CSS to a specific device type by starting the code with @media only screen and.

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.

Table of Contents