You are here

Advanced customization of NationBuilder sidebars

Submitted by Kate on May 9, 2011 - 5:29pm

In our last blog post, we covered the basics of customizing the sidebars in NationBuilder. But what if you needed even more customization? Never fear!

While NationBuilder does not have the same kind of customizable sidebars regions like Drupal or Wordpress, there are still some simple ways to customize a page's sidebar.

Before we begin, you should already have a custom theme set up and be somewhat comfortable with basic HTML and CSS. If you are following along in the screen-cast, you might find it helpful to use Firefox with the Firebug add-on.

Go to your NationBuilder dashboard and click "New Page." You can also use an existing page, but you will need to follow some extra steps (See "Adding Content").

Save your page and click on "Settings" in the page menu. Then uncheck "Show Sidebar" and save your page.

Method 1: HTML

Editing page template

Click on "Template" and create a div. This will enclose all of your main content. Inside this, create two spans. These will be your left and right columns for your page. Inside the first span tag, type the following:

style="float:left;width:68%"

In the second span, type this:

style="float:right;width:30%;"

Alternately, you could make a left sidebar by swapping the width values. Save and publish your code. It should look something like this:

  1. <div>
  2.      <span style="float:left;width:68%;">MAIN CONTENT</span>
  3.      <span style="float:right;width:32%;">SIDEBAR CONTENT</span>
  4. </div>

There is a reason these widths do not add up to 100%, you will just have to trust me for now.

Adding content

If you are using an existing page, click on "Content" and then click on the HTML button in the visual editor. Copy all of the content from the window that pops up, close the popup and click on "Template." Paste your content inside larger span. Save and publish.

If you are starting with a blank page, simply add your main content to the larger span and your sidebar content to the smaller span, all within the "Template" view. Save and publish your page.

Making everything look better

If you took a sneak peek at your page, you might have noticed that it looks a little funky. The content is right up against the top and bottom of the page, and the two columns are shoved up against one another. Luckily, we can use CSS to fix this.

Add the following to your outer div:

style="padding:20px 0;"

You might need to increase or decrease this to suit your content and your template. Now is a good time to use Firebug to see what works best.

Finally, to the larger span, add the following to the inline styles:

padding-right:10px;

Now you have your two sidebars, and you can add whatever you'd like to either!

Method 2: Liquid Logic

Because I know you want to hear more of my soothing voice.

NOTE: This method makes use of NationBuilder's built-in Liquid markup to create templating logic. AKA: We're about to get technical.

UPDATE: Using case statements instead of if/else statements will allow you to have more than one variation for your sidebar.

We at Richir Outreach are fond of using PHP for logic, especially when we work with Drupal or Wordpress, which works nicely with PHP. NationBuilder, however, is different: it is built on a markup called Liquid. This is a Ruby on Rails markup used by services like Shopify. [1] We like Liquid because it is simple to understand and to use.

Changing the template for one page

Rather than editing specific page templates, we are going to use logic to isolate the pages. Because NationBuilder uses page IDs to keep track of the different pages, we can specify a page by number and only change the sidebar for that page. Similarly, we can select a couple of pages by ID and just change the sidebar for those pages. This is especially helpful for pages targeting a specific group or calling for a specific action.

Inside your custom theme, go to _columns_2.html. Insert the following at the very beginning, before <div class="twocolumn_container">:

{% if page.id != 21 %}

Of course, 21 will be replaced by the number of the page you are working with. To find the page number, simply edit the page you want to change and note the number in the URL. It should look something like this: .../admin/sites/1/pages/21/... the ID is the bold number.

Scroll down to the end of the {% if/else %} statement—before the last {% endif %}—and paste the following:

  1. {% else %}
  2.  
  3.     {% comment %} This is Page ID 21 {% endcomment %}
  4.     <div class="twocolumn_container">
  5.  
  6.       <!-- left column begins -->
  7.       <div class="left_column">
  8.         {% include "features" %}
  9.         {{ content_for_notifications }}
  10.         <div>
  11.           {% yield %}
  12.         </div>
  13.       </div>
  14.       <div>
  15.         {% if request.logged_in? %}
  16.           <p>YOU ARE LOGGED IN</p>
  17.         {% else %}
  18.           <p>MY SIDEBAR</p>
  19.         {% endif %}
  20.       </div>
  21.       <div style="clear:both"></div>
  22.       </div>  
  23.     {% endif %}

So what you've got now amounts to "if the page isn't page 21 act like normal, but if it is page 21 skip down to the page 21 section at bottom". The page 21 section begins after the "else."

You can replace "You are logged in" and "My sidebar" with whatever you'd like. I would recommend leaving the signed-in sidebar alone (by changing <p>YOU ARE LOGGED IN</p> to {% include "_supporter_nav" %}), as I think it makes more sense to change that element by editing the _supporter_nav.html template.

Does this task seem a bit daunting? Drop us a line, and we'll be happy to walk you through it or just do it for you, if that's what you prefer. NationBuilder can be very adaptable, you just have to know a few tricks!

[1] Liquid Markup: http://www.liquidmarkup.org/

Related Posts: