Please note: The Save This Tool is currently in beta testing and is due to be released very soon. Keep your Hubbub Pro plugin up-to-date to be sure you have the latest features and fixes.

The Save This tool can be customized using Custom CSS. On the settings page for Save This, found at Hubbub > Save This in your WordPress Admin, you’ll see a Custom CSS box under the Custom Colors area.

To make it a bit easier for you to reverse engineer – you hacker you – we’ve supplied the necessary CSS selectors below. Oh, and we threw in an example of a simple Dark Mode style that follows the user’s system preferences for fun. 🕶️

Selectors #

• .dpsp-email-save-this-tool – overall wrapper
• .hubbub-save-this-form-wrapper – wrapper
• H3.hubbub-save-this-heading – heading
• .hubbub-save-this-message – message directly below heading
• .hubbub-save-this-message-paragraph-wrapper – the paragraph tag for the message
• .dpsp-email-save-this-tool form – the form element
• .hubbub-save-this-emailaddress-paragraph-wrapper – wrapper for the email address and label
• .hubbub-block-save-this-text-control – The text input for the email address
• #hubbub-save-this-emailaddress – The ID of the email address (in case you’d like to hook into it with JavaScript)
• .hubbub-block-save-this-submit-button – (Also same ID) – The submit button
• .hubbub-save-this-consent-paragraph-wrapper – wrapper of the consent checkbox and label
• #hubbub-save-this-consent – The consent checkbox.
• label[for=”hubbub-save-this-consent”] – The consent checkbox label
• .hubbub-save-this-afterform – After form message wrapper
• .hubbub-save-this-afterform p – The after form text
• .hubbub-save-this-afterform-paragraph-wrapper (same as directly above)

An Example #

What? An example you say? We thought you’d never ask. Here is the necessary CSS to create a simple Dark Mode version of the Save This form. It will follow the user’s system preference – so if they have Light Mode on they’ll never see it.

@media (prefers-color-scheme: dark) {

.dpsp-email-save-this-tool { background-color: #1e1e1e; color: #a4a3a3; }
.hubbub-save-this-heading { color: #a4a3a3; }
.hubbub-block-save-this-submit-button { background-color: #a4a3a3 !important; color: #1e1e1e !important; }

}

The results:

Happy styling!

CSS is AWESOME

See the Pen CSS is Awesome by Brandon (@brundolf) on CodePen.