Adding_Languages_menu_in_the_frontend

To leverage the full functionality of the extension you should add a menu in your site so users can switch to the language they want. If you are familiar with how to add frontend modules to your pages and layouts, you will feel at home with this one too. The extension offers tree ways (templates) to switch page languages in the frontend - a select dropdown menu, a menu with flag icons and a links-based menu with flag icons. The first two make POST requests to the site to switch the language while the last produces a GET request when you click on a flag. You can modify them to produce a GET request or write your own and use it too :). Here is an example. Here is the work-flow for adding a Languages menu:

1. Go to your theme modules section.
2. Click on "Add module".
3. From the "Module type" dropdown select Navigation/Languages menu.
4. Expand the "Template Settings" subpallete and from the "Navigation template" dropdown select "nav_18nl10n_language_icon_menu" or "nav_18nl10n_language_select_menu" or better use nav_18nl10n_links_language_icon_menu.
5. Click on "Save and close".
6. Go to the Layout section and edit the layout(s) on which you want the "Language menu" to appear.
7. Add yet another row with dropdowns and select the column or custom section were you want the menu to appear. Select the newly added module too :).

Example:

Show some creativity and copy the menu template from TL_ROOT/system/modules/i18nl10n/templates to where you keep your frontend templates. Edit it by setting style="display:none" to the radio button and you are done. Now clicking on the flag will switch your page language. Alternatively you could describe the style in a separate CSS file where you keep your styles definitions or right in the theme's CSS.

Example:

#!CSS
.mod_i18nl10nnav { padding-left:5px; }

.mod_i18nl10nnav form label.active img ,
.mod_i18nl10nnav a.active img {
    border: 1px outset #111;
}
.mod_i18nl10nnav form label:hover img,
.mod_i18nl10nnav a:hover img {
    border: 1px outset #111;
}
.mod_i18nl10nnav form label {cursor:pointer;}
.mod_i18nl10nnav form input.language {display:none;}

Result:

All well and good but there is still something missing. Let us see how to make our main menu multilingual.

---

Support this project by making a donation or sending a gift.