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

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.