How to sync your nation’s themes with Dropbox

Connecting Dropbox to your nation allows you to edit and sync website theme files and custom page templates directly on your computer, using your favorite text editor.

This integration is particularly useful if you’re collaborating with others. You can share your theme files the same way you’re used to sharing other files through Dropbox. And, as you and your collaborators make changes, Dropbox creates a version history that makes it easy to recover previous edits.

After an administrator connects your nation to a Dropbox account, all edits to your theme and template files must be made using the local files found in the shared Dropbox folder on your computer. This guarantees that everything stays in sync between NationBuilder and Dropbox.

You can only connect one Dropbox account to your nation. However, once your theme files have been synced with your Dropbox account, you can then share those files or folders with as many other team members as you need to. If you have a business account with Dropbox, only the main account will have access as we currently do not support sub-accounts.

Table of contents


Overview video

Follow along with NationBuilder co-founder and VP of Design Jesse Haff as he walks through how to use Dropbox with NationBuilder.


Connect Dropbox from the control panel

Before getting started, make sure you have a Dropbox account. If you have multiple Dropbox accounts, check to see that you are logged in to the one you want to connect to your nation. If you don’t have an account, you can sign up for one from their website.

When you connect your nation with Dropbox, a new “nb_sync” folder will be created in your Dropbox account. If you happen to have an existing folder titled, “nb_sync,” make sure to rename it before the installation.

In your NationBuilder control panel, install Dropbox by going to Settings > Apps > Dropbox.

Click on the button to begin the integration process. If you’re not logged in to Dropbox, you will be asked to log in with your account. When connecting with Dropbox for the first time, you will need to allow NationBuilder access to your Dropbox account.

Note: NationBuilder only has permission to view and access the "nb_sync" folder -- no other folders in your Dropbox account will be affected or visible to NationBuilder. If you’d like to isolate your usual Dropbox account from NationBuilder, you can create a separate Dropbox account specifically to connect with your nation(s).

After successfully connecting Dropbox, you will be redirected to the Dropbox app overview in your NationBuilder control panel with a message confirming the connection.


Access NationBuilder files in Dropbox

After you connect NationBuilder to Dropbox, a new “nb_sync” folder is created in your connected Dropbox account. Your nation’s theme files and customized page templates are located in [your Dropbox account folder] > “nb_sync” folder > [nation_slug].

Within your [nation_slug] folder, there will be up to two folders:

  • “sites” folder: includes folders for each of your nation’s websites and contains any customized page-level files. If your nation has no custom page templates, you will not have this folder. Only pages with custom templates will appear in these folders. Edits made to the page-level file will override the theme file and only affect that specific page.
  • “themes” folder: includes all your website theme files.

Actions that can break the link between your Dropbox account and your nation

Changing the folder names

Do not change the names of any of the folders created by NationBuilder in Dropbox. Changing the names will break the sync of your theme and template files.

Creating nested folders

Any folder that gets added within a nested folder will be ignored. For example, if you create a new folder within a specific theme folder, all files within that folder will be ignored and changes will not sync.


Create new themes and templates with Dropbox

New themes and templates must be created in the control panel. Once you create a new theme or template, the related folder and files will be created and appear in Dropbox and in the control panel. This process can take up to 5 minutes to sync.

Create a new website theme

New website themes for your nation must be created in the control panel.

Create custom page templates

For existing pages on your site to which you would like to add a new custom page template, you can create the template from the control panel.

For new pages on your site, you can now check the box next to “Create a custom template for this page.” This option is only made available for nations connected to Dropbox.


Edit theme and template files with Dropbox

Once your nation is connected with Dropbox, you can open, edit and save theme and page template files from the Dropbox folder on your computer. Files can be modified with any text editor.

Remember, you cannot edit the folder names. Renaming folders in Dropbox will break the sync to NationBuilder.

Note: All changes to your theme and template files must take place from Dropbox. You are unable to make file changes directly from the control panel once Dropbox is connected.


View file status in the control panel

View website theme file status:

To view the status of your website theme files, go to Website > [Select website with the change] > Theme > Current custom theme.

The “Files” tab has the list of all of your website theme template files and additional files. When a file is updated, the status of the file in the “Changes?” Column will change to “changes pending.” You can also see when the file was last updated.

If you want to have a quick view of base theme files you have customized, you can go to the “Templates” tab and check the “Custom?” column.

When a changed file gets published, the status will update to “yes,” indicating that the file has been customized and is live. If you make another change to the published file, the status will go back to “changed” until the file gets published again. When no changes are made to a file, the status will remain as “no.”

View custom page template file status

Whether you update one file or multiple files, you can get an overview of all customized page templates by going to Website > [Select site] > Pages. When looking at pages in “Yours,” “Active,” “User submitted,” “Flagged,” “Old,” and “Scheduled,” the “Type” column indicates customized pages as “(custom)” and lists pages with pending changes as “(pending custom).”


