How? google translation button into eg top menu

Does somebody know how to insert a google translation button into the top menu or between for example logo and search section.

 

I tried the solution https://gtranslate.io/ but that did not work. I inserted the code of the html version into the HEAD INJECTION field in the basic settings section. The button appeared in the top left corner in a new row above the logo section. But the button would not open. Besides the positon was not good. 

 

I think best position would be in the space between logo and search function. Does anyone have a good solution and can show us all, how and where to implement the code. Thank you.

 

I suppose the element would have to be put here:   _sub_header.html

Quote · 15 May 2020

I had a similar problem and gave up. 

Quote · 16 May 2020

Hello mrtn!

 

Without an example of the inserted code it's hard to detect what's wrong. About your gtranslate.io soltuion they have specific point there like:

"You just need to change your DNS records to add sub-domains or domains dedicated to your languages to our Translation Delivery Network. So when someone visits the new added sub-domain it will show the translated clone of your website. After that you can just configure and place the GTranslate Free widget on your site to enable language selection."

I guess it might be a problem too.

Quote · 11d ago

Anton's using it on his demo site:

http://dolphin72.aqbsoft.com/

It seems to be working fine, but overlapping the logo. 

Google Translate.jpg · 141.2K · 63 views
Quote · 11d ago

For example this widget code. I insertedt this code into the HEAD section. The button shows up, but has no function. I also tried this "literate" addition. Please see 2 attached images

 

<!-- GTranslate: https://gtranslate.io/ -->

 <select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="en|af">Afrikaans</option><option value="en|sq">Albanian</option><option value="en|ar">Arabic</option><option value="en|hy">Armenian</option><option value="en|az">Azerbaijani</option><option value="en|eu">Basque</option><option value="en|be">Belarusian</option><option value="en|bg">Bulgarian</option><option value="en|ca">Catalan</option><option value="en|zh-CN">Chinese (Simplified)</option><option value="en|zh-TW">Chinese (Traditional)</option><option value="en|hr">Croatian</option><option value="en|cs">Czech</option><option value="en|da">Danish</option><option value="en|nl">Dutch</option><option value="en|en">English</option><option value="en|et">Estonian</option><option value="en|tl">Filipino</option><option value="en|fi">Finnish</option><option value="en|fr">French</option><option value="en|gl">Galician</option><option value="en|ka">Georgian</option><option value="en|de">German</option><option value="en|el">Greek</option><option value="en|ht">Haitian Creole</option><option value="en|iw">Hebrew</option><option value="en|hi">Hindi</option><option value="en|hu">Hungarian</option><option value="en|is">Icelandic</option><option value="en|id">Indonesian</option><option value="en|ga">Irish</option><option value="en|it">Italian</option><option value="en|ja">Japanese</option><option value="en|ko">Korean</option><option value="en|lv">Latvian</option><option value="en|lt">Lithuanian</option><option value="en|mk">Macedonian</option><option value="en|ms">Malay</option><option value="en|mt">Maltese</option><option value="en|no">Norwegian</option><option value="en|fa">Persian</option><option value="en|pl">Polish</option><option value="en|pt">Portuguese</option><option value="en|ro">Romanian</option><option value="en|ru">Russian</option><option value="en|sr">Serbian</option><option value="en|sk">Slovak</option><option value="en|sl">Slovenian</option><option value="en|es">Spanish</option><option value="en|sw">Swahili</option><option value="en|sv">Swedish</option><option value="en|th">Thai</option><option value="en|tr">Turkish</option><option value="en|uk">Ukrainian</option><option value="en|ur">Urdu</option><option value="en|vi">Vietnamese</option><option value="en|cy">Welsh</option><option value="en|yi">Yiddish</option></select>

 

<script type="text/javascript">

/* <![CDATA[ */

if(top.location!=self.location)top.location=self.location;

window['_tipoff']=function(){};window['_tipon']=function(a){};

function doGTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;if(location.hostname!='translate.googleusercontent.com' && lang_pair=='en|en')return;else if(location.hostname=='translate.googleusercontent.com' && lang_pair=='en|en')location.href=unescape(gfg('u'));else if(location.hostname!='translate.googleusercontent.com' && lang_pair!='en|en')location.href='https://translate.google.com/translate?client=tmpg&hl=en&langpair='+lang_pair+'&u='+escape(location.href);else location.href='https://translate.google.com/translate?client=tmpg&hl=en&langpair='+lang_pair+'&u='+unescape(gfg('u'));}

