All Collections
Website
Theming
Template updates
How to change the look of your Donation (v2) page
How to change the look of your Donation (v2) page

Your one-stop-shop for learning how to make updates to the look of Donation (v2) pages!

Updated over a week ago

Table of Contents

Upgrade your existing theme to incorporate the normal styles for donation (v2) pages

If you have a custom theme on donation (v2) pages, you may need some updated styling for payments and goals

Display the top navigation/header image on a Donation (v2) page

Donation (v2) pages, by default, hide the top navigation to allow for a more simple, focused user experience that leads to higher conversion rates. If you would like to retain the top navigation on a Donation (v2) page, you'll want to follow the instructions below.

1. Create a custom theme (if you haven't already), as we'll need to modify one of the theme files here.

2. Once you have a custom theme set up, open up the nav.html file within the theme files.

3. In this file, you'll simply want to delete the first and last lines. The 'unless' conditional statement here is what prevents the top navigation from being rendered on a Donation (v2). Once deleted, hit Save and Publish Change to make the changes live.

Turn your page into a staged donation page

Download the conversion kit below and unzip the archive.

Bootstrap conversion kit / Aware Stock Theme conversion kit

📌 Note: The Bootstrap conversion kit is built for use with the current version of Bootstrap available in the product. If your theme was created prior to October of 2021, we do not recommend implementing this kit directly.

⚠️ If you're using a custom donation page template, this will overwrite your current donation page. Do not turn your page into a staged donation page if you are using it to sell tickets for an event.

  1. In control panel, go to Website and select the site you wish to modify.

2. Click on Theme.

3. If you already have a custom theme, select Current custom theme. Otherwise, select New custom theme and make sure you select Start with Bootstrap framework or are cloning the Aware stock theme before creating the theme.

4. Select Files and upload the stylesheet, template, and scripts included in the unzipped directory created in step 1 (_staged-donations.scss , jquery.ui.effect-slide.min.js , jquery.ui.effect.min.js , pages_show_donation_v2_wide.html , staged-donations.js ).

5. Select the Templates and open layout.html.

Add the following before the </head>  tag on line 17, and save and publish:

<script type="text/javascript" src="jquery.ui.effect.min.js"></script>
<script type="text/javascript" src="jquery.ui.effect-slide.min.js"></script>
<script type="text/javascript" src="staged-donations.js"></script>

It should look like this when you are done (Note: Lines 35-39 are all you're concerned with in the image below, and your line numbers will probably be slightly different.):

7. Click Save and publish changes. Return to Templates, and open theme.scss. Add the following below "Donation v2 page" on lines 421-422, and then click Save and publish changes:

@import "staged-donations"; 

Note: The short code should go on its own line in between the horizontal line of dashes and .page-pages-show-donation-v2-wide , like so:

8. Staged donations should now be enabled on your Donation (v2) pages!

How do I center the form on my page?

Go to Website > Theme > Current custom theme > Templates > Open theme.scss.

Per theme change:

Publish:

Delete (Line 2827):

margin-left: 0;

Victory Again:

Add this to the .onecolumn-container class on line 3060:

margin: auto;

Verve:

Replace "5vw" on line 2696 with "auto".

CityZen:

Replace "margin-left: 0;" on line 3443 with "margin: auto".

Collective:

Replace (Line 2578):

"padding: 0 0 0 5vw;" with "padding-top:0

under that line, add "margin:0;"

Presence:

Replace "margin-left: 5vw" on line 2856 with "margin: auto;".

Headliner:

Add "margin:auto;" after line 3026.

Aware:

Add "margin:auto;" after line 2029.

How do I widen the form on my page?

Go to Website > Theme > Current custom theme > Templates > Open theme.scss. 

 If you want the form to take up the full screen, you also also going to need to center it. See above.

Per theme change:

Publish:

Delete this (Lines 2958-2962):

@media (min-width: 570px) {
.page-type-donation-v2 .page-pages-show-donation-v2-wide .onecolumn-container {
width: 513px;
}

Victory Again:

Delete this (Line 3061):

width: 520px;

Verve:

Delete this (Line 2688):

.main.width-container { width: 520px; }

Delete this (Line 2450):

width: 100%;

CityZen:

Delete this (Line 3432):

width: 515 px;

Collective:

Delete this (Line 2558):

width: 570px;

Presence:

Delete this (Line 2728):

width: 520px;

Headliner:

Delete this (Line 3024):

width: 561px;

Aware:

Delete this (Line 2029):

width: 550px;

 

 

Did this answer your question?