plug in for multi language suggestion

Direct Webstore

Well-Known Member
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

Well-Known Member
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.
 
Last edited:

Direct Webstore

Well-Known Member
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;
}

translate_007.jpg

The End
 
Last edited:

Direct Webstore

Well-Known Member
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????

translate_007.jpg
 
Last edited:

Mar

Moderator
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

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

Well-Known Member
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

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

Well-Known Member
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

Well-Known Member
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

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

Well-Known Member
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. :)
 
Top