CSS editor
You can use CSS with Riddle to customize almost every visual aspect of your Riddles. Simply inspect your Riddle using your browser’s developer tools to find the correct CSS class, then restyle the class properties as needed.
Custom CSS lives in the Palette section under Custom CSS, so it is saved on a palette and applies to every Riddle that uses that palette. Prefix your selectors with .riddle so they win against the default styles. If you want to target specific text elements, you can also add custom classes in the Rich Text Editor for block titles and descriptions.
You can customize:
- Buttons
square buttons / make them rounder, wider, or narrower - Borders
remove / edit the border around your Riddles - Hover states
change the look or feel when mousing over or clicking any button - Font types and sizing
complete control over every text element - Quiz layout
one column or two, moving the logo
Add CSS
- Go to the Palette section.
- Scroll down and click on CREATE A PALETTE, type a name into the Type your preset name here field, and click on SAVE.
OR
Click on CUSTOMIZE next to one of you own palettes.
OR
Click on COPY AND EDIT PALETTE next to a default palette.
- Scroll down to Custom CSS and click on EDIT.
- Add your CSS into the grey field.
- Click on FORMAT CODE and then SAVE.
You will see the changes immediately in your Riddle.
Riddle CSS classes
Below are the most important Riddle elements you can change and the CSS selectors you need to make these changes.
| Element | Description | CSS selector | Possible changes |
|---|---|---|---|
| Complete Riddle | This is the highest element of every Riddle | .riddle | Most changes can be done via the palette (background, border-radius, …) You could set the font-size here globally. |
| Block | This is the first element below .riddle, containing everything within one block | .block | You could set a block background image: .block { background-image: url("https://downol.dr.dk/download/Eksponering/2024/Test/Riddle/bg2.jpg"); background-position: top left; background-repeat: no-repeat; } |
| Top bar | This includes the pagination (page counter, progress bar) as well as timers if enabled | .top-bar | You can hide the top bar by turning off pagination and timers. |
| Block Media | Block media, set in the Creator | .main-media | / |
| Title | Title of each block, set in the Creator | .title | Color and font is set in palette. You can customize the font-size, font-weight, ... |
| Description | Description of each block, set in the Creator | .description | Color and font is set in palette. You can customize the font-size, font-weight, ... |
| Buttons | All buttons in the Embed (Start, Choose, Submit, …) | .btn-primary | Button colors can be set in the palette. You can customize border-radius, font-size, text-transfrom, padding, … |
| Footer | Area below the content, only showing if Footer text or custom logo are added in the "Branding" section in "Settings" | .custom-footer | Background is set in the palette, logo alignment is set in the settings. The footer text behaves according to the logo alignment. |
| Block name pill | "Pill" that gives instructions to your audience | .block-type-pill | Can be disabled in the palette. Colors are taken from "Button color" and "Button text color". |
| Choices | Choices in questions | .choices | Set the margin-top or margin-bottom, gap between items, specific background-color if needed. |
| Choice element | One single element within ".choices" | .choices .choice-content | Everything here can be set via palette (color, background-color, hover / focus / selected state). |
| Voting result | The voting result contains information about whether a choice is right / wrong (Quiz) and how many people voted for it. | .choices .choice .choice-content .voting-result | Currently, hiding the absolute number of votes, but this will soon work via a setting. |
| Answer explanation | Explanation after your audience voted | .answer-explanation | Colors here are taken from positive / negative colors. |
Code example: change font color in form blocks
This gives you control over the color of the text entered into form blocks.
.riddle .form-control {
color: red;
}
Code example: center text in answer fields
This centers the text in each answer option.
.riddle .quiz-choices .choice .choice-content .choice-title {
align-self: center; margin-bottom: 0; text-align: center;
}
Note: Add .riddle to any CSS selector, e.g .riddle button.btn.btn-primary
For more code examples, go to CSS code snippet examples.
If you're new to CSS, here's a good introduction on how to get started.
Frequently asked questions
Where do I add custom CSS to a Riddle?
In the Palette section of the Riddle Creator. Open or create a palette, scroll down to Custom CSS, click on EDIT, paste your CSS into the grey field, then click on FORMAT CODE and SAVE. The changes appear in your Riddle immediately.
Does custom CSS apply to all of my Riddles?
Custom CSS is stored on a palette, so it applies to every Riddle that uses that palette. To style only one Riddle, copy the palette first (COPY AND EDIT PALETTE), give it its own name, and use that palette for that Riddle alone.
Do I have to prefix my CSS selectors?
Yes. Add .riddle in front of any selector, for example .riddle button.btn.btn-primary, so your rule is specific enough to override the default styling.
How do I find the right CSS class for an element?
Open your Riddle in a browser, inspect the element with your browser's developer tools, and read the class name. The Riddle CSS classes table above lists the selectors for the most important elements, such as .riddle, .block, .top-bar, .title, .description, .btn-primary, and .choices.
Can I style a single block title instead of all of them?
Yes. Add your own class to that block's title or description in the Rich Text Editor, then target that class in your custom CSS. Styling .title or .description instead would change every block.
Should I use CSS or the palette for colors and fonts?
Use the palette wherever it offers the option. Colors, fonts, background, border radius, and button colors are all palette settings, and hover, focus, and selected states of answer choices are set there too. Reach for custom CSS for everything the palette does not expose, such as font sizes, font weights, spacing, text transforms, and block background images.
Is custom CSS carried over when I migrate from Riddle 1.0 to 2.0?
No. Custom CSS is not migrated because the underlying structure of Riddle 2.0 is too different, so you have to recreate it. See Switch from Riddle 1.0 to 2.0 for everything else that does and does not migrate.