All Collections
Website
Theming
Tweak a stock theme or page template
How to change the look of your Bootstrap Donation (v2) page
How to change the look of your Bootstrap 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

If you are using a custom Bootstrap theme created before July 8, 2019 or a stock theme, view the docs here.

Table of Contents

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 you'll need to modify one of the theme files here.

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

3. In this file, you'll simply want to move the {% include "header" %} snippet outside of the {% unless page.type_name == "Donation (v2)" %} conditional.

Before:

{% unless page.type_name == "Donation (v2)" %}
{% include "header" %}

After:

{% include "header" %}
{% unless page.type_name == "Donation (v2)" %}

Click Save and publish changes.
​
4. Return to Templates and open pages_show_donation_v2_wide.html.

5. Remove the navbar-brand element from lines 7 to 13. Click Save and publish changes. Now the top navigation/header will be visible on Donation (v2) pages.

Turn your page into a staged donation page

Download the conversion kit below and unzip the archive.

πŸ“ŒNote: If you're using a custom donation page template, this will overwrite your current donation page.

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

2. Click on Theme.
​
3. If you're already are making use of a custom Bootstrap theme created after July 8, 2019, select Current custom theme. Otherwise, select New custom theme and make sure you select Start with Bootstrap framework.
​
4. Navigate to 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 code before the closing </head> tag, and click 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>

6. Return to Templates, and open the theme.scss file. Import the _staged-donations.scss as seen below:Β 

@import "staged-donations";

The import should be placed within the NationBuilder Add-ons section around line 96.

7. Click Save and publish changes. Staged donations should now be enabled on your Donation (v2) pages.

How do I widen the form on my page?

Go to Website > Theme > Current custom theme > Templates > Open pages_show_donation_v2_wide.html.

1. Modify the col-lg-6 class on line 3 to the column width desired.
​
2. Remove or adjust the max-width style on line 4 as needed.
​
3. Click Save and publish changes.

Did this answer your question?