Adding CSS to Kindful Hosted Donation Pages

 Overview

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.

Screen_Shot_2020-07-16_at_11.25.50_AM.png 

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.

Screen_Shot_2020-07-16_at_11.29.16_AM.png 


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*/

.btn-inverse{

 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;

}

/*DONATE NOW HEADER*/

h3{

padding: 20px 20px 20px 20px;

}


/*INFO HEADERS ON BILLING SCREEN

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

https://app.kindful.com/admin/fundraising/donation_page*/

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

Screen_Shot_2020-07-16_at_11.10.35_AM.png

Once here, click the green button to Add New Theme

Screen_Shot_2020-07-16_at_11.10.55_AM.png

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

Screen_Shot_2020-07-16_at_11.11.59_AM.png

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

Comments