Preview and publish changes in the control panel

The changes you make to your website theme or custom page template files in Dropbox will automatically sync to Preview mode for you to review in the control panel. Preview mode lets you see changes to your theme without pushing the changes live to your website.

View theme and template files in the control panel

All files accessible in Dropbox are also viewable in the control panel.

Note: You cannot make file changes in the control panel. You must edit files by accessing the file from Dropbox on your computer.

Website theme files: Website > [Select website] > Theme > Current custom theme > [Theme Files]

Individual page template files: Website > [Select site] > Pages > [Select page] > Template

Preview and publish a website theme:

To preview changes to your website theme files, go to Website > [Select website with the change] > Theme > Current custom theme.

Click on the tab to review a change. The option to both preview and publish will only be available when there is a file change. You can select the page slug you want to preview, view the page as a logged out or logged in user, select the theme to preview from the drop down menu, choose to continue editing the theme, or choose to publish the change.

To get out of Preview mode, click on the button and you’ll be redirected to your current custom theme’s “Templates” tab. However, you will not be able to edit the file’s template from the control panel because changes must be made within Dropbox.

To see new file changes made while in Preview mode, refresh the page.

If you’re ready for the change to go live, click on the button. If you've updated multiple theme files and page templates, all of those changes will get published. Make sure to review all of your changes before they go live.

Publishing from Preview mode will publish all theme and page template files that have pending changes.

Preview and publish individual theme files:

If you only want to publish changes to a single theme file, you can hover over the “changes pending” button and select to Publish changes.

This is useful if you are working in a team and don’t want to publish changes someone else made.

Preview and publish a custom page template

When you preview from a specific page, you can select the page slug you want to preview, view the page as a logged out or logged in user, select the theme to preview from the drop down, choose to continue editing the page, or choose to publish the change.

If you want to get out of Preview mode, you can select the button and you will be redirected to the page’s “Template” tab. Here, you have the option to:

  • Discard all drafted changes, restoring the template to its published state
  • Publish all drafted changes to the template
  • Delete the custom template entirely

Since you are connected to Dropbox, remember to make the changes within Dropbox.


Share theme and template files with Dropbox

You can share any and all of the folders created by NationBuilder in the “nb_sync” folder with other Dropbox users using the Dropbox sharing settings. Changes they make can be previewed and published via the control panel.


Add new theme and template files with Dropbox

If you have Dropbox installed on your desktop, you can take any file and drag it into the appropriate folder for a website theme. Once you drop the new file in the folder, the new file will be visible in the control panel at Website > [Select website] > Theme > Current custom theme > [Files].

You can also add html files to the "sites" folder to create custom templates for those pages. For example, to create a custom template for a page with the slug "donate," add a file named donate.html to the desired site's folder. Only html files will sync to your nation after being added to the “sites” folder.


Remove theme and template files with Dropbox

To remove files from your website theme or remove a custom page template, delete or remove the file from the folder. Deleting or removing a file from Dropbox will also remove the file from the control panel.

If you accidentally delete a file or an entire theme folder from Dropbox, Dropbox allows you to restore the file within a 30-day period.


Common reasons why Dropbox isn’t working

I’m seeing errors in Preview mode or
The changes I saved in Dropbox aren't being reflected in Preview mode.

If updates you make in Dropbox to a file contain a syntax error, Preview mode will not reflect any of the new file changes. Once you correct these errors and save the changes in Dropbox, Preview mode will then load your file with all of its changes.

To check for these errors, go to Website > [Select website with the change] > Theme > Current custom theme > Preview.

An error message will appear in Preview mode, identifying which file and the line number where we found the error along with the timestamp of when the error occurred.

Once you think you’ve fixed the change and saved the file in Dropbox, refresh Preview mode. The error message should disappear, allowing you to preview and publish.

Changing the folder names

Do not change the names of any of the folders created by NationBuilder in Dropbox. Changing the names will break the sync of your theme and template files.

Creating nested folders

Any folder that gets added within a nested folder will be ignored. For example, if you create a new folder within a specific theme folder, all files within that folder will be ignored and changes will not sync.


Disconnect Dropbox

First, unlink the NationBuilder app from your personal Dropbox account settings. Go to Settings > Security in Dropbox and click the 'x' icon next to NationBuilder under the "Apps linked" heading.

disconnect_dropbox_account.png

Next, in your control panel, go to Settings > Apps > Dropbox and select the button.

Confirm that you want to disconnect your Dropbox account, and the permissions to the Dropbox account will be removed.


Related resources

Design a custom theme

Become a NationBuilder Architect

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.

Not finding what you're looking for? Browse the Website FAQs