Looking for a good translation tool

@"Ange Tuteur" : What selector should be used with {font-size: 0px} to remove this: http://prntscr.com/69kkb9 ? Using the inspector I found none, except for a child called #text .

@Ange Tuteur
If Google translate is replacing elements it could potentially be replacing them with clones without the event listeners attached.
I've not had a proper look, just from reading through this is what it sounds like is happening.

@Samantha this ought to do it :

Code:

[panda=css].goog-te-gadget { font-size:0 !important }

@LGforum I had a quick look, when the translation is activated it looks to add some font tags. I'm guessing they're used for showing the original translation -- the little popup. Playing with this translator is completely foreign to me, but I'd assume removing those tags after the translation is finished would work or bind an event.

Thanks. That worked as well. I was playing around with .goog-te-gadget before but not with that combination yet. I tried others before of which none seem to be working the way I intended.

So now that's done it looks like this: http://prntscr.com/69o73h . How do I create a word like "Deel:" you see in the picture and place it in front of the translation pull-down menu? If that's not possible I probably need to hide the 2 share buttons and change "Deel:" into "Vertaal:" (translate in Dutch) in the templates, right?

If you plan on hiding those two buttons, you can change the share texts with a little CSS trick.

Code:

#fa_share_text { font-size:0 }
#fa_share_text:before { content:"Translate : "; font-size:16px }

if not, you can just add some texts by CSS again, but on the translate element.

Code:

#google_translate_element > div:before {
  content:"Translate : ";
  font-size:12px;
  color:#FFF;
}

or you can add the texts directly inside the element by setting gte's innerHTML.

Code:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
    autoDisplay: false
  }, 'google_translate_element');
};
$(function(){$(function(){
  var gte = document.createElement('DIV');
  gte.id = 'google_translate_element';
  gte.innerHTML = '<span style="float:left">Translate : </span>';
 
  document.getElementById('fa_share').appendChild(gte);
  $.getScript('http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
})});

OK, I chose CSS this time. Using em instead of px for the font-size didn't seem to be working so I had to alter that. But it didn't seem to accept the extra spacing after the : in "Vertaal : " as well using:

Code:

[panda=css]#google_translate_element > div:before {content:"Vertaal :  ";color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 13px !important;}

Solution:

Code:

[panda=css]#google_translate_element > div:before {content:"Vertaal : ";margin-right:15px;color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 13px !important;}

Result:
http://prntscr.com/69p0xc

Total CSS for the FM Notification Bar:

Code:

[panda=css]/*--- FA TOOLBAR ------------------------------------------------*/
#fa_toolbar {color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar span {color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_toolbar a {color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_right {font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 1.1em !important;}
#fa_icon {padding-bottom:5px!important;}
#fa_service {padding-bottom:5px!important;}
#fa_search {padding-bottom:5px!important;}
#fa_fb {padding-bottom:3px!important;}
#fa_gp {padding-bottom:3px!important;}
#fa_twitter {padding-bottom:3px!important;}
#fa_mail {display:none!important;}
#fa_rss {display:none!important;}
.skiptranslate {top:30px!important;}
#google_translate_element {float:right;margin-left:20px;}
#google_translate_element select {font-weight: 700!important;color:#FFF;background:#FF5100;}
.goog-logo-link {visibility:hidden!important}
.goog-te-gadget {font-size:0 !important}
#google_translate_element > div:before {content:"Vertaal : ";margin-right:15px;color: #FFF;font-family: Verdana,Helvetica,Arial,sans-serif !important;font-weight: 700 !important;font-size: 13px !important;}
#fa_welcome {background-color:#FF5100!important;color:#FFF!important;}
#fa_menulist {background-color:#FF5100!important;color:#FFF!important;}
#fa_notifications {background-color:#FF5100!important;color:#FFF!important;}
#notif_list {background-color:#FF5100!important;color:#FFF!important;}
#fa_usermenu {color: #FFF!important;}
/*--- DISPLAY AVATAR IN FA TOOLBAR ------------------------------*/
.fa_avatar img {width:25px;height:25px;margin-right:5px;margin-bottom:-7px;-webkit-border-radius:3px;-moz-border-radius:3px; border-radius:3px;}


It looks good

For some modifications to the google translate elements you'll most likely have to use the !important flag to override existing styles, because the GT stylesheet will come after your Admin Panel stylesheet.

Ange Tuteur wrote:[quotelink="http://www.avacweb.com/t2339p30-looking-for-a-good-translation-tool#22385"]It looks good

For some modifications to the google translate elements you'll most likely have to use the !important flag to override existing styles, because the GT stylesheet will come after your Admin Panel stylesheet.

Thank you. Understood. Please, proceed.

Up, please.

What is it that you need help with ? Is it the spacing ? If so, you can use \a0 to add spaces in the content property.

Like this :

Code:

[panda=css]content:"Vertaal :\a0\a0"

No, the spacing is no problem at all. I've solved it using CSS already as you can see in my prior post. The problem is still "There's another problem showing up now. While the Google translate bar is active, nothing can be done clicking the notifications / fa_welcome part. It just won't expand (nor collapse). Is there a way to solve that, for instance using a z-index? http://prntscr.com/68qpqe". When clicked it just starts to translate the word, no menus appear. Remember you said when clicking around the word it will and you would further look into that?

I'm sorry, I completely forgot about that.

For the z-index problem you can fix it with this rule :

Code:

[panda=css].goog-te-banner-frame { z-index:19000 !important }

I'm going to see if I can figure out how to get rid of those font tags when the translation is enabled.

Ah I found there's some tricks to prevent translation of certain content. You can add the class notranslate to prevent translations. Since it's interfering with the toolbar functionality I added it to the welcome and notification buttons. Replace your current script with this :

Code:

[panda=js]function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
    autoDisplay: false
  }, 'google_translate_element');
};
$(function(){$(function(){
  var gte = document.createElement('DIV');
  gte.id = 'google_translate_element';
 
  document.getElementById('fa_share').appendChild(gte);
  document.getElementById('fa_welcome').className += ' notranslate';
  document.getElementById('fa_notifications').className += ' notranslate';
  $.getScript('http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
})});

Solved and archived.