你可以设计谷歌翻译插件吗？答案

【问题标题】：Can you style the google translate plugin?你可以设计谷歌翻译插件吗？
【发布时间】：2011-07-09 06:13:45
【问题描述】：

我正在使用这个插件 (http://translate.google.com/translate_tools) 来翻译我的网站。问题是我不知道如何设置它的样式，所以它不适合页面的其余部分。

有什么建议吗？

【问题讨论】：

标签： css styles translation google-translate

【解决方案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>

根据您要更改的具体内容，此方法可用于在其类中呈现的任何样式或扩展它们。

【讨论】：

【解决方案2】：

Google 服务条款

我登陆此页面是因为我希望您的问题...

你能设置谷歌翻译插件的样式吗？

会告诉我修改小部件的外观是否违反 Google TOS。

考虑到这个问题，related questions on this site，以及关于Google Webmaster Forums 的问题，根本不解决这个问题，我假设这不是问题，改变样式是可以的。

但为了确保起见，让我们分解 TOS 中的相关部分。

上次修改时间：2014 年 4 月 14 日

使用我们的服务

您必须遵守服务。

不要滥用我们的服务。例如，不要干扰我们的服务或尝试使用接口以外的方法访问它们以及我们提供的说明。您只能将我们的服务用作法律允许，包括适用的出口和再出口管制法律法规。我们可能会暂停或停止向以下人员提供我们的服务如果您不遵守我们的条款或政策，或者我们是调查涉嫌不当行为。

使用我们的服务并不赋予您任何知识分子的所有权我们的服务或您访问的内容的财产权。你不可以使用我们服务中的内容，除非您获得其许可所有者或法律允许的其他方式。这些条款不授予您使用我们服务中使用的任何品牌或徽标的权利。不删除、隐藏或更改显示在其中或随同显示的任何法律声明我们的服务。

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

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

我们的某些服务可在移动设备上使用。请勿使用此类以分散您注意力并阻止您服从的方式提供服务交通或安全法律。

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

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

关键短语似乎是：

...使用接口以外的方法...

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

就我而言，我正在替换下拉框...

启动巨大的语言菜单..

带有自定义图标（尚未设计）。

下拉菜单是一个可点击的链接。我的自定义图标将是一个可点击的链接。方法没有变化。我相信没有明显的违规行为。

支持这种解释的事实是，超宽语言菜单必须自定义样式，以适应较小的屏幕。

【讨论】：

我看到的唯一内容是“不要删除、隐藏或更改包含该插件的网站中显示的 Google 徽标。”在translate.google.com/manager/website/add

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

这是我用来消除小部件边框的方法；

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

当脚本启动时，它会添加到继承的样式中。你会注意到我的目标以 0 开头，那是因为我使用了简单版本的小部件。这里的 1 是另一个版本。总而言之，复制 Google 呈现的代码，然后在其上方添加您的目标样式。

希望这会有所帮助。

【讨论】：

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

【解决方案5】：

我在设置翻译小部件的样式方面收效甚微。您可以尝试将 translate 小部件包装在一个 div 中，例如 <div id="google_translate_element"/> 并使用 CSS 选择器，例如：

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

是的，你可以！做这个... 见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>

【讨论】：

【解决方案8】：

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

我的背景颜色设置为黑色，文本设置为绿色，并且移除了边框 - 使用样式部分中的颜色/文本大小设置来获得您想要的效果。

这个帖子非常有帮助，所以想回馈和分享。

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

【讨论】：