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!