[Tutorial] Google Translate

Go down

[Tutorial] Google Translate Empty [Tutorial] Google Translate

Post by System32 September 3rd 2018, 3:52 pm

GOOGLE TRANSLATE TUTORIAL

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?
[Tutorial] Google Translate Screenshot_1
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.
[Tutorial] Google Translate Screenshot_2

Final result looks like this:
[Tutorial] Google Translate Screenshot_3
And the forum itself:
[Tutorial] Google Translate Screenshot_4

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

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

Male Posts : 118
Reputation : 13
Language : Serbian,English

View user profile http://paganism.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by SarkZKalie September 3rd 2018, 6:27 pm

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>


[Tutorial] Google Translate Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1254
Reputation : 202
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by System32 September 3rd 2018, 6:36 pm

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

Male Posts : 118
Reputation : 13
Language : Serbian,English

View user profile http://paganism.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by YoshiGM September 6th 2018, 3:39 am

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!
YoshiGM
YoshiGM
Active Poster

Male Posts : 1081
Reputation : 131
Language : Spanish & English
Location : Mexico

View user profile http://asistencia.foroactivo.com/u21373

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by Johnalex Zarco July 30th 2020, 7:55 am

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
Johnalex Zarco
New Member

Male Posts : 9
Reputation : 1
Language : English
Location : USA

View user profile https://tcf7.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by skouliki July 30th 2020, 9:23 am

@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
skouliki
Manager
Manager

Female Posts : 10888
Reputation : 1370
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper and System32 like this post

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by Johnalex Zarco July 31st 2020, 7:00 am

@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:
[Tutorial] Google Translate 110
I put it in for the BOTTOM_LEFT, and it still isn't showing up. Am I missing something?
[Tutorial] Google Translate 111

Thank-you for your help ^_^
Johnalex Zarco
Johnalex Zarco
New Member

Male Posts : 9
Reputation : 1
Language : English
Location : USA

View user profile https://tcf7.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by SarkZKalie July 31st 2020, 8:02 am

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


[Tutorial] Google Translate Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1254
Reputation : 202
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by skouliki July 31st 2020, 8:47 am

@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

[Tutorial] Google Translate Scre2059



are the javascript enabled ?

[Tutorial] Google Translate Scre2058
skouliki
skouliki
Manager
Manager

Female Posts : 10888
Reputation : 1370
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by Johnalex Zarco August 1st 2020, 6:50 am

@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

[Tutorial] Google Translate Scre2059



are the javascript enabled ?

[Tutorial] Google Translate Scre2058

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)



Last edited by Johnalex Zarco on August 1st 2020, 6:54 am; edited 1 time in total (Reason for editing : Discovered new info :))
Johnalex Zarco
Johnalex Zarco
New Member

Male Posts : 9
Reputation : 1
Language : English
Location : USA

View user profile https://tcf7.forumotion.com/

skouliki likes this post

Back to top Go down

[Tutorial] Google Translate Empty Re: [Tutorial] Google Translate

Post by skouliki August 1st 2020, 7:49 am

You are welcome
skouliki
skouliki
Manager
Manager

Female Posts : 10888
Reputation : 1370
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Johnalex Zarco likes this post

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum