Comment on page
Theme Options
Set theme colors, set font sizes, and enable custom fonts per theme.
Find a Theme to Edit from the Dropdown
On the theme options page, you are presented with a dropdown selector where you can choose to edit a particular theme.
Theme Selector
Saved Changes: If you choose to select a new theme, any unsaved changes will be lost.
Editing a Theme's Colors
Editing a theme is as straightforward as selecting some parts of the theme's colors to override. The preview will automatically update with the selected colors.
The default colors are shown, and you can customize the theme to match your site's colors. This allows you to use the design of the quote, but to your own tastes.
Save or Reset Theme Colors
When you are done editing the colors, you can save or reset the options.
You can edit the font sizes for the mobile, tablet, and desktop breakpoints.
Custom Breakpoints: Unfortunately with the current state of CSS, it is difficult to have dynamic breakpoints. As a result, the breakpoints cannot be edited.
Mobile Size Options
Tablet Size Options
Desktop Size Options
For each breakpoint (desktop, tablet, and mobile), you can modify:
- The base font size (default is 16px for desktop).
- The line height of the quote
- The base button font size (default is 16px for desktop)
Base Fonts: a base font is what all child elements use. For example, with a base font size of 16px, a 1em font-size will also be 16px. If the base font size is increased, then 1em becomes even higher.
Finally, you can set custom fonts per theme. These will override any advanced options.
Selecting a Custom Font Per Theme
There's a convenient preview button so you can see what the fonts will look like in a modal.
Setting a Custom Font
Font Preview in a popup Modal