You are here

Customizing NationBuilder Sidebars

Submitted by Kate on May 5, 2011 - 7:39pm

NationBuilder in its first iteration is a one-size-fits-all solution designed to give advocacy organizations a pre-assembled online campaign headquarters.

While NationBuilder markets itself as a tool that requires no technical skills and prioritizes ease of use over customization, those with web development skills can tailor the system with a little effort.

By default, NationBuilder gives you templates for two global sidebars: one for logged in users and another for visitors who haven't signed in. These sidebars can be turned off for a given page but that's all that can be done. Adding new items to a sidebar is not an option without custom theming. Fortunately, the custom theme system is very accessible. Below, I will take you through the process of adding items to your sidebar.

First, you need to have a custom theme to make customizations. NationBuilder's short screencast on custom themes is the best way to understand custom templates.[1] You might find it helpful to watch this screencast before proceeding to customizations on your sidebar.



Creating a custom theme

From the Dashboard, select Pages > Theme > New custom theme. Rename the theme (i.e. "MyCustomTheme") and keep the boxes checked that read, "Clone your current theme" and "Switch site to your new theme immediately."

Here is our screenshot illustrating the steps above.

Once you have your custom theme, navigate to the Templates section of that theme (From the Dashboard: Pages > Theme > Custom Theme > Templates > Pages).

Modifying Global Sidebars

To modify the two global sidebars, edit "_columns_2.html" and "_supporter_nav.html." These templates are very important for the next steps.

For our purposes, "_columns_2.html" is the sidebar for logged out users (visitors), and "_supporter_nav.html" is the sidebar for users that are logged in (supporters).

Let’s begin with "_columns_2.html" (logged out users) and on the template file name open the editor.

_columns_1.html

When you open the editor, you'll see HTML and liquid markup [2]. For the most part, however, we will just be using HTML, so don’t worry if some of the code looks unfamiliar. For help with HTML, there are lots of great tutorials online. [3]

On the "_columns_2.html" template, you'll see divs for the left column area, which is the main content area, and you’ll see divs for the right column area, which is where the sidebar is located.

We will be working in the right column area: <div class="right_column">

For most NationBuilder templates, the right sidebar starts with an {%if else%} statement. In the "_columns_2.html" template, this loosely translates, "if the user is logged, in skip this bit and go to _supporter_nav.html, otherwise look below for the sidebar rules/constraints."

This logic is how we differentiate between logged in and logged out users. For now, we will focus on changing the template for users that are not logged in; a user that is logged in will see something different.

An easy way to see how this works is to add the following beneath <div class="right_column">:

  1. <div>This is my custom sidebar item.</div>

Because this is outside of the {%if else%} statement, it appears for all users. You can test this by looking at the front page when you are logged in and when you are logged out. You should see "This is my custom sidebar item" in both cases.

If you'd like to add a sidebar item that only shows up for logged out visitors, move your HTML so it is beneath the first {% else %}. Your code should look like this:

  1. {% if request.logged_in? %}
  2.       {% include "supporter_nav" %}
  3.     {% else %}
  4. <div>This is my custom sidebar item.</div>

Save and publish your edits and view the live site to see how you've changed your sidebar. When you are logged in, you should not be able to see "This is my custom sidebar item," but it should appear when you are logged out.

_supporter_nav.html

A big section of the _supporter_nav.html template file is rules for what different types of users should see when they are logged in. You can edit one of those sections if you want to change the sidebar just for one user type, otherwise scroll about halfway down and look for the following:

  1. {% endif %}
  2. <div class="supporter_nav_container">
  3. <ul class="supporter_nav">
  4.   {% for child in site.dashboard_pages %}

Insert your html beneath the {% endif %} and you changes will be added to the sidebar just beneath the NationBuilder control panel shortcuts navigation for uses that are logged in.

Alternately, add your html before the first "if" statement begins to add to the sidebar above the navigation. Save and publish and go to the live site to check your edits.

Feel free to play around with the location of your code. If you make a mistake and want to start over, you can always click the red "Restore default" button.

Going Forward

These steps above only allow you to modify the global sidebar site-wide. While you can use the logic in the templates to display your additions for certain users, you can't set a sidebar section to only display for a given page or pages without either:

  1. Adding additional logic to template files
  2. Turning off the sidebar for a given page and then modifying that page's individual template.

For these (slightly) more advanced techniques, check out my next post:Advanced customization of NationBuilder sidebars.

[1] http://nationbuilder.com/how_to_custom_themes
[2] http://www.liquidmarkup.org/
[3] http://w3schools.com/html

Related Posts: