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

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

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

Capitalize first letter of each word on buttons

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

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

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.

Important

These snippets are examples and sometimes require extra tailoring to suit your needs.

You sometimes need to add .riddle to a selectoYou sometimes need to add .riddle to a selector, i.e. .riddle .btn.btn-primary, not button.btn.btn-primary.r, i.e. .riddle .btn.btn-primary, not button.btn.btn-primary.

Table of Contents