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?

Imprint

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.

Osmometer

Answer 2

You also can use this (https://github.com/wistcc/stylinggt.js) plugin to easily make different changes on their style.

Preceding

Answer 3

Google Terms of Service

I landed on this page because I was hoping your question...

Can you style the google translate plugin?

would tell me if modifying the appearance of the widget is a violation of Google TOS.

Considering that this question, related questions on this site, and questions on Google Webmaster Forums, don't address this issue at all, I'm assuming it's not an issue, and altering styles is okay.

But just to make sure, let's break down the relevant section in the TOS.

Last modified: April 14, 2014

Using our Services

You must follow any policies made available to you within the Services.

Don’t misuse our Services. For example, don’t interfere with our Services or try to access them using a method other than the interface and the instructions that we provide. You may use our Services only as permitted by law, including applicable export and re-export control laws and regulations. We may suspend or stop providing our Services to you if you do not comply with our terms or policies or if we are investigating suspected misconduct.

Using our Services does not give you ownership of any intellectual property rights in our Services or the content you access. You may not use content from our Services unless you obtain permission from its owner or are otherwise permitted by law. These terms do not grant you the right to use any branding or logos used in our Services. Don’t remove, obscure, or alter any legal notices displayed in or along with our Services.

Our Services display some content that is not Google’s. This content is the sole responsibility of the entity that makes it available. We may review content to determine whether it is illegal or violates our policies, and we may remove or refuse to display content that we reasonably believe violates our policies or the law. But that does not necessarily mean that we review content, so please don’t assume that we do.

In connection with your use of the Services, we may send you service announcements, administrative messages, and other information. You may opt out of some of those communications.

Some of our Services are available on mobile devices. Do not use such Services in a way that distracts you and prevents you from obeying traffic or safety laws.

The key language here appears to be the second sentence of the second paragraph:

For example, don’t interfere with our Services or try to access them using a method other than the interface and the instructions that we provide.

And the key phrase appears to be:

...using a method other than the interface...

I'm not a lawyer, but I don't think custom styling the "interface" necessarily changes the "method".

In my case, I'm replacing the drop-down box...

which launches the giant language menu..

with a custom icon (that has not been designed yet).

The drop-down menu is a clickable link. My custom icon will be a clickable link. No change in method. No clear violation, I believe.

In support of this interpretation is the fact that the extra-wide language menu must be custom-styled in order for it to fit on smaller screens.

Leclair

The only thing I've seen is "Do not remove, conceal or alter the Google logo that is presented in websites containing the plugin." on translate.google.com/manager/website/add – Pun

Answer 4

You can alter the style by using the target element:

This is what I used to eliminate the border on widget;

<--div id=":0.targetLanguage" style="border: none; float: right;"--><--/div-->

When the script kicks in, it adds to the inherited style. You'll notice my target starts with 0, that's because I used the simple version of widget. The 1 herein is for another version. All in all, copy the code as Google renders it, then add your target style above it.

Hope this helps.

Baler

How did you modify the inline style? – Shallow

Answer 5

I've had little success styling the translate widget. You can try wrapping the translate widget inside a div say <div id="google_translate_element"/> and use CSS selectors such as:

#google_translate_element select {}
#google_translate_element div {}
#google_translate_element span {}

to stylize the widget according to your needs.

Joey

Answer 6

Yes u can! Do this... See a Example

function googleTranslateElementInit(){
new google.translate.TranslateElement({pageLanguage: 'pt', includedLanguages: 'en,es', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

$(window).load(function()  
{ 
setTimeout(function()
{  
$('span:contains("Selecione o idioma")').html('<img src="https://satautomacao.com.br/img/ensp.png" />');
$('.goog-te-gadget').css('display', 'block');
}, 500); 
// ensp.png
});

#traducoes{position: absolute; top: 9px; right: 5px;}
.goog-te-gadget{font-size: 19px !important;}
.goog-te-gadget-simple{background-color: transparent !important; border: none !important;;}
.goog-te-gadget-icon{display:none !important;}

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

Phenomenology

Answer 7

Here's what I'm using - Combined the above answers (thanks!)

My background color is set to Black, text to Green, and the border removed - play with the color/text size settings in the Style part to get the effect you want.

This thread was very helpful so want to give back and share.

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

<style>
    div#google_translate_element div.goog-te-gadget-simple {
        font-size: 19px;
    }

    div#google_translate_element div.goog-te-gadget-simple {
        background-color: black;
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
        color: green
    }

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
        color: blue
    }

    div#google_translate_element div.goog-te-gadget-simple {
        border: none;
    }
</style>

Osmanli

Answer 8

<style>

div#google_translate_element div.goog-te-gadget-simple{font-size:19px;}

div#google_translate_element div.goog-te-gadget-simple{background-color:black;}

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span{color:white}

div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover{color:yellow}

</style>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Ezar