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?

This article explains how you can customize the matching gift plugin, such as updating the background and font colors and changing the font size and style, through CSS overrides.

Understanding CSS: 

Common CSS modifications

Changing the general plugin font size

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

Changing button colors:

Changing button font size:

Remove the "Let's Check" button:

Changing link colors:

How to add CSS to the plugin?

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

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 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 a {

      color:  #your-color-in-hex !important;

}

How to add CSS to the plugin? 

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