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

    • Getting Started: Hosted Matching Gift Page

      Overview of Your Hosted Matching Gift Page This feature is currently only available for nonprofits using the 360MatchPro Legacy Plan. We recommend that you embed Double the Donation's matching gift plugin directly on your own website so your donors ...
    • How do we set up the matching gift search tool on our website?

      Install Plugin This feature is currently only available for nonprofits using the 360MatchPro Legacy Plan. 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 ...
    • Getting Started: Understanding Plugin Settings

      Plugin Settings Within your Double the Donation account you have the ability to create a dedicated matching gift page on your website featuring our searchable database plugin. This becomes a call to action page where donors can access the forms, ...
    • How does the background color picker work and where is the color displayed?

      This feature is currently only available for nonprofits using the 360MatchPro Legacy Plan. 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 ...
    • Creating a Dedicated Matching Gift Page

      Intro Within your Double the Donation account you have the ability to create a dedicated matching gift page on your website featuring our searchable database plugin. See this article for a general overview of this step. Step 1: Creating a new webpage ...