Can I make updates to the donation page?

I'd like to make some updates to the donation page. Is this possible?

The donation page, user login page, and the pages accessed by a supporter once logged in (My Sponsorships, My Donations, etc.) can not be customized

However, an organization can add custom CSS styling to their REACH account that can be used to adjust or hide various options on these pages.  To add custom CSS for these pages, go to Settings / CSS Editor.  

A basic knowledge of CSS is suggested when using the CSS Editor.

Here are a few examples:

1. Removing the Recurring Donation checkbox option on the Donation Page

Here's how:

- Go to Settings > CSS Editor 
- Add the following code to the Editor:

#recurring_select{
  display: none;
}

- Click the green 'Save Changes' button. 

Once complete, the checkbox will be hidden and all payments will be set to be recurring. The option to choose the recurring period will still be available. 

2. Removing the Recurring Period Dropdown Selection and End On Date on the Donation Page

Here's how:

- Go to Settings > CSS Editor
- Add the following code to the Editor:

#recurring{
  display: none;
}
- Click the green 'Save Changes' button.

Once complete, the dropdown will be hidden and all payments will be set to be recurring Monthly.  The End On Date will also be hidden.  

NOTE: If you want to just Hide the End On Date but keep the Recurring Period Dropdown option, add the following code to the Editor instead:

#end_on{
  display: none;
}
- Click the green 'Save Changes' button.

Once complete, the Recurring Period Dropdown will display, but the option to add an End On Date will be hidden.  


3. Hide the Send A Gift option on the My Sponsorships Page

Here's how:

- Go to Settings > CSS Editor 
- Add the following code to the Editor:

.send-a-gift{
  display: none;
}

- Click the green 'Save Changes' button.

Once complete, the 'Send A Gift' button will no longer display to your supporters.

4. Change the button color on the user log in page from red to another color (example orange):

Here's how:

- Go to Settings > CSS Editor
- Add the following code to the Editor:

.smart-form footer .btn{
  background-color: #ff9000 !important;
  border-color: #ff9000 !important;
}

5. Change the link colors shown on the user log in page from red to another color (example blue):

Here's how:

- Go to Settings > CSS Editor
- Add the following code to the Editor:

.smart-form a, a:hover {
  color: #E57D48 !important;
}

6. Change the Account Name (when no logo is displayed) on the log in page from red to another color (example black):

Here's how:

- Go to Settings > CSS Editor
- Add the following code to the Editor:

#sign_in_logo h1 a{
  color: #000 !important;
}


7. Add a statement below the Submit Button (example text shown in blue, 14 point type):

Here's how:

- Go to Settings > CSS Editor
- Add the following code to the Editor - changing the text for 'content' to the statement as you want it to read:

.donations_new #spreedly_form form::after {
    color: #275b89;
    font-size: 14px;
    content: "We are a 501(c)(3) tax-exempt charity. \A\A";
    white-space: pre;
}

Feedback and Knowledge Base