Displaying different content based on locale

In the body class of each page there's a locale class that you can use to display different content based on different locales. For instance, if the detected locale is 'de', the locale class would be 'locale_de'.

For instance, lets say that you add the following html for the home page:

<div class="english_content">
  Some English content
</div>
<div class="german_content">
  Some German content
</div>

What this will do is to add german and english content, with the english content being displayed if there's nothing being detected.

You can then add the following Stylesheet override:

.english_content { display: none; }
.german_content { display: none; }
.locale_en .english_content { display: inherit; }
.locale_de .german_content { display: inherit; }

What this will do is to only display the german content if the german locale has been detected. You can continue to add different locales in the same fashion. The default locale is english so if someone sends a preference for Italian with this configuration, the english content will be displayed.

Please note that you will need to complete this for all locales that you have loaded in Admin → Locale Editor.

Another thing to note is that if you use complex locales, like if you have both fr and fr-CH and the preference is sent for fr-CH, the class will list both locale_fr and locale_fr-CH so if you don't differentiate between fr and fr-CH locales for the content you can just use locale_fr for detection and it will use the fr locale for both fr and fr-CH.