QuotesDLX 2.0 Has Been Released With Custom Theme Colors

QuotesDLX Version 2.0 Graphic
Version 2.0 is here!

I am very pleased to announce that QuotesDLX 2.0.0 has been released. My internal deadline was an August 8th release, but this release was a bit more involved than initially thought.

Here’s a quick teaser video that shows what’s in 2.0. You can also check out the changelog.

QuotesDLX 2.0 Preview

Theme Colors – You asked for it. Now here it is.

The built-in themes have had a really good reception. However, one highly requested feature is that the ability to change colors would make this plugin extremely versatile.

Edit Theme Colors
Edit Theme Colors

Each theme has its own palette, and (depending on the theme), you can customize it to look like your site with minimal effort.

There is a real preview right above the color swatches, which helps determine if a color looks okay for the quote.

There are some caveats when it comes to theme colors.

Caveats

One request was to have theme colors on the block level. This is unlikely to happen, as per-block color options will clutter up the block interface and I believe would cause confusion and extra stress when inserting the block.

The goal here is for someone to visit the admin once, configure, and then go on with creating the quotes.

Per Theme Font Sizes for Breakpoints

Another request was to be able to customize the font sizes for the various breakpoints.

Per-theme font options
Per-theme font options

You can set:

  • The base font size
  • The line-height
  • The button base font size

There’s a preview link that will load a modal with what the theme would look like at any given breakpoint.

Mobile Preview of the Bubble Gum Theme
Mobile Preview of the Bubble Gum Theme

Caveats

With the current CSS spec, I was unable to have an option for modifying the breakpoints.

New Font Selector and Advanced Options

In the new Advanced tab in the admin settings, you can set the font families for all of the quotes (tip: you can also set font families per theme in the Theme Options tab).

Font Family Options in the Advanced Tab
Font Family Options in the Advanced Tab

The Google Fonts referenced are all stored locally, so there’s no communication with Google’s servers. Several have been pre-selected. I will add more based on user feature requests.

Additionally, if you have an Adobe Fonts account, you can use your web project ID to load in Adobe fonts.

Within the Theme Options tab, you can override the advanced font-family settings.

Enable Custom Fonts per Theme
Enable Custom Fonts per Theme

New Themes – Bubble Gum and Forest

Two new themes have been released: Bubble Gum and Forest.

Bubble Gum

The Bubble Gum theme is a lovely pink theme with bold colors.

Bubble Gum Preview
Bubble Gum Preview

The Bubble Gum theme is part of QuotesDLX, so it is added automatically.

And yes, you can change the colors.

Bubble Gum Color Options
Bubble Gum Color Options

Forest

I’ve been wanting to make a green theme for a while, and I decided to put this into Forest.

Forest Theme
Forest Theme

This theme is not part of QuotesDLX core and is actually a sample theme that others can use as a starting point for their own themes.

The plugin is hosted on GitHub.

Screenshot of github.com

Forest Theme on GitHub

Updated Theme Framework

With the addition of theme colors, I needed a way to have flexible colors and options per theme.

As a result, the theme framework has been updated so that others can create their own themes.

Please see below for documentation on this:

The Forest theme demonstrates how you can create your own theme by simply forking the plugin and making it your own.

Changelog

There are too many fixes and additions to list here. For a detailed list, please visit the Changelog documentation.

Conclusion

I hope you’ll like the 2.0 release. A ton of work has gone into it. If you have any feature requests, feel free to email me a feature request, @ me on Twitter, or leave a comment below.

Thanks for reading.

Leave a Reply

Your email address will not be published.

Default Avatar
Choose an Avatar

Shopping Cart
Scroll to Top