In release X3.30.0, we added support for interface translations. This means that words used in the X3 website interface like "Images" and "Folders", will automatically translate to the language of the visitors browser. For example, "Images" and "Folders" will display as "Bilder" and "Galerien" in German language browsers. Fully dynamic!
* This feature affects only the X3 website interface and has nothing to do with the panel or publishing your X3 website in multiple languages.
How does it work?
Simple yet effective, languages are stored in CSS files, which are dynamically loaded once the browser-language is detected. If the visitors browser language is not (yet) supported, default language will display (English by default, but can be changed). You can find the language files in /app/public/lang/*.css.
Options
You can find a few options under Settings > Advanced > Interface language. First option "interface language" sets the default language to use if the visitors browser-language is not supported or if "auto language" is disabled. Second option "auto language" will detect visitors browser-language and load appropriate language file if supported.
How to override translations?
Once translation files are properly revised, I am hoping this won't be necessary. Although you can edit the translation files directly, you would then need to clear your browser cache, and these files will get overwritten on X3 updates. If you really need to override a specific translation, you can add it/them to Settings > Custom > Custom CSS like this:
Code
[data-lang="folders"]:after { content: 'alben' !important; }I have already added translation files for German, Spanish, French and Italian. Apart from German, which I have had help to translate, other translations are basically done in Google Translate. Below are the translations. Feel free to suggest changes or add new languages! Thnx.
German :flag_de: / Deutsch / de.css
Code
[data-lang="chat"]:after { content: 'chat'; }
[data-lang="comments"]:after { content: 'kommentare'; }
[data-lang="folder"]:after { content: 'galerie'; }
[data-lang="folders"]:after { content: 'galerien'; }
[data-lang="image"]:after { content: 'bild'; }
[data-lang="images"]:after { content: 'bilder'; }
[data-lang="map"]:after { content: 'karte'; }
[data-lang="pause"]:after { content: 'anhalten'; }
[data-lang="play"]:after { content: 'abspielen'; }
[data-lang="styles"]:after { content: 'stile'; }Code
[data-lang="chat"]:after { content: 'chat'; }
[data-lang="comments"]:after { content: 'comentarios'; }
[data-lang="folder"]:after { content: 'carpeta'; }
[data-lang="folders"]:after { content: 'carpetas'; }
[data-lang="image"]:after { content: 'imagen'; }
[data-lang="images"]:after { content: 'imagenes'; }
[data-lang="map"]:after { content: 'mapa'; }
[data-lang="pause"]:after { content: 'pausar'; }
[data-lang="play"]:after { content: 'reproducir'; }
[data-lang="styles"]:after { content: 'estilos'; }Code
[data-lang="chat"]:after { content: 'chat'; }
[data-lang="comments"]:after { content: 'commentaires'; }
[data-lang="folder"]:after { content: 'dossier'; }
[data-lang="folders"]:after { content: 'dossier'; }
[data-lang="image"]:after { content: 'image'; }
[data-lang="images"]:after { content: 'images'; }
[data-lang="map"]:after { content: 'carte'; }
[data-lang="pause"]:after { content: 'pause'; }
[data-lang="play"]:after { content: 'jouer'; }
[data-lang="styles"]:after { content: 'styles'; }Code
[data-lang="chat"]:after { content: 'chat'; }
[data-lang="comments"]:after { content: 'commenti'; }
[data-lang="folder"]:after { content: 'cartella'; }
[data-lang="folders"]:after { content: 'cartelle'; }
[data-lang="image"]:after { content: 'immagine'; }
[data-lang="images"]:after { content: 'immagini'; }
[data-lang="map"]:after { content: 'mappa'; }
[data-lang="pause"]:after { content: 'pausa'; }
[data-lang="play"]:after { content: 'riprodurre'; }
[data-lang="styles"]:after { content: 'stili'; }
