plug in for multi language suggestion

[Direct Webstore]

You add the CSS codes below to Appearance>Customize>Additional CSS:

body { margin-bottom: 0px !important; }
.footer { position: relative !important; }

... and add this CSS from Mar too! ... (I added it to my other CSS above)

Thanks Mar!

 

[Direct Webstore]

Go down to Post 23 for the final method of doing this.

Actually, the drop down code looks better ..

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


Change the css to...

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-family: arial;
font-size: 8pt;
}

.goog-te-gadget {
font-family: arial;
font-size: 8px;
color: #666;
white-space: nowrap;
}

.goog-te-gadget .goog-te-combo {
margin: 1px 0;
}

body {
margin-bottom: 0px !important;
}
.footer {
position: relative !important;
}

EDIT: Actually ... this needs more tweaking ... when I have it all perfect I will post a complete instruction.

 

[Direct Webstore]

Version: 6.0 (lol)

OK... Got it all OK for Computer and Mobile with a drop-down menu. The drop-down one is perfect for mobile.

header.php - Davinci Theme (only)
Unless you use a child theme you will need to keep a copy of this file and re-upload it everytime there's a theme update.
Find this...

<div class="col-lg-20 col-md-20 col-xs-20 mcafee">
<?php if ( cz( 'tp_img_left_cart' ) ): ?>
<img src="<?php echo cz( 'tp_img_left_cart' ); ?>" alt="">
<?php endif; ?>
</div>

And replace it with this...

<div class="col-lg-20 col-md-20 col-xs-20"><br><center><div id="google_translate_element"></div></center>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>


Paste this into Appearance/Customization/Extra CSS

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-size: 7pt;
}

.goog-te-gadget {
font-size: 7px;
}

.goog-te-gadget .goog-te-combo {
margin: 1px 0;
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
font-size: 7px;
}

body {
margin-bottom: 0px !important;
}
.footer {
position: relative !important;
}



The End

 

[Mar]

Thanks for the idea to get me to work out how to do this ... I've had it on the back burner for a while now. LOL

It would be nice without the Google icon, is it possible?

 

[Direct Webstore]

It would be nice without the Google icon, is it possible?

I think I saw it in the css .. will check in the morning...in bed now ... lol

Probably use display: none; with .goog-logo-link

 

[Direct Webstore]

It would be nice without the Google icon, is it possible?

This will get rid of it ... sort of. But the box is too small. Maybe have to play around with the font sizes and/or add padding or something.
I don't have any more time at the moment ... I'm leaving Australia today and starting my "Digital Nomad" life. lol

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-size: 7pt;
}
.goog-te-gadget img {
display: none
}
.goog-te-gadget {
color: #ffffff!important;
}
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
display: none;
}

For me ... I want the logo there. I want people to know where the translations are coming from so they won't complain if some of them are a bit "off".

Also ... "Google is my God" (It answers all my questions!) ... so it would be sacrilegious of me to remove the logo. I'd get sent to "Bing Hell" when I died and have to spend eternity with Internet Explorer users. LOL

I also changed all the font sizes to "7px" ... looks a bit more tidier on computer and much better on mobile. See pic. When I get time later I'll see if I can have a bigger font size on computer and smaller on mobile ... must be a "mobile CSS" somewhere????

 

[Mar]

This will get rid of it ... sort of. But the box is too small. Maybe have to play around with the font sizes and/or add padding or something.
I don't have any more time at the moment ... I'm leaving Australia today and starting my "Digital Nomad" life. lol

.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-size: 7pt;
}
.goog-te-gadget img {
display: none
}
.goog-te-gadget {
color: #ffffff!important;
}
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
display: none;
}

For me ... I want the logo there. I want people to know where the translations are coming from so they won't complain if some of them are a bit "off".

Also ... "Google is my God" (It answers all my questions!) ... so it would be sacrilegious of me to remove the logo. I'd get sent to "Bing Hell" when I died and have to spend eternity with Internet Explorer users. LOL

I also changed all the font sizes to "7px" ... looks a bit more tidier on computer and much better on mobile. See pic. When I get time later I'll see if I can have a bigger font size on computer and smaller on mobile ... must be a "mobile CSS" somewhere????

View attachment 3659

Thanks, I appreciate your help with the codes.

 

[bogdao]

I do not know why i think it is to wide for my website, free shippoing icon goes to the next line, did you have such problem?

 

[Direct Webstore]

I do not know why i think it is to wide for my website, free shippoing icon goes to the next line, did you have such problem?

Who are you asking and what are you refering to? The translate code in the header? If so .. start again be careful to copy/paste exactly as described.Also double check the css

 

[bogdao]

Who are you asking and what are you refering to? The translate code in the header? If so .. start again be careful to copy/paste exactly as described.Also double check the css

Thx, that was my fault. Is google translate really translating whole page? In my case only a few words are translated.

 

[Direct Webstore]

It should translate most of the page. No idea what you've done ... so I can't make any further suggestions. You could just use a plugin and the Footer CSS that Mar mentioned above ... but the plugins look terrible.

 

[Direct Webstore]

free shippoing icon goes to the next line,

You must have incorrectly copy/pasted the code. Start with a fresh copy of header.php and try again "exactly" as stated in the instructions.
Just one little mistake or missing dot, comma, bracket etc will mess things up.

 

[bogdao]

You must have incorrectly copy/pasted the code. Start with a fresh copy of header.php and try again "exactly" as stated in the instructions.
Just one little mistake or missing dot, comma, bracket etc will mess things up.

Thanks, Gtranslate was better for me as using your method just a few% was translated, Gtranslate is fine for me, thanks for help!

 

[Direct Webstore]

using your method just a few% was translated,

I (and others) are using the same code, same theme, same alids plugin as you (presumably) and don't have your problem. You must have made a mistake somewhere. It's the only explanation. But glad the plugin is OK for you.