[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!

How does this work for ModernBB version? My forum is looking at doing this but we can't figure out how. Thank-you!

P.S. I tried following the instructions the exact way as posted here, but nothing seems to be popping up.
Thanks for your help!

@Johnalex Zarco wrote:How does this work for ModernBB version? My forum is looking at doing this but we can't figure out how. Thank-you!

P.S. I tried following the instructions the exact way as posted here, but nothing seems to be popping up.
Thanks for your help!

you can add this instead https://help.forumotion.com/t140278-add-a-translator-on-your-forum?highlight=translator

@skouliki wrote:

@Johnalex Zarco wrote:How does this work for ModernBB version? My forum is looking at doing this but we can't figure out how. Thank-you!

P.S. I tried following the instructions the exact way as posted here, but nothing seems to be popping up.
Thanks for your help!

you can add this instead https://help.forumotion.com/t140278-add-a-translator-on-your-forum?highlight=translator

I got the code inputted correctly as instructed in that thread:

I put it in for the BOTTOM_LEFT, and it still isn't showing up. Am I missing something?


Thank-you for your help ^_^

Hello @Johnalex Zarco please provide your site URL here

EDIT: I couldn't find any ID google_translate_element on your site. Make sure you modified overall_header template and added it to navigation bar from first post

@Johnalex Zarco wrote:
I put it in for the BOTTOM_LEFT, and it still isn't showing up. Am I missing something?

i tested the code for your version and it is working ok





are the javascript enabled ?

@SarkZKalie wrote:Hello @Johnalex Zarco please provide your site URL here

EDIT: I couldn't find any ID google_translate_element on your site. Make sure you modified overall_header template and added it to navigation bar from first post

I did do that, and it wasn't working.

@skouliki wrote:

@Johnalex Zarco wrote:
I put it in for the BOTTOM_LEFT, and it still isn't showing up. Am I missing something?

i tested the code for your version and it is working ok





are the javascript enabled ?

Javascript should be enabled. Could it not be appearing because my computer doesn't have Javascript installed?

ETA I went and checked and it wasn't enabled. Upon enabling it, the thing popped right up. Thank-you so much for your help (I am clearly not tech savvy lol)

You are welcome