Forum Archive - How do I add the flag inside the dropdown menu?

How do I add the flag inside the dropdown menu?
Jun 4, 2012 10:18 pm by appledaily
I am still testing the GTranslate Pro. How do I include the flag inside the dropdown menu? Right now, the flags are shown on top of the dropdown menu. Please advise. Thanks! FYI, this is the test link that I have. http://www.alpha.ca/web3/
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2012 10:03 am by Yana
Hi, We have customized the language selector for our website to meet our needs. Unfortunately we don't provide customization service. You can copy the source code from our website and try to modify it on your own. Here is an example of the code: <style type="text/css"> <!-- .flag {font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(/modules/mod_gtranslate/tmpl/lang/16.png);} .flag img, .alt_flag img {border:0;margin-top:2px;} .alt_flag {font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(/modules/mod_gtranslate/tmpl/lang/alt_flags.png);} .switcher {float:right;margin-top:3px;margin-left:10px;font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;position:relative;} .switcher a {text-decoration:none;display:block;font-size:10pt;} .switcher a span {margin-right:3px;padding:0;display:block;float:left;} .switcher .selected {background:#FFFFFF url(/modules/mod_gtranslate/tmpl/switcher.png) repeat-x;position:relative;z-index:9999;} .switcher .selected a {border:1px solid #CCCCCC;background:url(/modules/mod_gtranslate/tmpl/arrow_down.png) 146px center no-repeat;color:#666666;padding:3px 5px;width:151px;} .switcher .selected a:hover {background:#F0F0F0 url(/modules/mod_gtranslate/tmpl/arrow_down.png) 146px center no-repeat;} .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;} .switcher .option a {color:#000;padding:3px 5px;} .switcher .option a:hover {background:#FFC;} --> </style> <script type="text/javascript"> $E = document.getElement; window.addEvent('domready', function() { myFx = new Fx.Slide($E('.option'), {duration: 300}).hide(); $E('.option').setStyle('display', 'block'); $$('.switcher').addEvent('click', function() {myFx.toggle();}); $$('.switcher').addEvent('mouseleave', function() {myFx.slideOut();}); }); </script> <script type="text/javascript"> //<![CDATA[ function doTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];var plang=location.pathname.split('/')[1];if(plang.length !=2 && plang != 'zh-CN' && plang != 'zh-TW')plang='en';location.href=location.protocol+'//'+location.host+'/'+lang+location.pathname.replace('/'+plang, '')+location.search;} //]]> </script> <div class="switcher notranslate"> <div class="selected"><a href="#" onclick="return false;"><span class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Urdu" /></span>English</a></div> <div class="option"> <a href="javascript:doTranslate('en|en')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'en', location.pathname+location.search])" title="English" class="nturl"> <span class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="English" /></span>English</a> <a href="javascript:doTranslate('en|af')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'af', location.pathname+location.search])" title="Afrikaans" class="nturl"> <span class="flag" style="background-position:-300px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Afrikaans" /></span>Afrikaans</a> <a href="javascript:doTranslate('en|sq')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sq', location.pathname+location.search])" title="Albanian" class="nturl"> <span class="flag" style="background-position:-300px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Albanian" /></span>Albanian</a> <a href="javascript:doTranslate('en|ar')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ar', location.pathname+location.search])" title="Arabic" class="nturl"> <span class="flag" style="background-position:-100px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Arabic" /></span>Arabic</a> <a href="javascript:doTranslate('en|hy')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hy', location.pathname+location.search])" title="Armenian" class="nturl"> <span class="flag" style="background-position:-400px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Armenian" /></span>Armenian</a> <a href="javascript:doTranslate('en|az')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'az', location.pathname+location.search])" title="Azerbaijani" class="nturl"> <span class="flag" style="background-position:-500px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Azerbaijani" /></span>Azerbaijani</a> <a href="javascript:doTranslate('en|eu')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'eu', location.pathname+location.search])" title="Basque" class="nturl"> <span class="flag" style="background-position:-600px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Basque" /></span>Basque</a> <a href="javascript:doTranslate('en|be')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'be', location.pathname+location.search])" title="Belarusian" class="nturl"> <span class="flag" style="background-position:-0px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Belarusian" /></span>Belarusian</a> <a href="javascript:doTranslate('en|bg')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'bg', location.pathname+location.search])" title="Bulgarian" class="nturl"> <span class="flag" style="background-position:-200px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Bulgarian" /></span>Bulgarian</a> <a href="javascript:doTranslate('en|ca')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ca', location.pathname+location.search])" title="Catalan" class="nturl"> <span class="flag" style="background-position:-0px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Catalan" /></span>Catalan</a> <a href="javascript:doTranslate('en|zh-CN')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'zh-CN', location.pathname+location.search])" title="Chinese (Simplified)" class="nturl"> <span class="flag" style="background-position:-300px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Chinese (Simplified)" /></span>Chinese (Simplified)</a> <a href="javascript:doTranslate('en|zh-TW')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'zh-TW', location.pathname+location.search])" title="Chinese (Traditional)" class="nturl"> <span class="flag" style="background-position:-400px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Chinese (Traditional)" /></span>Chinese (Traditional)</a> <a href="javascript:doTranslate('en|hr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hr', location.pathname+location.search])" title="Croatian" class="nturl"> <span class="flag" style="background-position:-500px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Croatian" /></span>Croatian</a> <a href="javascript:doTranslate('en|cs')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'cs', location.pathname+location.search])" title="Czech" class="nturl"> <span class="flag" style="background-position:-600px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Czech" /></span>Czech</a> <a href="javascript:doTranslate('en|da')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'da', location.pathname+location.search])" title="Danish" class="nturl"> <span class="flag" style="background-position:-700px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Danish" /></span>Danish</a> <a href="javascript:doTranslate('en|nl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'nl', location.pathname+location.search])" title="Dutch" class="nturl"> <span class="flag" style="background-position:-0px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Dutch" /></span>Dutch</a> <a href="javascript:doTranslate('en|fi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fi', location.pathname+location.search])" title="Finnish" class="nturl"> <span class="flag" style="background-position:-100px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Finnish" /></span>Finnish</a> <a href="javascript:doTranslate('en|fr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fr', location.pathname+location.search])" title="French" class="nturl"> <span class="flag" style="background-position:-200px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="French" /></span>French</a> <a href="javascript:doTranslate('en|ka')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ka', location.pathname+location.search])" title="Georgian" class="nturl"> <span class="flag" style="background-position:-700px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Georgian" /></span>Georgian</a> <a href="javascript:doTranslate('en|de')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'de', location.pathname+location.search])" title="German" class="nturl"> <span class="flag" style="background-position:-300px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="German" /></span>German</a> <a href="javascript:doTranslate('en|el')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'el', location.pathname+location.search])" title="Greek" class="nturl"> <span class="flag" style="background-position:-400px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Greek" /></span>Greek</a> <a href="javascript:doTranslate('en|iw')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'iw', location.pathname+location.search])" title="Hebrew" class="nturl"> <span class="flag" style="background-position:-200px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hebrew" /></span>Hebrew</a> <a href="javascript:doTranslate('en|hi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hi', location.pathname+location.search])" title="Hindi" class="nturl"> <span class="flag" style="background-position:-500px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hindi" /></span>Hindi</a> <a href="javascript:doTranslate('en|hu')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hu', location.pathname+location.search])" title="Hungarian" class="nturl"> <span class="flag" style="background-position:-600px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hungarian" /></span>Hungarian</a> <a href="javascript:doTranslate('en|id')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'id', location.pathname+location.search])" title="Indonesian" class="nturl"> <span class="flag" style="background-position:-300px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Indonesian" /></span>Indonesian</a> <a href="javascript:doTranslate('en|ga')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ga', location.pathname+location.search])" title="Irish" class="nturl"> <span class="flag" style="background-position:-600px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Irish" /></span>Irish</a> <a href="javascript:doTranslate('en|it')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'it', location.pathname+location.search])" title="Italian" class="nturl"> <span class="flag" style="background-position:-600px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Italian" /></span>Italian</a> <a href="javascript:doTranslate('en|ja')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ja', location.pathname+location.search])" title="Japanese" class="nturl"> <span class="flag" style="background-position:-700px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Japanese" /></span>Japanese</a> <a href="javascript:doTranslate('en|ko')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ko', location.pathname+location.search])" title="Korean" class="nturl"> <span class="flag" style="background-position:-0px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Korean" /></span>Korean</a> <a href="javascript:doTranslate('en|lv')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'lv', location.pathname+location.search])" title="Latvian" class="nturl"> <span class="flag" style="background-position:-400px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Latvian" /></span>Latvian</a> <a href="javascript:doTranslate('en|lt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'lt', location.pathname+location.search])" title="Lithuanian" class="nturl"> <span class="flag" style="background-position:-500px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Lithuanian" /></span>Lithuanian</a> <a href="javascript:doTranslate('en|mk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'mk', location.pathname+location.search])" title="Macedonian" class="nturl"> <span class="flag" style="background-position:-200px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Macedonian" /></span>Macedonian</a> <a href="javascript:doTranslate('en|ms')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ms', location.pathname+location.search])" title="Malay" class="nturl"> <span class="flag" style="background-position:-400px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Malay" /></span>Malay</a> <a href="javascript:doTranslate('en|mt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'mt', location.pathname+location.search])" title="Maltese" class="nturl"> <span class="flag" style="background-position:-700px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Maltese" /></span>Maltese</a> <a href="javascript:doTranslate('en|no')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'no', location.pathname+location.search])" title="Norwegian" class="nturl"> <span class="flag" style="background-position:-100px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Norwegian" /></span>Norwegian</a> <a href="javascript:doTranslate('en|fa')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fa', location.pathname+location.search])" title="Persian" class="nturl"> <span class="flag" style="background-position:-200px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Persian" /></span>Persian</a> <a href="javascript:doTranslate('en|pl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'pl', location.pathname+location.search])" title="Polish" class="nturl"> <span class="flag" style="background-position:-200px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Polish" /></span>Polish</a> <a href="javascript:doTranslate('en|pt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'pt', location.pathname+location.search])" title="Portuguese" class="nturl"> <span class="flag" style="background-position:-300px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Portuguese" /></span>Portuguese</a> <a href="javascript:doTranslate('en|ro')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ro', location.pathname+location.search])" title="Romanian" class="nturl"> <span class="flag" style="background-position:-400px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Romanian" /></span>Romanian</a> <a href="javascript:doTranslate('en|ru')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ru', location.pathname+location.search])" title="Russian" class="nturl"> <span class="flag" style="background-position:-500px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Russian" /></span>Russian</a> <a href="javascript:doTranslate('en|sr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sr', location.pathname+location.search])" title="Serbian" class="nturl"> <span class="flag" style="background-position:-600px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Serbian" /></span>Serbian</a> <a href="javascript:doTranslate('en|sk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sk', location.pathname+location.search])" title="Slovak" class="nturl"> <span class="flag" style="background-position:-700px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Slovak" /></span>Slovak</a> <a href="javascript:doTranslate('en|sl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sl', location.pathname+location.search])" title="Slovenian" class="nturl"> <span class="flag" style="background-position:-0px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Slovenian" /></span>Slovenian</a> <a href="javascript:doTranslate('en|es')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'es', location.pathname+location.search])" title="Spanish" class="nturl"> <span class="flag" style="background-position:-600px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Spanish" /></span>Spanish</a> <a href="javascript:doTranslate('en|sw')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sw', location.pathname+location.search])" title="Swahili" class="nturl"> <span class="flag" style="background-position:-500px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Swahili" /></span>Swahili</a> <a href="javascript:doTranslate('en|sv')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sv', location.pathname+location.search])" title="Swedish" class="nturl"> <span class="flag" style="background-position:-700px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Swedish" /></span>Swedish</a> <a href="javascript:doTranslate('en|th')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'th', location.pathname+location.search])" title="Thai" class="nturl"> <span class="flag" style="background-position:-0px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Thai" /></span>Thai</a> <a href="javascript:doTranslate('en|tr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'tr', location.pathname+location.search])" title="Turkish" class="nturl"> <span class="flag" style="background-position:-100px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Turkish" /></span>Turkish</a> <a href="javascript:doTranslate('en|uk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'uk', location.pathname+location.search])" title="Ukrainian" class="nturl"> <span class="flag" style="background-position:-100px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Ukrainian" /></span>Ukrainian</a> <a href="javascript:doTranslate('en|ur')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ur', location.pathname+location.search])" title="Urdu" class="nturl"> <span class="flag" style="background-position:-100px -700px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Urdu" /></span>Urdu</a> <a href="javascript:doTranslate('en|vi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'vi', location.pathname+location.search])" title="Vietnamese" class="nturl"> <span class="flag" style="background-position:-200px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Vietnamese" /></span>Vietnamese</a> <a href="javascript:doTranslate('en|cy')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'cy', location.pathname+location.search])" title="Welsh" class="nturl"> <span class="flag" style="background-position:-700px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Welsh" /></span>Welsh</a> <a href="javascript:doTranslate('en|yi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'yi', location.pathname+location.search])" title="Yiddish" class="nturl"> <span class="flag" style="background-position:-300px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Yiddish" /></span>Yiddish</a> </div></div></div>
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2012 5:14 pm by appledaily
Thanks Yana, I will give this a try. I played around with the setting and had seen the flags in the drop down menu before (only on firefox, but not on Chrome and IE). I changed the setting again and the flags were gone. So I thought this feature is included.
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2012 7:40 pm by Yana
Hi, With the default select tag it works only for FireFox. But you can create another dropdown to have flags inside.
Re: How do I add the flag inside the dropdown menu?
Mar 14, 2014 10:10 am by gul321
Hi first of all your module is great i like it very much ......thumbs up for you i came here for some problems i am facing in your module which are following 1- its not showing flag with selected language i have gone through your forum here there was a soluction but it was not written where to paste all those code ,i have tried my self to customize and solve the issue but no success 2-second issue is that i have selected english as default language but it still says select language in dropdown i am using fly method...when my defaulted language is english it should be already selected. :cry: i am not asking for support as in your demo all these things you have shown so its not working like showed in demo . kind regards Gul ahmad
Re: How do I add the flag inside the dropdown menu?
Mar 14, 2014 11:44 am by Yana
Hi, Please post your website address, so I can check it.
Re: How do I add the flag inside the dropdown menu?
Jun 4, 2014 7:59 pm by DiSalvio
Hi, We have customized the language selector for our website to meet our needs. Unfortunately we don't provide customization service. You can copy the source code from our website and try to modify it on your own. Here is an example of the code: <style type="text/css"> <!-- .flag {font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(/modules/mod_gtranslate/tmpl/lang/16.png);} .flag img, .alt_flag img {border:0;margin-top:2px;} .alt_flag {font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(/modules/mod_gtranslate/tmpl/lang/alt_flags.png);} .switcher {float:right;margin-top:3px;margin-left:10px;font-family:Arial;font-size:10pt;text-align:left;cursor:pointer;overflow:hidden;position:relative;} .switcher a {text-decoration:none;display:block;font-size:10pt;} .switcher a span {margin-right:3px;padding:0;display:block;float:left;} .switcher .selected {background:#FFFFFF url(/modules/mod_gtranslate/tmpl/switcher.png) repeat-x;position:relative;z-index:9999;} .switcher .selected a {border:1px solid #CCCCCC;background:url(/modules/mod_gtranslate/tmpl/arrow_down.png) 146px center no-repeat;color:#666666;padding:3px 5px;width:151px;} .switcher .selected a:hover {background:#F0F0F0 url(/modules/mod_gtranslate/tmpl/arrow_down.png) 146px center no-repeat;} .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;} .switcher .option a {color:#000;padding:3px 5px;} .switcher .option a:hover {background:#FFC;} --> </style> <script type="text/javascript"> $E = document.getElement; window.addEvent('domready', function() { myFx = new Fx.Slide($E('.option'), {duration: 300}).hide(); $E('.option').setStyle('display', 'block'); $$('.switcher').addEvent('click', function() {myFx.toggle();}); $$('.switcher').addEvent('mouseleave', function() {myFx.slideOut();}); }); </script> <script type="text/javascript"> //<![CDATA[ function doTranslate(lang_pair) {if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];var plang=location.pathname.split('/')[1];if(plang.length !=2 && plang != 'zh-CN' && plang != 'zh-TW')plang='en';location.href=location.protocol+'//'+location.host+'/'+lang+location.pathname.replace('/'+plang, '')+location.search;} //]]> </script> <div class="switcher notranslate"> <div class="selected"><a href="#" onclick="return false;"><span class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Urdu" /></span>English</a></div> <div class="option"> <a href="javascript:doTranslate('en|en')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'en', location.pathname+location.search])" title="English" class="nturl"> <span class="flag" style="background-position:-0px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="English" /></span>English</a> <a href="javascript:doTranslate('en|af')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'af', location.pathname+location.search])" title="Afrikaans" class="nturl"> <span class="flag" style="background-position:-300px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Afrikaans" /></span>Afrikaans</a> <a href="javascript:doTranslate('en|sq')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sq', location.pathname+location.search])" title="Albanian" class="nturl"> <span class="flag" style="background-position:-300px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Albanian" /></span>Albanian</a> <a href="javascript:doTranslate('en|ar')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ar', location.pathname+location.search])" title="Arabic" class="nturl"> <span class="flag" style="background-position:-100px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Arabic" /></span>Arabic</a> <a href="javascript:doTranslate('en|hy')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hy', location.pathname+location.search])" title="Armenian" class="nturl"> <span class="flag" style="background-position:-400px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Armenian" /></span>Armenian</a> <a href="javascript:doTranslate('en|az')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'az', location.pathname+location.search])" title="Azerbaijani" class="nturl"> <span class="flag" style="background-position:-500px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Azerbaijani" /></span>Azerbaijani</a> <a href="javascript:doTranslate('en|eu')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'eu', location.pathname+location.search])" title="Basque" class="nturl"> <span class="flag" style="background-position:-600px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Basque" /></span>Basque</a> <a href="javascript:doTranslate('en|be')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'be', location.pathname+location.search])" title="Belarusian" class="nturl"> <span class="flag" style="background-position:-0px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Belarusian" /></span>Belarusian</a> <a href="javascript:doTranslate('en|bg')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'bg', location.pathname+location.search])" title="Bulgarian" class="nturl"> <span class="flag" style="background-position:-200px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Bulgarian" /></span>Bulgarian</a> <a href="javascript:doTranslate('en|ca')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ca', location.pathname+location.search])" title="Catalan" class="nturl"> <span class="flag" style="background-position:-0px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Catalan" /></span>Catalan</a> <a href="javascript:doTranslate('en|zh-CN')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'zh-CN', location.pathname+location.search])" title="Chinese (Simplified)" class="nturl"> <span class="flag" style="background-position:-300px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Chinese (Simplified)" /></span>Chinese (Simplified)</a> <a href="javascript:doTranslate('en|zh-TW')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'zh-TW', location.pathname+location.search])" title="Chinese (Traditional)" class="nturl"> <span class="flag" style="background-position:-400px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Chinese (Traditional)" /></span>Chinese (Traditional)</a> <a href="javascript:doTranslate('en|hr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hr', location.pathname+location.search])" title="Croatian" class="nturl"> <span class="flag" style="background-position:-500px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Croatian" /></span>Croatian</a> <a href="javascript:doTranslate('en|cs')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'cs', location.pathname+location.search])" title="Czech" class="nturl"> <span class="flag" style="background-position:-600px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Czech" /></span>Czech</a> <a href="javascript:doTranslate('en|da')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'da', location.pathname+location.search])" title="Danish" class="nturl"> <span class="flag" style="background-position:-700px -0px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Danish" /></span>Danish</a> <a href="javascript:doTranslate('en|nl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'nl', location.pathname+location.search])" title="Dutch" class="nturl"> <span class="flag" style="background-position:-0px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Dutch" /></span>Dutch</a> <a href="javascript:doTranslate('en|fi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fi', location.pathname+location.search])" title="Finnish" class="nturl"> <span class="flag" style="background-position:-100px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Finnish" /></span>Finnish</a> <a href="javascript:doTranslate('en|fr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fr', location.pathname+location.search])" title="French" class="nturl"> <span class="flag" style="background-position:-200px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="French" /></span>French</a> <a href="javascript:doTranslate('en|ka')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ka', location.pathname+location.search])" title="Georgian" class="nturl"> <span class="flag" style="background-position:-700px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Georgian" /></span>Georgian</a> <a href="javascript:doTranslate('en|de')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'de', location.pathname+location.search])" title="German" class="nturl"> <span class="flag" style="background-position:-300px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="German" /></span>German</a> <a href="javascript:doTranslate('en|el')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'el', location.pathname+location.search])" title="Greek" class="nturl"> <span class="flag" style="background-position:-400px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Greek" /></span>Greek</a> <a href="javascript:doTranslate('en|iw')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'iw', location.pathname+location.search])" title="Hebrew" class="nturl"> <span class="flag" style="background-position:-200px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hebrew" /></span>Hebrew</a> <a href="javascript:doTranslate('en|hi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hi', location.pathname+location.search])" title="Hindi" class="nturl"> <span class="flag" style="background-position:-500px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hindi" /></span>Hindi</a> <a href="javascript:doTranslate('en|hu')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'hu', location.pathname+location.search])" title="Hungarian" class="nturl"> <span class="flag" style="background-position:-600px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Hungarian" /></span>Hungarian</a> <a href="javascript:doTranslate('en|id')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'id', location.pathname+location.search])" title="Indonesian" class="nturl"> <span class="flag" style="background-position:-300px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Indonesian" /></span>Indonesian</a> <a href="javascript:doTranslate('en|ga')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ga', location.pathname+location.search])" title="Irish" class="nturl"> <span class="flag" style="background-position:-600px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Irish" /></span>Irish</a> <a href="javascript:doTranslate('en|it')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'it', location.pathname+location.search])" title="Italian" class="nturl"> <span class="flag" style="background-position:-600px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Italian" /></span>Italian</a> <a href="javascript:doTranslate('en|ja')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ja', location.pathname+location.search])" title="Japanese" class="nturl"> <span class="flag" style="background-position:-700px -100px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Japanese" /></span>Japanese</a> <a href="javascript:doTranslate('en|ko')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ko', location.pathname+location.search])" title="Korean" class="nturl"> <span class="flag" style="background-position:-0px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Korean" /></span>Korean</a> <a href="javascript:doTranslate('en|lv')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'lv', location.pathname+location.search])" title="Latvian" class="nturl"> <span class="flag" style="background-position:-400px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Latvian" /></span>Latvian</a> <a href="javascript:doTranslate('en|lt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'lt', location.pathname+location.search])" title="Lithuanian" class="nturl"> <span class="flag" style="background-position:-500px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Lithuanian" /></span>Lithuanian</a> <a href="javascript:doTranslate('en|mk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'mk', location.pathname+location.search])" title="Macedonian" class="nturl"> <span class="flag" style="background-position:-200px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Macedonian" /></span>Macedonian</a> <a href="javascript:doTranslate('en|ms')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ms', location.pathname+location.search])" title="Malay" class="nturl"> <span class="flag" style="background-position:-400px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Malay" /></span>Malay</a> <a href="javascript:doTranslate('en|mt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'mt', location.pathname+location.search])" title="Maltese" class="nturl"> <span class="flag" style="background-position:-700px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Maltese" /></span>Maltese</a> <a href="javascript:doTranslate('en|no')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'no', location.pathname+location.search])" title="Norwegian" class="nturl"> <span class="flag" style="background-position:-100px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Norwegian" /></span>Norwegian</a> <a href="javascript:doTranslate('en|fa')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'fa', location.pathname+location.search])" title="Persian" class="nturl"> <span class="flag" style="background-position:-200px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Persian" /></span>Persian</a> <a href="javascript:doTranslate('en|pl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'pl', location.pathname+location.search])" title="Polish" class="nturl"> <span class="flag" style="background-position:-200px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Polish" /></span>Polish</a> <a href="javascript:doTranslate('en|pt')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'pt', location.pathname+location.search])" title="Portuguese" class="nturl"> <span class="flag" style="background-position:-300px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Portuguese" /></span>Portuguese</a> <a href="javascript:doTranslate('en|ro')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ro', location.pathname+location.search])" title="Romanian" class="nturl"> <span class="flag" style="background-position:-400px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Romanian" /></span>Romanian</a> <a href="javascript:doTranslate('en|ru')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ru', location.pathname+location.search])" title="Russian" class="nturl"> <span class="flag" style="background-position:-500px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Russian" /></span>Russian</a> <a href="javascript:doTranslate('en|sr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sr', location.pathname+location.search])" title="Serbian" class="nturl"> <span class="flag" style="background-position:-600px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Serbian" /></span>Serbian</a> <a href="javascript:doTranslate('en|sk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sk', location.pathname+location.search])" title="Slovak" class="nturl"> <span class="flag" style="background-position:-700px -300px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Slovak" /></span>Slovak</a> <a href="javascript:doTranslate('en|sl')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sl', location.pathname+location.search])" title="Slovenian" class="nturl"> <span class="flag" style="background-position:-0px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Slovenian" /></span>Slovenian</a> <a href="javascript:doTranslate('en|es')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'es', location.pathname+location.search])" title="Spanish" class="nturl"> <span class="flag" style="background-position:-600px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Spanish" /></span>Spanish</a> <a href="javascript:doTranslate('en|sw')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sw', location.pathname+location.search])" title="Swahili" class="nturl"> <span class="flag" style="background-position:-500px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Swahili" /></span>Swahili</a> <a href="javascript:doTranslate('en|sv')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'sv', location.pathname+location.search])" title="Swedish" class="nturl"> <span class="flag" style="background-position:-700px -200px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Swedish" /></span>Swedish</a> <a href="javascript:doTranslate('en|th')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'th', location.pathname+location.search])" title="Thai" class="nturl"> <span class="flag" style="background-position:-0px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Thai" /></span>Thai</a> <a href="javascript:doTranslate('en|tr')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'tr', location.pathname+location.search])" title="Turkish" class="nturl"> <span class="flag" style="background-position:-100px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Turkish" /></span>Turkish</a> <a href="javascript:doTranslate('en|uk')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'uk', location.pathname+location.search])" title="Ukrainian" class="nturl"> <span class="flag" style="background-position:-100px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Ukrainian" /></span>Ukrainian</a> <a href="javascript:doTranslate('en|ur')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'ur', location.pathname+location.search])" title="Urdu" class="nturl"> <span class="flag" style="background-position:-100px -700px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Urdu" /></span>Urdu</a> <a href="javascript:doTranslate('en|vi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'vi', location.pathname+location.search])" title="Vietnamese" class="nturl"> <span class="flag" style="background-position:-200px -400px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Vietnamese" /></span>Vietnamese</a> <a href="javascript:doTranslate('en|cy')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'cy', location.pathname+location.search])" title="Welsh" class="nturl"> <span class="flag" style="background-position:-700px -500px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Welsh" /></span>Welsh</a> <a href="javascript:doTranslate('en|yi')" onclick="_gaq.push(['_trackEvent', 'doTranslate', 'yi', location.pathname+location.search])" title="Yiddish" class="nturl"> <span class="flag" style="background-position:-300px -600px;"><img src="/modules/mod_gtranslate/tmpl/lang/blank.png" height="16" width="16" alt="Yiddish" /></span>Yiddish</a> </div></div></div> Hi all, Is it possible for you to send me the modified files so I can test it on my local site ? Thank you very much, Guillaume
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2014 11:04 am by Edvard
Hi, You can get the code from our website source code. Thank you!
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2014 4:12 pm by DiSalvio
Hi Edvard... the source code is not the .php one... Where I have to put theses lines ? I need the modified default.php file ... why not include it in the download package ? Thank you very much, Guillaume.
Re: How do I add the flag inside the dropdown menu?
Jun 5, 2014 5:08 pm by Edvard
Hi, It really depends on the template and we cannot make it to work with any template, so we have not done that to not create unhappy users. Usually happy users just use it without any positive feedback, but users who are having issues are always happy to share a word ;) We have not done anything with PHP, so the source code you see is the same as the source code in PHP. If you are a web developer / designer you should be able to easily grab the HTML, CSS and JS from our website for the selector, otherwise find someone to do the job for you or if you are ready to pay we can get the job done for you. Thank you.
Re: How do I add the flag inside the dropdown menu?
Oct 8, 2014 8:12 pm by DiSalvio
How much for the job ? :) Thanks !
Re: How do I add the flag inside the dropdown menu?
Oct 8, 2014 8:18 pm by Edvard
Hi, Please contact me on [email protected] for more info. Thanks!

SIMILAR TOPICS

flag doesn't clickDec 10, 2018 6:52 amReplies: 3Post by: maga
Custom menu with gtranslate functionDec 4, 2018 3:14 amReplies: 1Post by: luqman305
Styling the DropdownNov 23, 2018 4:18 amReplies: 1Post by: mrlennyman
Recent Move - Broken Flag IconsMar 2, 2018 10:02 amReplies: 1Post by: datalink
how to make the Module of GTranslate to the Menu Item?Jan 5, 2018 1:08 amReplies: 3Post by: jed

Try GTranslate with a free 15 day trial