Language Switcher
The Language Switcher is part of a new feature in Joomla to create a multi-language website. In Joomla 1.6.2 the configuration of this feature has changed.
Joomla CSS is in two languages. When we updated the website from 1.6.1 to 1.6.3 we noticed that the Language Switcher (flags) disappeared. After we investigated what was wrong, we noticed that the configuration for creating a multi-language website was changed and is now more complex than it was before. For this reasen we have published a tutorial for creating a multi-language website and make the Language Switcher (flags) visible again.
Video tutorial
There is also a Video Tutorial available about Creating a Multi Language website for Joomla 1.6 / 1.7 / 2.5.
Tutorial multi-language website Joomla (from version 1.6.2)
We start the tutorial with a Joomla 1.6.3 default installation with only the English language.
In this example we add the Dutch language pack, but it could be one or more other languages of your choice, the procedure is the same.
Step 1: Install Joomla 1.6.3 or later default English language
After the website is installed it looks as follows (no example data is installed).
Step 2: Download the language pack
We downloaded the language plack from Joomla code. In the list of files we chose to download: nl-NL_joomla_lang_full_1.6.3v1.zip or later (complete language pack for front- and backend).
Step 3: Install the language pack
Go to the backend of Joomla and install the language pack in the usual way (Extensions -> Extension Manager).
Step 4: Configure the languages and the system language-filter plug-in
Go to Extensions and choose the Language Manager. There are 2 languages present. The default language is English and we added the Dutch language.
Go to the tab "Content". Now only the English language is set for the content. Click on New and fill in the required data.
Save the configuration and go to Extensions -> Plug-in Manager. Search in the list for the System - Language Filter and publish it.
Step 5: Activate the module Language Switcher
Go to Extensions -> Module Manager and choose New ->Language Switcher and fill in the required data.
On the right side of this screen you can configure some options. This is how we configured the Language Switcher for Joomla CSS.
Save the configuration.
When you have done so far take a look at the front-end of the website. You see no change at all. The Language Switcher is not visible (flags). We now first test if the languages are installed the right way. You can switch languages bij editing the url adress in your browser. If the site is in english, you have =en at the end (we switched off the SEF in Global configuration). If the site is in Dutch you have =nl at the end of the url. By editing the url you can switch languages. Your languages should work if you have done al the steps.
To get the Language Switcher working we have to do some more.
Step 6: Create two new main menus for the 2 languages
The default Joomla installation already has a Main Menu for all languages. Do not change this. We have to create 2 new main menus voor the English and Dutch language.
We go to
Menus -> Menu Manager -> Add new menu
and create first the English Main Menu. In the title and menu type we added "English", because we don't want to get confused which is which.
In the same way we create the Dutch Main Menu (Hoofdmenu).
Now we have 3 Main Menus in the list. For the new Main Menus we don't have menu-items yet. We have to create for each new Main Menu the homepage (Featured Articles).
Be sure to select the English language for the home item and create a unique Alias by adding -en.
Do the same for the Dutch menu item for the homepage and create a unique Alias by adding -nl.
Later on you can complete the Main Menu with other items.
To show the menus in the front-end you also have to create separate modules.
Step 7: Create the modules for the new main menus
Go to Extensions -> Module Manager and add a new module for the Main Menu English.
Be sure to select here the English language. Choose the correct menu in Basic Optons on the right side.
Do the same for the Dutch language and order the list of modules.
Step 8: Depublish the default Main Menu
Now that we have created all the necessary menus and modules we depublish the original default Main Menu module. It will not be visible anymore on the website. Do not delete the module or delete the original Main Menu.
Step 9: Activate the module Language Switcher
Now it is possible to activate the module Language Switcher and make it visible.
Go to Menus -> Main Menu English and click on the star in the column HOME.
The star is replaced by a Flag.
Do the same for the Dutch Menu.
After all this work your Language Switcher should be visible and working.
Back to the styling of the Language Switcher of the example website
We continue with the styling of the module Language Switcher for the example website.
Print screen without additional CSS
Structure with classes and id's
div.moduletable_language div.mod-languages_language ul li a img
CSS
/* ---------------------------------------------------
Language / language module class suffix = _language
------------------------------------------------------ */
div.moduletable_language div.mod-languages_language {
padding: 11px 4px 0 0;
float: right;
}
div.moduletable_language div.mod-languages_language ul {
list-style: none;
padding: 0;
margin: 0;
}
div.moduletable_language div.mod-languages_language ul li {
list-style: none;
margin: 0;
float: left;
padding: 0 7px 0 0;
}
div.moduletable_language div.mod-languages_language ul li a img {
border: 1px #ccc solid;
}
div.moduletable_language div.mod-languages_language ul li a:hover img {
border: 1px #fff solid;
}
Print screen after applying CSS
-
2012-04-17 09:12:16 | Wim Verhoef - Unpublishing default Main menuExcellent tutorial, but in my case there is one major problem.
I cannot unpublished the default main menu, because there is one of the items ("home") marked with the default star and the system is not allowing depublishing a default item.
When I try to delete the "default star" behind this item, the system won't let me do, because it says that you need one default item.
The result is, that the specific menu modules for the 2 languages ( english and Spanish) don't show up in the front end; the only thing that is showing up is the only not unpublished item of the default main menu.
Thanks for giving me some hints
-
2012-04-17 09:21:47 | Rob van Oudheusden - RE: Unpublishing default Main menuIt is correct that you cannot unpublish the original main menu for all languages.
So you don't unpublish the menu, but the main menu module for this menu. This is also stated in the videotutorial.
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - RE: creating langue swicher for joomla 1.5There is no languageswitcher in Joomla 1.5.
You have to use a multi language component "Joomfish". Look in www.extensions.joomla.org
and search for joomfish.
-
1901-12-13 20:45:52 |Unregistered| abdirzak - creating langue swicher for joomla 1.5please could any one help me how i can create a language swicher for joomla 1.5
best regards
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - RE: picture changeYou have to edit the sourcecode of Joomla (I cannot give you advice on that)) or use a language component, like Joomfish, where you can choose your own language flags
-
1901-12-13 20:45:52 |Unregistered| Georgi Inkov - picture changeHi!!!I want to change my flag image,but by default it is .gif file.I want to change it with .png.How can I do that?
-
1901-12-13 20:45:52 |Unregistered| Rob van Oudheusden - Flags horizontallyThis message is meant for Jaime and John.
Send me your site adress and I will have a look.
Send it to info@joomla-css.nl
-
1901-12-13 20:45:52 |Unregistered| John - Cannot display the flags horizontallyHello
Thanx for a very discriptive tutorial.
I have only one problem i could not seem to know where to edit the css in order to display the languages horizontally.
I would appriciate very much if you could help me.
Thanx in advance
When I publish the Language filter, my homepage is gone, and the url becomes mysite.org/index.php/en/en/en/en/en/en/en/en/en/en/en/en/en/en/en/en/en/en/en/ en/en/en
what went wrong?