你能给谷歌翻译插件添加样式吗？

Question

我正在使用这个插件（http://translate.google.com/translate_tools）来翻译我的网站。 问题是我不知道如何设置样式，使其与页面的其他部分不匹配。

您有什么建议吗？

- Vasseurth

Answer 1

当然可以对页面上呈现的任何内容进行样式设置。

以下是一部分渲染标记：

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

你可以查看goog-te-combo渲染出的内容，并像这样覆盖它使用自己的样式：

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

根据你想要更改的确切内容，此方法可用于在它们的类中呈现的任何样式或扩展它们。

- Mike Veigel

Answer 2

您也可以使用这个插件（https://github.com/wistcc/stylinggt.js）轻松地对其样式进行不同的修改。

- Winner Crespo

Answer 3

Google服务条款

我来到这个页面是因为我希望你的问题...

你能够自定义Google翻译插件的样式吗？

会告诉我修改小部件外观是否违反了Google的服务条款。

考虑到这个问题，本站相关问题和Google网站管理员论坛上的问题根本没有解决这个问题，我认为这不是一个问题，更改样式是可以的。

但是为了确保，请让我们分析一下TOS中相关的部分。

最后修改日期：2014年4月14日

使用我们的服务

您必须遵守在服务中提供给您的任何政策。

不要滥用我们的服务。例如，不要干扰我们的服务或尝试使用我们未提供的接口和指令来访问它们。您只能根据法律（包括适用的出口和再出口管制法律法规）使用我们的服务。如果您不遵守我们的条款或政策，或者我们正在调查涉嫌不当行为，我们可能会暂停或停止向您提供我们的服务。

使用我们的服务不会使您拥有我们的服务或您访问的内容的任何知识产权。除非获得其所有者的许可或法律另有允许，否则您不得使用我们服务中的内容。这些条款不授予您使用我们服务中使用的任何品牌或标志的权利。不要删除、隐藏或更改我们服务中显示的任何法律通知。

我们的服务显示了一些不属于 Google 的内容。此内容是提供该内容的实体的唯一责任。我们可能会审核内容以确定它是否违法或违反我们的政策，并且我们可能会删除或拒绝显示我们合理认为违反我们的政策或法律的内容。但这并不意味着我们一定会审核内容，请不要以为我们会。

在您使用服务时，我们可能会向您发送服务公告、管理消息和其他信息。您可以选择退出其中的某些通讯。

我们的某些服务可在移动设备上使用。不要以使您分心并防止您遵守交通或安全法规的方式使用此类服务。

这里的关键语言似乎是第二段第二句话：

例如，不要干扰我们的服务或尝试使用除我们提供的界面和说明以外的方法访问它们。

而关键短语似乎是：

...使用除界面之外的方法...

我不是律师，但我认为自定义样式“界面”并不一定改变“方法”。

在我的情况下，我正在替换下拉框...

启动巨大的语言菜单。

使用自定义图标（尚未设计）。

下拉菜单是可点击的链接。我的自定义图标也将是可点击的链接。没有方法上的变化。我认为没有明显的违规。

支持这种解释的事实是，为了使额外宽的语言菜单适合较小的屏幕，必须自定义样式。

- Michael Benjamin

---

我所看到的唯一内容是在https://translate.google.com/manager/website/add上，"请勿删除、隐藏或更改包含插件的网站中呈现的Google标志。" - Paul

Answer 4

您可以通过使用目标元素来更改样式：

这是我用来消除小部件边框的代码： <--div id=":0.targetLanguage" style="border: none; float: right;"--><--/div--> 当脚本启动时，它会添加继承的样式。您会注意到我的目标以0开头，那是因为我使用了简单版本的小部件。这里的1是另一个版本的代码。总之，复制谷歌呈现的代码，然后在其上面添加您的目标样式。

希望这可以帮助您。

- OMG

---

你是如何修改内联样式的？ - Steve

Answer 5

我在样式化翻译小部件方面遇到了一些问题。您可以尝试将翻译小部件包装在一个div中，例如<div id="google_translate_element"/>，然后使用CSS选择器，如下所示：

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

根据您的需求对小部件进行样式化。

- Salman A

Answer 6

这是我正在使用的 - 结合了上面的答案（谢谢！）

我的背景颜色设置为黑色，文本为绿色，并移除了边框 - 在样式部分玩弄颜色/文本大小设置以获得所需的效果。

这个主题非常有帮助，所以想回馈并分享。

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

- Chaumurky

Answer 7

当然可以！只需要这样做... 查看示例

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>

- Jetro Bernardo

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

- Marco Diversi