How do I change the background colors, font sizes, or font colors in the matching gift plugin that's embedded on our nonprofit's website?

How do I change the background colors, font sizes, or font colors in the matching gift plugin that's embedded on our nonprofit's website?

You may want to customize the look of our plugin as it is embedded on your organization's website. Please note that only with our plugin using the HTML code do you have the functionality of customizing the look of the plugin. You can the following of our plugin:
  1. Background Color
  2. Font Size
  3. Font Color 
  4. Height/width of the plugin
This is advanced functionality only for organizations that should only be used by organizations that have a web designer or web developer on their team.

Understanding CSS: 

Our plugins reside in a <div> element of id "dd-container". Thus, all custom CSS declarations would start with "#dd-container". For example, to make the default size bigger than our 16px by default, you could add this custom CSS to your page:

#dd-container {
      font-size: 20px !important;
}

The use of the "!important" parameter forces the custom styles to override the defaults.

Common CSS modifications


Changing general plugin font size


#dd-container {
      font-size: 20px !important;// Change "20" to desired size
}

Changing general plugin font family (This by default inherits your page font):


#dd-container {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif  !important; // Change as desired
}

Changing button colors:


#dd-container .lets-check, #dd-container .mg-forms-button, #dd-container .mg-guidelines-button {
      color: #your-text-color-in-hex !important;
      border-color: #your-color-in-hex !important;
      background-color: #your-color-in-hex !important;
}

Changing button font size:


#dd-container .lets-check, #dd-container .mg-forms-button {
      font-size: 13px !important; // Change "13" to desired size
}

Remove the "Let's Check" button:


#dd-container .lets-check { display: none; }


#dd-container a {
      color: #your-color-in-hex !important;
}

These are the most common modifications to our plugin. If you wish to customize them further, please ask your web developer to use the Chrome DOM inspector to identify elements to be modified, and then add in the appropriate CSS customizations with styles starting with "#dd-container" as per the above examples.

How to add CSS to the plugin? 


Within a 360MatchPro account, you have the ability to add a CSS Override to the plugin in order to customize the plugin further. Login to your 360MatchPro account portal --> Navigate to Settings --> Plugin Settings --> CSS Overrides.




Make sure that the Plugin URL is entered, then add one of the above CSS modifications that you see is above. 

    • Related Articles

    • Can we change how the matching gift plugin or iframe appears?

      You have two options when you embed Double the Donation's plugin on your website(s): Use our standard embed code which is a few lines of html code and javascript code (recommended method) Use our iframe (alternate option) Our standard embed code will ...
    • How does the background color picker work and where is the color displayed?

      Organizations setting up a hosted matching gift page will be prompted to choose a background color. This will be displayed on the left and right sides of your organization's hosted matching gift to help tie your Double the Donation's matching gift ...
    • Getting Started: Hosted Matching Gift Page

      Overview of Your Hosted Matching Gift Page We recommend that you embed Double the Donation's matching gift plugin directly on your own website so your donors can access the matching gift forms, guidelines, and instructions that they need directly on ...
    • Getting Started: How do we set up the matching gift search tool on our website?

      Install Plugin When you create your account on Double the Donation's website you'll instantly have access to the embed code options within your Double the Donation Account Management Portal. 1. Login to your Double the Donation Account Management ...
    • Can we embed the plugin twice on the same page?

      Your organization is able to embed our plugin in multiple spots throughout your website. This means you can add our plugin to a dedicated matching gift page, into your donation process, and anywhere else on your website. We have two embed options: ...