function gfg(name) {name=name.replace(/[[]/,"\[").replace(/[]]/,"\]");var regexS="[?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.exec(location.href);if(results==null)return "";return results[1];}

/* ]]> */

</script>

004 gtranslate.PNG · 213.1K · 5 views
004 gtranslate2.PNG · 18.5K · 5 views
Quote · 11d ago

I had a few moments to spare and I installed the button on my Demo site. It's up the top left where you don't want it, but it's working perfectly. You can go to my site and look at every page to see it working without logging in. I set it for French on the home page and it works perfectly on every page as far as I can see.

http://digital-junction.com/demo

I don't think it will be hard to get it between the search box and the logo but I probably won't have time for that. Hopefully someone else can help you there.

I used the following code in the head injection in Admin/Basic Settings.

<div id="google_translate_element"></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: 'en'

}, 'google_translate_element');

}

</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

 

 

Quote · 6d ago

When i use this code, i see the button, but i cant use it. Not in chrome and not in firefox. Really strange.

Quote · 6d ago

That's interesting. My demo site is the ALT template as supplied with a few CSS things deleted. As you can see, the Translate button works.

My main site is a heavily modified version of EVO and it doesn't work there. I can't see the button, just an enlarged space across the screen where the button should be.

When I change the menu back to ALT, it works fine.

Go to my demo site http://digital-junction.com/demo and change the template from ALT to EVO. The button disappears. There's obviously something about the EVO template that stops it from working. Most 3rd party developers seem to base their templates on EVO, so it may pay you to take the problem up with the template developer.

Alternatively, Leonid may be able to offer a solution.

Quote · 6d ago

Hello johnk42!

 

Well, from my side this button works with both templates...

Quote · 3d ago

 

That's interesting. My demo site is the ALT template as supplied with a few CSS things deleted. As you can see, the Translate button works.

My main site is a heavily modified version of EVO and it doesn't work there. I can't see the button, just an enlarged space across the screen where the button should be.

When I change the menu back to ALT, it works fine.

Go to my demo site http://digital-junction.com/demo and change the template from ALT to EVO. The button disappears. There's obviously something about the EVO template that stops it from working. Most 3rd party developers seem to base their templates on EVO, so it may pay you to take the problem up with the template developer.

Alternatively, Leonid may be able to offer a solution.

 

It's due to the positioning on the background image. It's covering it up.

That can be easily fixed by adding style="position: relative; z-index: 100;" to the google translate div element.

https://www.deanbassett.com
Quote · 3d ago

Thanks Deano. That worked:

<div id="google_translate_element"
style="position: relative; z-index: 100;" 
></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
</script>

That places the element on the very top left corner, shoving everything else down to accommodate it.

Anton's example when using EVO has it placed between Search and the Logo, which is what @Mrtn is looking for and it's possibly the best place for it.  CSS is still a foreign language to me.

Default.jpg · 63.6K · 26 views
Anton.jpg · 56.3K · 26 views
Quote · 3d ago

That too can be fixed. Change the position: relative to position: absolute and add a top:0px and left:0px;

Then that translate code for the div needs to be inside the sys_logo_wrapper div. From there the top:0 and left:0 can be adjusted to get the position where it is wanted.


https://www.deanbassett.com
Quote · 3d ago

1.

Thank you all for your help.

 

It works with your modification. But the font changes on the whole website. Does anyone have this effect, too?

 

2.

Besides, this button really is huge. Has anyone an idea to create a sleek design solution? Maybe put this function into a button in the service or bottom menue? I tried that with entering different parts of the script code into the SCRIPT field, but that did not work. (see images) Maybe i try to duplicate a page like privacy and build a page for google translation, that then holds the button for the user to select the needed language. .... 

 

EDIT:

 

I also tried this in the script field "<div id="google_translate_element"

style="position: absolute;top:5px; left:25%; z-index: 100;" 

></div>" 

 

3. 

Another problem is when you have multiple language code on your website. It seems that you definetly always have to tell google which language your text is. Like in this example here english. Sadly there seems to be no autodetect function to determine the original language.

005 glate.PNG · 53.8K · 4 views
Quote · 2d ago

Hi Mrtn,

 

I'm too busy to play with this any more, but the default text is determined by the fifth last line in the snippet:

pageLanguage: 'en'

I'll try to get back to it in a day or so.

Quote · 2d ago
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.