CSS editor

You can use CSS with Riddle to customize almost every visual aspect of your Riddles.

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

  1. Go to the Palette section.
    go to palette section
  2. Scroll down and click on CREATE A PALETTE, type a name into the Type your preset name here field, and click on SAVE.
    create and name a new palette
    OR
    Click on CUSTOMIZE next to one of you own palettes.
    customize your own palette
    OR
    Click on COPY AND EDIT PALETTE next to a default palette.
    copy and edit default palette
    name copy of default palette
  3. Scroll down to Custom CSS and click on EDIT.
    edit custom css
  4. Add your CSS into the grey field.
    add css into grey field
  5. Click on FORMAT CODE and then SAVE.
    You will see the changes immediately in your Riddle.
    format and save css changes to see changes

Riddle CSS classes

Below are the most important Riddle elements you can change and the CSS selectors you need to make these changes.

ElementDescriptionCSS selectorPossible changes
Complete RiddleThis is the highest element of every Riddle.riddleMost changes can be done via the palette (background, border-radius, …) You could set the font-size here globally.
BlockThis is the first element below .riddle, containing everything within one block.blockYou 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 barThis includes the pagination (page counter, progress bar) as well as timers if enabled.top-barYou can hide the top bar by turning off pagination and timers.
Block MediaBlock media, set in the Creator.main-media/
TitleTitle of each block, set in the Creator.titleColor and font is set in palette. You can customize the font-size, font-weight, ...
DescriptionDescription of each block, set in the Creator.descriptionColor and font is set in palette. You can customize the font-size, font-weight, ...
ButtonsAll buttons in the Embed (Start, Choose, Submit, …).btn-primaryButton colors can be set in the palette. You can customize border-radius, font-size, text-transfrom, padding, …
FooterArea below the content, only showing if Footer text or custom logo are added in the "Branding" section in "Settings".custom-footerBackground 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 the user.block-type-pillCan be turned off in the palette. Colors are taken from "Button color" and "Button text color".
ChoicesChoices in questions.choicesSet the margin-top or margin-bottom, gap between items, specific background-color if needed.
Choice elementOne single element within ".choices".choices .choice-contentEverything here can be set via palette (color, background-color, hover / focus / selected state).
Voting resultThe voting result contains information about whether a choice is right / wrong (Quiz) and how many people voted for it..choices .choice .choice-content .voting-resultCurrently, hiding the absolute number of votes, but this will soon work via a setting.
Answer explanationExplanation after a user voted.answer-explanationColors 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.

Table of Contents