Adding CSS to Kindful Hosted Donation Pages


This article covers how to add custom CSS to theme your Kindful hosted donation pages. This can be used to supplement our pre-set color and custom image uploading options so you can further customize the donation experience with your nonprofit’s brand color and fonts

Linked Articles:

Create or Edit a Campaign

Step 3: Setup Your Donation Page

Linking Directly to Campaign Pages  

Options to Style

It is important to note that this is an advanced feature. We recommend consulting a web developer or someone who has experience working with HTML and CSS to help complete this task.

You can control elements such as brand color and font by using a custom CSS theme on our main donation pages.

Here you can see what some of the elements represented in your CSS theme connect to on the main donation page.


You will want to note the Theme Color you selected when setting up your main donation page. This color choice will control the headers on the Billing Info screen where donors input their billing details. If you wish to override the header color, this will need to be referred to in your CSS file.


Example CSS File

/*! Example of Using Custom CSS to theme Kindful Fundraising Pages

   ===================================================================== */

/*Donation Amount Buttons*/

.btn-info {

 font-family: Georgia, "Times New Roman", Times, serif;

 font-size: 20px;

 font-weight: bold;


input.btn.btn-info.donate-btn-group {

 background: #507583 !important;


/*Big Submit button on Main Landing Page*/


 font-family: Georgia, "Times New Roman", Times, serif;

 font-size: 20px;

 font-weight: bold;

 background: #7AA6BA !important;


/*Big Submit button on Billing Info Page*/

input.button {

 font-family: Georgia, "Times New Roman", Times, serif;

 font-size: 20px;

 font-weight: bold;

 background: #7AA6BA !important;




padding: 20px 20px 20px 20px;



To Do: change theme-red to match whatever theme you selected inside Kindful*/

div.theme-red .infoCard > h2{

background: #7AA6BA !important;

text-align: center;


Of Note: Adding the !important tag can help if you see some changes not being reflected.

Loading Your Stylesheet in Kindful 

To load a custom CSS stylesheet into Kindful, head to SettingsFundraising Settings Fundraising Page Themes


Once here, click the green button to Add New Theme


Next, set a name, a description (if desired), and set the source type. To control the main donation page flow, choose "Organization/Chapter". Upload your stylesheet file from your computer and Create Theme


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request