You are here


Sass and CSS in NationBuilder

Submitted by Kate on October 3, 2011 - 11:11am

You might notice some differences between style sheets in NationBuilder and in platforms like Drupal or WordPress. This is because NationBuilder uses an extension of CSS3, called SCSS, or Sassy CSS. This extension (with files ending with .scss) allows for concise styling that is still very similar to and works alongside traditional CSS.

If you are ready to dive in with CSS3 and SCSS, take a look at this site for tutorials and more.

If you need an introduction to traditional CSS, check out Design*Sponge for a great guide. This article uses a WordPress site as an example, but the same CSS will work in NationBuilder. Pretty great, right?

As always, I'm a total CSS nerd and would love to help you out with your design and styling. The best part? Help is just a couple of clicks away!

NationBuilder in the Field

Submitted by Jerimee on September 30, 2011 - 10:45pm

Tabling at an event? Doorknocking? Want a sign in sheet you don't have to do data entry for? NationBuilder has got you covered.

With Nationbuilder its easy to move visitors from action page to action page, getting and keeping them engaged. For example someone who pledges to attend an event might then be sent to a page to volunteer or donate. You set this page by entering the slug of the page you want the visitor to move to next, typically labeled "After signing, what page should they land on next?"

However, there are times when you may want to a visitor to be sent to a page outside of your website or a different page. In this case you will need to create a redirect page before filling in the value of the "land on next" field. You create a redirect as you would another new page (Pages > New page > and then select "Redirect" under type of page). After creating your page enter the full url (including http://) of the page you would like the visitor to be taken to after they take action.

Tipsy NationBuilder

Submitted by Jerimee on September 19, 2011 - 10:04pm

NationBuilder has jQuery plugin Tipsy preloaded. Or, as the case may be, readily available to be loaded.

Tipsy is a jQuery plugin for adding tooltip hovering help text based on an anchor tag's title attribute.

Here's how you load it. Pick the page (or pages) you want to use it with. I suspect it would be best to not load it on pages that don't invoke it, so pick the appropriate level of template file. If you're only going to use it on one page just edit that individual page's template. Edit your template and paste the script at bottom:

<script src="jquery.tipsy.js" type="text/javascript"></script>
Then you can associate it with a selector (in this case id #mytooltip):

NationBuilder How To: Displaying a List of Recently Added Content

Submitted by Kate on September 14, 2011 - 12:18pm

Updated 2012-01-29.

NationBuilder can provide a display of content recently added to your nation. This is a great resource for visitors to get a feel for what is on the site, and can be used in a page or sidebar (my example is on a page). Let's get started!

Display Recent Pages

This lists all recent content, including petitions, donation pages, etc.

    {% for recent_page in site.most_recent_pages %}
  • {{ recent_page.icon | icon }} {{ recent_page.title }}
  • {% endfor %}

Display Recent Petitions

    {% for recent_page in site.most_recent_petition_pages %}
  • {{ recent_page.icon | icon }} {{ recent_page.title }}
  • {% endfor %}

Salsa Import Best Practices

Submitted by Kate on September 1, 2011 - 4:16pm

Prepping Your Data

  1. Your information should be in columns, with each row of data containing one entry.
  2. If any data are unknown, make sure they are blank, or else you might end up with something like “John Unknown Smith” instead of “John Smith”.
  3. Make sure the fields are the same throughout and that the column headers (if they exist) are correct.

Field Matching

  1. Only import columns data that you are either updating or need for matching.
  2. If you are importing data from an export, be sure to keep the Salsa ID column, called “supporter_key.” This is the best way to match data on an import.
  3. Check and double check that you are matching the data to the correct fields.


  1. Before going to the upload screen, make a tag for your import (from the ‘dashboard’ tab). Tag should be descriptive, eg. 2011-08-23_address-corrections.

Advanced Options

  1. Skip Lines – if you have a header row, you can skip one line. Otherwise you will have a new supporter with first name “First Name” if that was the title of your first name column, for example.