[Tutorial] Google Translate

I am not sure if this is done before, but it is not, let's see how it works.

Step 1
AP > Display > Templates > General > overall_header
Here, look for already created navbar list.
It should look like this:

Code:

<ul class="navbar navlinks{NAVBAR_BORDERLESS}">
    <li>{GENERATED_NAV_BAR}</li>
    <li id="google_translate_element"></li>
</ul>

You will notice that my code is different from yours. So, simply add this part under first generate nav bar, as a list element:

Code:

<li id="google_translate_element"></li>

On the top of the page, you will see lot's of scripts, so let's add our own:

Code:

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Great job so far. Bear in mind that I put the drop menu here, you can add this wherever you want. This was easy way for my tutorial. Save this template, and confirm it afterwards.

Step 2
How does it look like?

I know, I know, it is ugly as hell. But, it is up to you to change CSS as you want it. This tutorial does not cover that. As you know, default language for forums is English. I will pick Spanish here and let you see how translation work.


Final result looks like this:

And the forum itself:


Hope you guys like this tutorial if it has not done before.

Credits to Google translate scripts - I simply integrated this into Forumotion

Thank you for sharing us this!

For default overall_header template, I'll provide some example for adding Google Translate based on your forum version

• PunBB & Invision :

Code:

<ul class="clearfix">
      <li>{GENERATED_NAV_BAR}</li>
      <li id="google_translate_element"></li>
</ul>

• PhpBB3 :

Code:

<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
      <li>{GENERATED_NAV_BAR}</li>
      <li id="google_translate_element"></li>
</ul>

• PhpBB2 :

Code:

<tr class="linklist navlinks{NAVBAR_BORDERLESS}">
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
      <td id="google_translate_element"></td>
</tr>

Thanks for completing it. I did it only for one version I was testing it.

I remember this using a Javascript and the translation option scrolling in the forum.
If you don't want to see in all the page, this will be a good option.

Well done!