Skip to main content

How to upgrade your theme for Donation (v2) pages

If you have a custom theme on donation V2 pages, you may need some updated styling for payments and goals. 

Table of Contents


Adding Styles

Along with our new integrated payment processor, we designed a new donation page type that allows for collecting one-time and recurring payments on a single page. It also comes with an updated look that is optimized for desktop and mobile.

However, if you customized a NationBuilder theme prior to January 25, 2018, you may not have gotten the styling required for this new page type to display properly. In order to manually update your theme to include the latest styles, you need to do the following:

Find your website's theme.scss file.

  1. In the control panel, go to Website and select the site you wish to modify.
  2. Click on the Theme section of the site.
  3. Click on theme.scss at the top of the Templates listing.

If you are using our Dropbox integration to edit your theme, you will need to locate the theme.scss file within your theme’s local nb_sync folder.

Below is a list of links to updates to each theme. Follow the link associated with the public theme used as the base of your theme, or Bootstrap.  This will lead you to Github, an online code repository. Copy code from the page and paste it at the bottom of your theme.scss file. After previewing the changes, publish theme.scss and your new donation page should updated with styles.

Links to files:

Aware

Action

Bootstrap Framework

Cityzen

Collective

Headliner

Presence

Publish

Verve

Victory Again

 Donation (v2) pages will not function correctly if you are using a deprecated Version 1 theme (or a custom theme built off of a Version 1 theme).

**For guidance on styling any of the payment fields within a Donation (v2) page, be sure to take a look at this tutorial on how to style payment fields.  


Adding goals to custom themes

"Amount Raised" and "Number of Donors" type goals were not initially included in the release of Donation_V2 pages, so if you have a custom theme that was created prior to September 6th, 2018, it likely doesn't have the markup required to represent these goals on your front-facing website.

Use the code snippets below to update the `_pages_show_donation_v2_wide.html` template in your custom theme.

You'll need slightly different markup depending on what particular public theme your custom theme started as, and in some cases might need to reach out to your Architect or web developer. If you're unsure of what public theme your custom theme started as, or need help placing the code in your template, reach out to help@nationbuilder.com or use the in-app support messaging in your control panel.

If you are using a customized theme that started as Aware, Collective, or Presence, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 14:

{% assign thermo_width = 50 %}
   {% if page.donation_v2.has_amount_goal? %}
  <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
        {% if page.donations_count < 1 %}
        <div class="bar-text">JUST STARTED</div>
        {% else %}
        <div class="bar-text">{{ page.donations_amount_format }} raised</div>
        {% endif %}
      </div>
    </div>
     <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>
   </div>
   {% elsif page.donation_v2.has_donor_goal? %}
   <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
        {% if page.donations_count < 2 %}
        <div class="bar-text">JUST STARTED</div>
        {% else %}
        <div class="bar-text">{{ page.donations_count }} donors</div>
        {% endif %}
      </div>
    </div>
     <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
   </div>
   {% endif %}

If you are using a custom theme that started as Action, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 20:

      {% assign thermo_width = 100 %}
       {% if page.donation_v2.has_amount_goal? %}
        <div class="clearfix">
          {% if page.donations_count < 1 %}
            <div class="bar-text"><h6 class="strong secondary">Just started</h6></div>
          {% else %}
            <div class="bar-text"><h2 class="strong">{{ page.donations_amount_format }}</h2> raised of a {{ page.donation_v2.amount_goal_format }} goal</div>
          {% endif %}
          <div class="progress" style="width: {{ thermo_width }}%;">
            <div class="bar progress-bar progress-bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
            </div>
          </div>
        </div>
       {% elsif page.donation_v2.has_donor_goal? %}
         <div class="clearfix">
          {% if page.donations_count < 2 %}
            <div class="bar-text"><h6 class="strong secondary">Just started</h6></div>
          {% else %}
            <div class="bar-text"><h2 class="strong">{{ page.donations_count }}</h2> donors of a {{ page.donation_v2.donor_goal }} donor goal</div>
          {% endif %}
          <div class="progress" style="width: {{ thermo_width }}%;">
            <div class="bar progress-bar progress-bar-success" style="width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
            </div>
          </div>
        </div>
       {% endif %}

If you are using a custom theme that started as CityZen, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 16:

    {% assign thermo_width = 90 %}
    
    {% if page.donation_v2.has_amount_goal? %}
    <div class="clearfix thermometer">
      <div class="progress" style="width: {{ thermo_width }}%;">
        <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
          {% if page.donations_count < 1 %}
          <div class="bar-text">JUST STARTED</div>
          {% else %}
          <div class="bar-text">{{ page.donations_amount_format }} raised</div>
          {% endif %}
        </div>
      </div>
      
      <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>
      
    </div>
    
    {% elsif page.donation_v2.has_donor_goal? %}
    
    <div class="clearfix thermometer">
      <div class="progress" style="width: {{ thermo_width }}%;">
        <div class="bar bar-success" style="width: {{ page.donation.percent_of_donor_goal | times:100 }}%;">
          {% if page.donations_count < 2 %}
          <div class="bar-text">JUST STARTED</div>
          {% else %}
          <div class="bar-text">{{ page.donations_count }} donors</div>
          {% endif %}
        </div>
      </div>
      
      <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
      
    </div>
    
    {% endif %}

