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.