Can you style the google translate plugin?

Question

I'm using this plugin (http://translate.google.com/translate_tools) to translate my website. The problem is that I can't figure out how to style it so it does not fit with the rest of the page.

Any suggestions?

Answer 1

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.