If you are using a custom theme that started as Headliner, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 14:

 {% assign thermo_width = 100 %}
   {% if page.donation_v2.has_amount_goal? %}
  <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
      </div>
    </div>
    {% if page.donations_count < 1 %}
    <div class="bar-text lessoffset">Just Started</div>
    {% else %}
    <div class="bar-text"><span class="bar-text-count">{{ page.donations_amount_format }}</span>Donated</div>
    {% endif %}
    <div class="bar-goal">Goal: {{ page.donation_v2.amount_goal_format }}</div>
  </div>
   {% elsif page.donation_v2.has_donor_goal? %}
   <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
      </div>
    </div>
    {% if page.donations_count < 2 %}
    <div class="bar-text lessoffset">Just Started</div>
    {% else %}
    <div class="bar-text"><span class="bar-text-count">{{ page.donations_count }}</span> donors</div>
    {% endif %}
    <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
  </div>
   {% endif %}

If you are using a custom theme that started as Publish, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 15:

    {% assign thermo_width = 100 %}
    
    {% if page.donation_v2.has_amount_goal? %}
    
      <div class="clearfix">
        
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
            {% if page.donations_count < 1 %}
            <div class="bar-text">JUST STARTED</div>
            {% else %}
            <div class="bar-text">{{ page.donations_amount_format }} raised</div>
            {% endif %}
          </div>
        </div>
    
        <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>    
    
      </div>
  
    {% elsif page.donation_v2.has_donor_goal? %}
  
      <div class="clearfix">
        
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
            {% if page.donations_count < 2 %}
            <div class="bar-text">JUST STARTED</div>
            {% else %}
            <div class="bar-text">{{ page.donations_count }} donors</div>
            {% endif %}
          </div>
        </div>
         <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
  
      </div>
     {% endif %}

If you are using a custom theme that started as Verve, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 14:

 {% assign thermo_width = 100 %}
       {% if page.donation_v2.has_amount_goal? %}
      <div class="clearfix progress-container">
        {% if page.donations_count < 1 %}
        <div class="bar-text bar-text-null">JUST STARTED</div>
        {% else %}
        <div class="bar-text">{{ page.donations_amount_format }} raised</div>
        {% endif %}
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
          </div>
        </div>
        <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>
      </div>
       {% elsif page.donation_v2.has_donor_goal? %}
       <div class="clearfix progress-container">
        {% if page.donations_count < 2 %}
        <div class="bar-text bar-text-null">JUST STARTED</div>
        {% else %}
        <div class="bar-text">{{ page.donations_count }} donors</div>
        {% endif %}
        <div class="progress" style="width: {{ thermo_width }}%;">
          <div class="bar bar-success" style="width: {{ page.donation.percent_of_donor_goal | times:100 }}%;">
          </div>
        </div>
        <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
      </div>
       {% endif %} 

If you are using a custom theme that started as Victory Again, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 14:

 {% assign thermo_width = 100 %}
     {% if page.donation_v2.has_amount_goal? %}
    <div class="clearfix">
      {% if page.donations_count < 1 %}
      <div class="bar-text bar-text-null">JUST STARTED</div>
      {% else %}
      <div class="bar-text">{{ page.donations_amount_format }} raised</div>
      {% endif %}
      <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>
      <div class="progress" style="width: {{ thermo_width }}%;">
        <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
        </div>
      </div>
    </div>
     {% elsif page.donation_v2.has_donor_goal? %}
     <div class="clearfix">
      {% if page.donations_count < 2 %}
      <div class="bar-text bar-text-null">JUST STARTED</div>
      {% else %}
      <div class="bar-text">{{ page.donations_count }} donors</div>
      {% endif %}
      <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
      <div class="progress" style="width: {{ thermo_width }}%;">
        <div class="bar bar-success" style="width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
        </div>
      </div>
    </div>
     {% endif %}

If you are using a custom theme that started as Bootstrap, paste this markup immediately above the `{% form_for donation %}` liquid tag which should be on or near line 17:

{% assign thermo_width = 100 %}
   {% if page.donation_v2.has_amount_goal? %}
  <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar progress-bar" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_amount_goal | times:100 }}%;">
        {% if page.donations_count < 1 %}
        <div class="bar-text">0%</div>
        {% else %}
        <div class="bar-text">{{ page.donations_amount_format }} raised</div>
        {% endif %}
      </div>
    </div>
     <div class="bar-goal">GOAL: {{ page.donation_v2.amount_goal_format }}</div>
   </div>
   {% elsif page.donation_v2.has_donor_goal? %}
   <div class="clearfix">
    <div class="progress" style="width: {{ thermo_width }}%;">
      <div class="bar progress-bar" role="progressbar" style="min-width:2em; width: {{ page.donation_v2.percent_of_donor_goal | times:100 }}%;">
        {% if page.donations_count < 2 %}
        <div class="bar-text">0%</div>
        {% else %}
        <div class="bar-text">{{ page.donations_count }} donors</div>
        {% endif %}
      </div>
    </div>
     <div class="bar-goal">{{ page.donation_v2.donor_goal }} donors</div>
   </div>
   {% endif %}

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.