Creating an NationBuilder website in a language other than English

NationBuilder has customers in nearly 100 countries, using websites in many different languages. Our templates are set up in English, but it is possible to create a public facing website in any language.


Creating your theme

For your NationBuilder site, you can either use one of our public themes, or have a certified NationBuilder Architect build a custom theme. If you have an architect build a site for you, they can work with you to complete the translation during the build.

If you are using a public theme, you will need to clone it to be able to edit it. Go to the website section of your control panel, and under Theme, click ‘create new custom theme’.

new_theme.png

Once you have cloned your theme, you will be able to access all of the files within it. There are a few different types of file, that you will need to treat differently.

templates.png

CSS stylesheets

  • These files define the appearance of your site. They do not influence the content, so there are no terms in them that need translating.

HTML Templates

  • These files define the layout and content of your pages, so require the most translation.

Email templates

  • These files define the default content for automatic emails, so should be translated.


Colors in HTML templates

Within the HTML templates, the content is color coded to help you edit it. You should use the colors as a guide as to how to approach the translation.

petition.png

 

  • White - plain text. You should translate all text in white.
  • Blue - HTML. Do not translate any of these items.
  • Green - liquid conditionals. The majority of these should not be translated. There are a small number of terms in these which should be translated
  • Yellow - liquid variables. Do not translate existing terms. You will need to add items to some of these to modify the output into your chosen language.
  • Red - links and references. Do not translate these terms.

The first step in each template file is to translate all the plain text (white) elements.

Next, you will want to check for elements that are produced by liquid - either in yellow or green text. Here are a couple of key examples:

Submit buttons - on most page types, the text on a button is set by liquid coding. This is because it can vary depending on whether the person viewing your site has taken the action already or not. In these cases, it is the text which follows ‘submit info’ that you want to change.

For example, in this code:

{% submit_tag "Update info", class:"submit-button" %}

You want to change “Update info”, without changing any of the other terms in the code.

Months of the year in calendars and events - Dates in NationBuilder output in a written format like this:

Wednesday, November 14, 2018

This is produced by a yellow variable, for example:

{{ event.event.local_start_at | date: '%A, %B %d, %Y at %I:%M %p' }}

You can change the written form of the months using the ‘replace’ element in the variable, like this:

{{ event.event.local_start_at | date: '%A, %B %d, %Y at %I:%M %p' | replace: 'January', 'Janvier' | replace: 'February’, ‘Fevrier’ }}

You will need to set a replace for every term you want changed. So if you wish to have all the days of the week and months of the year in your language, you will need to add 19 ‘replaces’. If you don’t explicitly tell it to replace a term, it will remain in English.

Alternatively, you could choose to convert this into a format that uses numbers only. For example:

{{ event.event.local_start_at | date: '%D, %Y á %H:%M' }}

This produces date formats in non-written formats like this:

11/14/18, 2018 at 19:00


Social share buttons

Pages in NationBuilder include share buttons for Facebook and Twitter automatically. To change the language of these, you need to edit two items in the “layout.html” file.

First, in the <html> tag at the start, change ‘en’ in xml:lang="en" lang=“en” to the standard two letter code for your language. If the lang attributes aren’t there, add them. This will change the language of the Twitter buttons.

Also change

{{ content_for_footer }}

to

{{ content_for_footer | replace: 'en_US', 'nn_NN' }}

Where nn_NN is the supported Facebook locale.  Facebook maintains a Facebook Locales XML file listing supported locales.


Things that can’t be translated

There are a small number of theme elements that unfortunately cannot currently be translated. You will either need to remove these or use them in English.

Social share prompt introduction - When someone takes an action on your site, they are prompted to share on social media. This prompt is preceded by a message specific to the type of action they have taken. You cannot translate the page specific terms (eg, ‘Thank you for donating), so you will need to replace it with a standard message (eg, ‘Thanks for supporting our campaign).

In the file _flash_share.html, you need to delete the item {{ flash.message }}, and insert there your standard message in plain text instead.

Activity streams - On action pages, you have the option to include a stream of activity, which shows what actions people have taken on the page. The stream is generated internally, so you can’t translate the individual elements within it. We recommend that you either allow the stream to be displayed in English or turn it off.

Administration email subject lines - You can’t currently translate the subject lines of automatically generated administration emails, like password reset or account authentication.

Control panel notification emails -  You also can’t translate the content of notification emails for your control panel users.


Things that can’t be localized

On calendar pages, you can’t have the search options in kilometers instead of miles. You can convert the display to kilometers, but you will be replacing the generated values in miles, so will not have round numbers on display.

Alternatively, you can just replace ‘miles’ with ‘km’. This will look right visually, but the results will not be accurate.

 

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.