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:
- 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*/
.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 Settings > Fundraising 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
Comments