CSS code snippet examples

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

Change colors

Change text color of button below choices

.btn-primary {
        color: #4f4bc0;
}

Change description text color

.description {
    color: #4f4bc0;
}

Change text color in free text block

.text-entry-wrapper {
    color: #ffffff!important;
}

Change background color in a form field

.form-control-wrapper {
    background: #ffffff;
    color: #ffffff;
}

Change answer option text color when hovering

.choice-content:hover, .choice-title:hover {
    color: white!important;
}

Remove gray filter in a predictor

.predictor-card:before {
    filter: none!important;
}

.predictor-card .overlay {
    background-color: rgba(0,0,0,0)!important;
}

Change pagination colors

.top-bar .progress-wrapper .progress-tab.active {
background-color: white;
}
.top-bar .progress-wrapper .progress-tab {
background-color: grey;
}
.top-bar .pager {
background-color: white;
}

Change text

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

.correct-wrong-banner .banner-content span {
    visibility: hidden;
}
.correct-wrong-banner.correct .banner-content:after {
    content: "Right msg"!important;
    margin-top: -2rem!important;
}
.correct-wrong-banner.incorrect .banner-content:after {
    content: "Wrong msg"!important;
    margin-top: -2rem!important;
}

Change "Right"/"Wrong" messages for answer explanations

.explanation-wrapper .answer-explanation > h2 {
visibility: hidden;
position: relative;
}
.explanation-wrapper .answer-explanation.correct > h2:after {
content: "Correct Message"!important;
position: absolute;
top: 50%;
left: 0;
visibility: visible;
}
.explanation-wrapper .answer-explanation.incorrect > h2:after {
content: "Wrong Message"!important;
position: absolute;
top: 50%;
left: 0;
visibility: visible;
}

Other formatting options

Capitalize first letter of each word on buttons

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

Make buttons all lower case

.btn {
    text-transform: lowercase;
}

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".

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

.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 border around Riddle

.predictor-card .overlay {
    background-color: rgba(0,0,0,0)!important;
}

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

Move elements

Center text in quiz answer choices

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

Center text for general answer choices

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

Customize gap between questions for answer fields

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

}

Move radio button option box from right to left

.form-element-block.radio-buttons .radio-group .form-check.radio.form-check-label { 
    padding: 0.4rem 1.6rem 0.4rem 5.6rem; 
}

.form-element-block.radio-buttons .radio-group .form-check.radio .form-check-input {
    left: 1.6rem;
    right: auto;
}

Hide elements

Hide attribution

.attribution {
    display: none!important;
}

Hide 'Show question' button

.block .explanation-wrapper__navigation {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 1.2rem;

    .block-nav {
    .primary {
    justify-content: center;
}
}

> .btn {
display: none;
}

Change custom logo background color

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

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

Reaction poll block

Hide the reaction poll slider hint text

.instruction {
    display: none!important
}

Hide dot and number slider

.active-bullet .positive {
visibility: hidden;
}

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.

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