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 custom css

  1. Create or edit a Riddle.
  2. Go to the Design and Settings step and select PALETTE.
  3. Click on the blue CREATE A CUSTOM PALETTE button.
  4. Type a name into the Type your preset name here field.
  5. Click on the blue SAVE button.
  6. Scroll down to Custom CSS.
  7. Click on the blue EDIT button.
  8. Edit a palette or create a palette from scratch.
  9. Add your CSS into the grey field.
  10. Click on the blue FORMAT CODE button.
  11. Click on SAVE.
  12. See the changes immediately in your Riddle PREVIEW.

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