How to coding GTranslate Widget for new position

Hi,

Unfortunately I am unable to open the screenshots.

You should be able to use CSS to position the selector correctly.

You can start by displaying a “Hello World” text on your desired location and when you succeed you can replace it with [gtranslate] shortcode which will render the language switcher instead.

Thanks! ??

Pls guide me on how add or change CSS code in the below CSS coding text. I want to move the GTranslate Widget to the Center position on Menu.

As I have added CSS code below :
position: absolute & left: 100px ,
then the Widget will move to the left side, Center area but however Language selector for Traditional Chinese and English were missing from the option choice. Please advice below codes for modification.

———————————————————-——————————————-———-
CSS Codes for Advance User is shown below:
——————————————————————————————————————-

<!-- GTranslate: https://gtranslate.io/ -->
<style>
.switcher {font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;width:163px;line-height:17px;}
.switcher a {text-decoration:none;display:block;font-size:10pt;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.switcher a img {vertical-align:middle;display:inline;border:0;padding:0;margin:0;opacity:0.8;}
.switcher a:hover img {opacity:1;}
.switcher .selected {background:#ffffff linear-gradient(180deg, #efefef 0%, #ffffff 70%);position:relative;z-index:9999;}
.switcher .selected a {border:1px solid #cccccc;color:#666666;padding:3px 5px;width:151px;}
.switcher .selected a:after {height:16px;display:inline-block;position:absolute;right:5px;width:15px;background-position:50%;background-size:7px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23666666'/></svg>");background-repeat:no-repeat;content:""!important;transition:all .2s;}
.switcher .selected a.open:after {-webkit-transform: rotate(-180deg);transform:rotate(-180deg);}
.switcher .selected a:hover {background:#f0f0f0}
.switcher .option {position:relative;z-index:9998;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;background-color:#eeeeee;display:none;width:161px;max-height:198px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;overflow-y:auto;overflow-x:hidden;}
.switcher .option a {color:#000000;padding:3px 5px;}
.switcher .option a:hover {background:#ffffff;}
.switcher .option a.selected {background:#ffffff;}
#selected_lang_name {float: none;}
.l_name {float: none !important;margin: 0;}
.switcher .option::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#f5f5f5;}
.switcher .option::-webkit-scrollbar {width:5px;}
.switcher .option::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
</style>
<div class="switcher notranslate">
<div class="selected">
<a href="#" onclick="return false;"><img src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a>
</div>
<div class="option">
<a href="#" onclick="doGTranslate('en|zh-CN');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Simplified)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-CN.png" height="16" width="16" alt="zh-CN" /> Chinese (Simplified)</a><a href="#" onclick="doGTranslate('en|zh-TW');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Traditional)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-TW.png" height="16" width="16" alt="zh-TW" /> Chinese (Traditional)</a><a href="#" onclick="doGTranslate('en|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="English" class="nturl selected"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a><a href="#" onclick="doGTranslate('en|tl');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Filipino" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/tl.png" height="16" width="16" alt="tl" /> Filipino</a><a href="#" onclick="doGTranslate('en|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="French" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/fr.png" height="16" width="16" alt="fr" /> French</a><a href="#" onclick="doGTranslate('en|de');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="German" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/de.png" height="16" width="16" alt="de" /> German</a><a href="#" onclick="doGTranslate('en|id');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Indonesian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/id.png" height="16" width="16" alt="id" /> Indonesian</a><a href="#" onclick="doGTranslate('en|it');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Italian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/it.png" height="16" width="16" alt="it" /> Italian</a><a href="#" onclick="doGTranslate('en|ja');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Japanese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ja.png" height="16" width="16" alt="ja" /> Japanese</a><a href="#" onclick="doGTranslate('en|ko');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Korean" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ko.png" height="16" width="16" alt="ko" /> Korean</a><a href="#" onclick="doGTranslate('en|ms');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Malay" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ms.png" height="16" width="16" alt="ms" /> Malay</a><a href="#" onclick="doGTranslate('en|pt');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Portuguese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/pt.png" height="16" width="16" alt="pt" /> Portuguese</a><a href="#" onclick="doGTranslate('en|ru');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Russian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ru.png" height="16" width="16" alt="ru" /> Russian</a><a href="#" onclick="doGTranslate('en|es');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Spanish" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/es.png" height="16" width="16" alt="es" /> Spanish</a><a href="#" onclick="doGTranslate('en|th');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Thai" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/th.png" height="16" width="16" alt="th" /> Thai</a><a href="#" onclick="doGTranslate('en|vi');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Vietnamese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/vi.png" height="16" width="16" alt="vi" /> Vietnamese</a></div>
</div>
<script>
jQuery('.switcher .selected').click(function() {jQuery('.switcher .option a img').each(function() {if(!jQuery(this)[0].hasAttribute('src'))jQuery(this).attr('src', jQuery(this).attr('data-gt-lazy-src'))});if(!(jQuery('.switcher .option').is(':visible'))) {jQuery('.switcher .option').stop(true,true).delay(100).slideDown(500);jQuery('.switcher .selected a').toggleClass('open')}});
jQuery('.switcher .option').bind('mousewheel', function(e) {var options = jQuery('.switcher .option');if(options.is(':visible'))options.scrollTop(options.scrollTop() - e.originalEvent.wheelDelta);return false;});
jQuery('body').not('.switcher').click(function(e) {if(jQuery('.switcher .option').is(':visible') && e.target != jQuery('.switcher .option').get(0)) {jQuery('.switcher .option').stop(true,true).delay(100).slideUp(500);jQuery('.switcher .selected a').toggleClass('open')}});
</script>
<style>
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-text-highlight {background-color:transparent !important;box-shadow:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
</style>

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

<script>
function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf('goog-te-combo')!=-1){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery('div.switcher div.option').find('img[alt="'+GTranslateGetCurrentLang()+'"]').parent().html();if(typeof lang_html != 'undefined')jQuery('div.switcher div.selected a').html(lang_html.replace('data-gt-lazy-', ''));});
</script>

Hi,

Unfortunately I will not be able to help you as I cannot see your website.

Thanks! ??

Hi edo888,

First of all , thank you for your reply. Please do not give me negative feedback to say that you are unable to help as cannot see my website.

You are GTranslate Plugin Author and what I believe you should more knowledgeable to know on how to code the GTranslate CSS code language.

My website is under development process in DEMO testing mode and not to go on LIVE yet, therefore you cannot see my website. Please copy and paste this link iat : https://prnt.sc/1qv3pe9 in new browser page to open to see my screenshot in which my request on how to centering the GTranslate Widget in Menu.

————————————-
All the CSS code below were getting from GTranslate Advance User column after installed and activated the GTranslate Plugin. Please see below CSS Code.
————————————-

<!-- GTranslate: https://gtranslate.io/ -->
<style>
.switcher {font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;width:163px;line-height:17px;}
.switcher a {text-decoration:none;display:block;font-size:10pt;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.switcher a img {vertical-align:middle;display:inline;border:0;padding:0;margin:0;opacity:0.8;}
.switcher a:hover img {opacity:1;}
.switcher .selected {background:#ffffff linear-gradient(180deg, #efefef 0%, #ffffff 70%);position:relative;z-index:9999;}
.switcher .selected a {border:1px solid #cccccc;color:#666666;padding:3px 5px;width:151px;}
.switcher .selected a:after {height:16px;display:inline-block;position:absolute;right:5px;width:15px;background-position:50%;background-size:7px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23666666'/></svg>");background-repeat:no-repeat;content:""!important;transition:all .2s;}
.switcher .selected a.open:after {-webkit-transform: rotate(-180deg);transform:rotate(-180deg);}
.switcher .selected a:hover {background:#f0f0f0}
.switcher .option {position:relative;z-index:9998;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;background-color:#eeeeee;display:none;width:161px;max-height:198px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;overflow-y:auto;overflow-x:hidden;}
.switcher .option a {color:#000000;padding:3px 5px;}
.switcher .option a:hover {background:#ffffff;}
.switcher .option a.selected {background:#ffffff;}
#selected_lang_name {float: none;}
.l_name {float: none !important;margin: 0;}
.switcher .option::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#f5f5f5;}
.switcher .option::-webkit-scrollbar {width:5px;}
.switcher .option::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
</style>
<div class="switcher notranslate">
<div class="selected">
<a href="#" onclick="return false;"><img src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a>
</div>
<div class="option">
<a href="#" onclick="doGTranslate('en|zh-CN');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Simplified)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-CN.png" height="16" width="16" alt="zh-CN" /> Chinese (Simplified)</a><a href="#" onclick="doGTranslate('en|zh-TW');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Chinese (Traditional)" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/zh-TW.png" height="16" width="16" alt="zh-TW" /> Chinese (Traditional)</a><a href="#" onclick="doGTranslate('en|en');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="English" class="nturl selected"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/en.png" height="16" width="16" alt="en" /> English</a><a href="#" onclick="doGTranslate('en|tl');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Filipino" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/tl.png" height="16" width="16" alt="tl" /> Filipino</a><a href="#" onclick="doGTranslate('en|fr');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="French" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/fr.png" height="16" width="16" alt="fr" /> French</a><a href="#" onclick="doGTranslate('en|de');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="German" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/de.png" height="16" width="16" alt="de" /> German</a><a href="#" onclick="doGTranslate('en|id');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Indonesian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/id.png" height="16" width="16" alt="id" /> Indonesian</a><a href="#" onclick="doGTranslate('en|it');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Italian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/it.png" height="16" width="16" alt="it" /> Italian</a><a href="#" onclick="doGTranslate('en|ja');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Japanese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ja.png" height="16" width="16" alt="ja" /> Japanese</a><a href="#" onclick="doGTranslate('en|ko');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Korean" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ko.png" height="16" width="16" alt="ko" /> Korean</a><a href="#" onclick="doGTranslate('en|ms');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Malay" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ms.png" height="16" width="16" alt="ms" /> Malay</a><a href="#" onclick="doGTranslate('en|pt');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Portuguese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/pt.png" height="16" width="16" alt="pt" /> Portuguese</a><a href="#" onclick="doGTranslate('en|ru');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Russian" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/ru.png" height="16" width="16" alt="ru" /> Russian</a><a href="#" onclick="doGTranslate('en|es');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Spanish" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/es.png" height="16" width="16" alt="es" /> Spanish</a><a href="#" onclick="doGTranslate('en|th');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Thai" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/th.png" height="16" width="16" alt="th" /> Thai</a><a href="#" onclick="doGTranslate('en|vi');jQuery('div.switcher div.selected a').html(jQuery(this).html());return false;" title="Vietnamese" class="nturl"><img data-gt-lazy-src="//www.tripscreener.com/wp-content/plugins/gtranslate/flags/16/vi.png" height="16" width="16" alt="vi" /> Vietnamese</a></div>
</div>
<script>
jQuery('.switcher .selected').click(function() {jQuery('.switcher .option a img').each(function() {if(!jQuery(this)[0].hasAttribute('src'))jQuery(this).attr('src', jQuery(this).attr('data-gt-lazy-src'))});if(!(jQuery('.switcher .option').is(':visible'))) {jQuery('.switcher .option').stop(true,true).delay(100).slideDown(500);jQuery('.switcher .selected a').toggleClass('open')}});
jQuery('.switcher .option').bind('mousewheel', function(e) {var options = jQuery('.switcher .option');if(options.is(':visible'))options.scrollTop(options.scrollTop() - e.originalEvent.wheelDelta);return false;});
jQuery('body').not('.switcher').click(function(e) {if(jQuery('.switcher .option').is(':visible') && e.target != jQuery('.switcher .option').get(0)) {jQuery('.switcher .option').stop(true,true).delay(100).slideUp(500);jQuery('.switcher .selected a').toggleClass('open')}});
</script>
<style>
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
.goog-text-highlight {background-color:transparent !important;box-shadow:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
</style>

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

<script>
function GTranslateGetCurrentLang() {var keyValue = document['cookie'].match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf('goog-te-combo')!=-1){teCombo=sel[i];break;}if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery('div.switcher div.option').find('img[alt="'+GTranslateGetCurrentLang()+'"]').parent().html();if(typeof lang_html != 'undefined')jQuery('div.switcher div.selected a').html(lang_html.replace('data-gt-lazy-', ''));});
</script>

I have a similar problem, and they were useless. How does the author or the reps not know CSS to position the widget correctly? I uninstalled and found a better option. They wanted access to my admin panel to help me. Like, are you serious?

@iwashere, which solution did you adopted?