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

css editor

  1. Go to the Design and Settings section and select PALETTE.
  2. Click on CREATE A PALETTE, type a name into the Type your preset name here field, and click on SAVE.
    OR
    Click on CUSTOMIZE or COPY AND EDIT PALETTE.
  3. Scroll down to Custom CSS and click on EDIT.
  4. Add your CSS into the grey field.
  5. Click on FORMAT CODE and then SAVE.
    You will see the changes immediately in your Riddle.

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.