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
- Create or edit a Riddle.
- Go to the Design and Settings step and select PALETTE.
- Click on the blue CREATE A CUSTOM PALETTE button.
- Type a name into the Type your preset name here field.
- Click on the blue SAVE button.
- Scroll down to Custom CSS.
- Click on the blue EDIT button.
- Edit a palette or create a palette from scratch.
- Add your CSS into the grey field.
- Click on the blue FORMAT CODE button.
- Click on SAVE.
- 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.