A quick tutorial to update NationBuilder’s staged donation pages for use with the Bootstrap template.
View the live example
Relevant Files
HTML: pages_show_donation_wide.html
SCSS: _staged-donations.scss
JS: jquery.ui.effect-slide.min.js, jquery.ui.effect.min.js, staged-donations.js
The problem?
The standard bootstrap donation page looks like this:
The solution?
This is based on the original post by the NationBuilder team that explains how to add a staged process to a donation page on the Aware theme. Our code below includes a few general improvements as well as the necessary updates for use with the Bootstrap theme:
1. Download all 5 files found at this link and upload them to your theme. You will need to make sure you’re using a custom theme to complete this step (more info here)
2. In the theme.scss file, import the _staged-donations.scss partial.
3. In the layout.html file, include the JS files just before the closing </head> tag
4. And that’s it :) If you wish, you can change the colours and other styles for the staged donation page in the _staged-donations.scss file.
