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
- Colors in HTML templates
- Social share buttons
- Things that can’t be translated
- Things that can’t be localized
Creating your theme
For your NationBuilder site, you can either use one of our stock 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 stock 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.
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.
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.
- 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 listing of 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. It is possible to translate the activity stream using javascript. You can read more about that here and here.
Autoresponse email subject lines - These subject lines aren't available in the theme files and thus can't be translated by default. Each autoresponse subject line needs to be translated within the pages settings.
Administration email subject lines - You can’t currently translate the subject lines of automatically generated administration emails, like password reset or account authentication. These are, however, set by the language option set in the Site Settings of your site. So you can choose from any of the languages already available there.
Control panel notification emails - You also can’t translate the content of notification emails for your control panel users, though these will never be seen by visitors to your site - only your control panel users.
Other microtext notifications- There are small user notifications that occur which users may see in English, such as "Saving" when a form is submitted but the page has not yet reloaded.
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.