-53

Is it possible to hide or remove the Powered by Google Translate on the dropdown in Google Translate?

I have removed the logo part, but couldn't remove the Powered by text.

Here's the code:

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
    }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
12
  • 3
    Style the google_translate_element so it has a fixed width, and set the overflow to hidden... You will only see the drop down Commented Jun 18, 2014 at 10:59
  • 71
    @Robin DON'T DO THIS; you're violating Google's Attribution requirements: cloud.google.com/translate/v2/attribution Commented Oct 20, 2014 at 20:31
  • 7
    @RobRaisch thats not a valid reason to flag a question. If you object to it, downvote.
    – user764357
    Commented Oct 22, 2014 at 2:21
  • 3
    I'm voting to close this question as off-topic because this question is about violating the TOS of a third party site.
    – max
    Commented Apr 15, 2015 at 22:41
  • 3
    Wow, such negative reactions. It may not actually be violating Google's terms as (A) I think the OP is referring to Google Website Translator not the Google Translate API; (B) one of the display settings Google themselves provide (see example) actually contains no "Powered by" statement; and (C) When the user actually selects a language for translation, this displays an additional toolbar which clearly attributes the results to Google and should meet the requirements.
    – Simon E.
    Commented Aug 30, 2016 at 2:33

15 Answers 15

47

You can add these lines of code in your CSS file:

.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget{
    color: transparent !important;
}
0
8

This CSS worked for me:

.goog-logo-link {
   display:none !important;
}

.goog-te-gadget {
   color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
   color: blue !important;
}
2

Although, previous answers regarding display: none and color: transparent may work. I use this solution to completely erase text from html, if you want lets say style the box itself.

$(window).load(function(){
    $(".goog-logo-link").empty();
    $('.goog-te-gadget').html($('.goog-te-gadget').children());
})

I use jQuery in this example, however you can switch to JavaScript if you want.

2

If you decrease the height and hide the overflow, you will hide this area on the screen. Maybe not a very good solution, but it can be a good alternative.

<style> 
    #google_translate_element { height: 26px !important; overflow: hidden !important; }
</style>

You can try using this link. => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate

3
  • 3
    Cihan Koc, I doubt that this helps or even works at all. To convince me otherwise please explain how your code works and why it is supposed to help.
    – Yunnosch
    Commented Jan 4, 2020 at 8:22
  • Yunnosch, If you try from the link below you will see it works. w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
    – Cihan Koç
    Commented Jan 7, 2020 at 6:26
  • 1
    I don't want to try from an external link. I want you to make your answer more helpful by adding an explanation of how and why, to what currently is a non-appreciated code-only answer. Adding that link to the answer itself (instead of hiding this in the comments) by editing it would be nice, but does not replace an explanation. Explaining answers is a good way to help fighting the misconception that StackOverflow is a free code writing service. Otherwise my respect for the good style of giving a matter-of-fact feedback for an (intentionally) provocative comment. Have fun.
    – Yunnosch
    Commented Jan 7, 2020 at 7:20
2

Review image OR To remove powered by TEXT in Google Translate api, You can simply add this css.

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

Add the css to your stylesheet

#google_translate_element {
  color: transparent;
}
#google_translate_element a {
  display: none;
}

The first line will hide the text and the second line will hide the google translate logo.

Test it in all browsers to make sure you do not hide make the dropdown text transparent. If so, add this:

select.google_translate_element {
  color: black;
}

to remove the "Powered by" text

div.goog-te-gadget {
  color: transparent !important;
}

Note: I am not sure whether it is within the terms and conditions of use that you are allowed to hide the Google logo, but this should work.

1

This will remove both powered by and logo.

add this CSS style to just above the Google translator code...

<style>
.goog-logo-link {
    display:none !important;
    font-size:0px !important;
} 
    
.goog-te-gadget{
    color: transparent !important;
    font-size:0px !important;
}

.VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-l4eHX-hSRGPd:link, .VIpgJd-ZVi9od-l4eHX-hSRGPd:visited, .VIpgJd-ZVi9od-l4eHX-hSRGPd:hover, .VIpgJd-ZVi9od-l4eHX-hSRGPd:active {
    display: none;
}
    </style>

0

I am using following to remove google poweredby link or image

#google_translate_element img
        {
            display: none !important;
        }

Try this to remove logo from language translator i am sure

0
$(window).load(function () {
  $(".goog-logo-link").parent().remove();
  $(".goog-te-gadget").html(
    $(".goog-te-gadget").html().replace('&nbsp;&nbsp;Powered by ', '')
  );
});
0
.goog-te-gadget {line-height: 2px !important;color: transparent;}
0

Simply add this..

.goog-logo-link {display:none !important; } 
.goog-te-gadget {font-size:0px !important;}
0

You can do this by making some changes to the "googleTranslateElementInit" function.

<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 
'google_translate_element');

var $googleDiv = $("#google_translate_element .skiptranslate");
var $googleDivChild = $("#google_translate_element .skiptranslate div");
$googleDivChild.next().remove();

$googleDiv.contents().filter(function(){
return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
}).remove();

}
0

You can simply inspect the elements on your server that you want to hide, and there you will find the classname(s) and then you can hide them using the CSS with the help of visibility or content-visibility property. Mine worked with this only ....

0
<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
1
  • I am not convinced. Please describe the effect of what you propose and explain why it helps to solve the problem.
    – Yunnosch
    Commented Feb 12 at 7:03
-2

Tried the code above and it did work to hide the "Powered by", but it did remove the not the Google Translate section. What I did and it worked was add below code to the google-language-translators style.css in the css folder within the plugin.

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
    color: #444;
    **display: none;**
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

See Plugin active on http://sethucurryhouse.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.