Skip to main content
  1. Home
  2. NationBuilder Architect

Become an Architect: Process for Theme Editors

If you are relatively new to building websites on NationBuilder and want to learn more about our theming process and use of liquid in NationBuilder whilst obtaining your architect certification, then the theme editing process will be best for you as it is a step by step guided process and we are happy to support you along the way.. 

Alternatively, if you're comfortable with NationBuilder theming concepts, then you may want to go ahead and build out a brand new theme for future use; you can explore more about that process here.

In order to become an Architect via the editor route, you will first need to sign up in order to request a sandbox and from there you will work through an exercise that will help you to demonstrate your ability utilising NationBuilder theming and knowledge of liquid, css and HTML. In the process we hope that you may discover new functionality usages that you were not already aware of that will help you to learn how to make powerful and dynamic NationBuilder websites.

You will be expected to have good understanding of HTML and CSS (Sass) concepts and you'll be able to find solutions for specific liquid steps within our Liquid in NationBuilder course, theming documentation and Liquid documentation. 

If you are struggling through this process, please don’t hesitate to reach out if you have questions on specific issues or get stuck at certain moments; we want you to be successful and are very happy to point you in the right direction. 

When completed, please send links to the relevant pages to [email protected]. To help us evaluate as quickly as possible, please include links to the Control Panel & files you have made edits to, and feel free to include explanations of how you have done, what you have done.  

1. In your sandbox, take a clone of a stock theme (would recommend Action, Momentum or Raise) to create a new theme.

2. Update the Colour codes and fonts as follows:

  • Colour:
    • Primary: #51F682
    • Text: #1A1A1A
    • Secondary Text: #8fcca2
    • Base (grey): #8251F6
  • FONT: Update main website text font to “Raleway”. This is a custom, google font that will need to be added to the head tag of the layout.html file and then set to appear in the stylesheet (which can be configured in the theme.scss and/or variables.scss file)
  • Main Container: Reduce Padding to 40PX

3. Add an email signup form banner to the homepage, using a liquid  {% subpage %} tag (in order to link it to a specific page). Info on how to achieve this here. 

4. Make it so that the sign up form element shows up when you add the page tag “Signup Bar”. In order to achieve this you will need to use a for loop and if/else statement and some liquid page variables.

5. Ensure that the email signup bar applies a tag “Origin: Signup Bar” and adds the signup to a path and automation upon submission (or confirm how you would do this in writing). Note that subpages have different settings to their parent pages so this will need to be applied at the subpage leve.

6. Include a custom field in the signup form but only viewable for sortalogged in users. More information on how to achieve that here. 

  • If they have a value for that field, have that prefilled. 

7. Edit the footer to display the sortalogged in supporters address, with a button to update this (linking to a suitable signup page)

8. Make edits to the public profile page to achieve the following: 

  • Include profiles address City in their about section
  • Include the membership start date and end date and make these variables viewable only when viewing their own profile. 
  • Create a badge for anyone with a specific tag (e.g. ‘Gold member’)

9. Create a basic page where the content takes up half of the main container (on the left) with the other half being an image that’s uploaded to the files tab (displaying on the right). Ensure that when viewed on mobile this displays top/bottom. Use Bootstrap HTML & CSS to achieve this.