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
- Go to the Design and Settings section and select PALETTE.
- 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. - Scroll down to Custom CSS and click on EDIT.
- Add your CSS into the grey field.
- 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.