Question

我正在使用此插件（http://translate.google.com/translate_tools）翻译我的网站。问题是我无法弄清楚如何设置样式，因此它不适合页面的其他部分。

有什么建议吗？

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>

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

Answer 2

您还可以使用此（https://github.com/wistcc/stylinggt.js）插件轻松对其样式进行不同的更改。

Answer 3

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

这是我用来消除小部件边框的内容;

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

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

希望这有帮助。

Answer 4

Google服务条款

我登陆这个页面因为我希望你的问题......

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

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

考虑到这个问题，related questions on this site以及Google Webmaster Forums上的问题，请不要在中解决此问题，我假设它是＆＃39 ;这不是问题，改变风格是可以的。

但为了确保，让我们分解服务条款中的相关部分。


上次修改日期：2014年4月14日

使用我们的服务

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

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

使用我们的服务并不能让您拥有任何知识产权   我们的服务中的产权或您访问的内容。你不可以   使用我们服务中的内容，除非您获得其许可   所有者或法律允许的其他人。这些条款不授予您   有权使用我们服务中使用的任何品牌或徽标。别   删除，隐藏或更改显示在其中或与之一起显示的任何法律声明   我们的服务。

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

关于您对服务的使用，我们可能会向您发送服务   公告，行政信息和其他信息。你可以   选择退出其中一些通讯。

我们的部分服务可在移动设备上使用。不要使用这样的   服务会分散您的注意力并阻止您服从   交通或安全法。

这里的 主要语言 似乎是第二段的第二句话：


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

关键词似乎是：


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

我不是律师，但我不认为自定义样式是＆＃34;界面＆＃34;必然会改变＆＃34;方法＆＃34;。

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

启动巨型语言菜单..

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

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

为了支持这种解释，超宽语言菜单必须进行自定义样式才能适应较小的屏幕。

Answer 5

我在翻译小部件时没有成功。您可以尝试将翻译小部件包装在div <div id="google_translate_element"/>中，并使用CSS选择器，例如：

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

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

Answer 6

是的，它可能如此article中所述。

Answer 7

是的，你可以！做这个... 查看Example

＆＃13;

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
});

＆＃13;

#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;}

＆＃13;

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

＆＃13;

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

Answer 9

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

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

9 个答案:

Google服务条款

使用我们的服务