Theme Options

Set theme colors, set font sizes, and enable custom fonts per theme.

Editing a Theme

On the theme options page, you are presented with a dropdown selector where you can choose to edit a particular theme.

Saved Changes: If you choose to select a new theme, any unsaved changes will be lost.

Editing Theme 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.

When you are done editing the colors, you can save or reset the options.

Editing Font Sizes Per Breakpoint

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.

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.

Custom Fonts per Theme

Finally, you can set custom fonts per theme. These will override any advanced options.

There's a convenient preview button so you can see what the fonts will look like in a modal.

Last updated