Buy Now

Save This Custom CSS

Table Of Contents

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!

Was this content helpful?
Updated on October 31, 2024