Can You Style the Google Translate Plugin

Can you style the google translate plugin?

Sure you can style anything that renders out on your page.

Here is a part of the rendered mark-up:

<div id="google_translate_element">
  <div class="skiptranslate goog-te-gadget" style="">
    <div id=":1.targetLanguage">
    <select class="goog-te-combo">
    </select>
  </div>
Powered by
  <span style="white-space: nowrap;">

  </span>
</div>

You can take a look at what goog-te-combo renders out and override it with your own styles like this:

<style>
    .goog-te-gadget {
        font-size: 19px !important;
    }    
</style>

Depending on what it is exactly that you want to change this method can be used for any of the styles rendered out in their classes or to extend them.

CSS styling for Google Translate plugin - some displaying, but not all

I guess it's only fair that I come up with a solution as I'm the one who marked your question as duplicate. In short, there is no simple solution. However, with a bit of Javascript hacking, here is what should do the trick:

<script>
$( document ).ready(function() {
  var cssLink = document.createElement("link") 
  cssLink.href = "style.css";
  cssLink .rel = "stylesheet"; 
  cssLink .type = "text/css"; 
  $('.goog-te-menu-frame').contents().find('head')[0].appendChild(cssLink)
})
</script>

Put it anywhere after jquery load and it will fire once the document has loaded and will add your main style.css file to the iframe for google translate. Then it is a simple matter of adding css selectors. GL

Change Google Translate widget height width

Try adding your styles as below for the class goog-te-combo, and include this in your css.

Sample working code here.

.goog-te-combo {
    width: 200px;
    height: 50px;
    font-size: 20px;
}

Implementing Google Translate with custom flag icons

Had a lot of fun finding a solution for this question!

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<!-- Flag click handler -->
<script type="text/javascript">
    $('.translation-links a').click(function() {
      var lang = $(this).data('lang');
      var $frame = $('.goog-te-menu-frame:first');
      if (!$frame.size()) {
        alert("Error: Could not find Google translate frame.");
        return false;
      }
      $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
      return false;
    });
</script>

---

Related Topics