Search code examples
cssstylestranslationgoogle-translate

Can you style the google translate plugin?

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?

Solution

  • 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.