您有什么建议吗?
当然可以对页面上呈现的任何内容进行样式设置。
以下是一部分渲染标记:
<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>
根据你想要更改的确切内容,此方法可用于在它们的类中呈现的任何样式或扩展它们。
我来到这个页面是因为我希望你的问题...
你能够自定义Google翻译插件的样式吗?
会告诉我修改小部件外观是否违反了Google的服务条款。
考虑到这个问题,本站相关问题和Google网站管理员论坛上的问题根本没有解决这个问题,我认为这不是一个问题,更改样式是可以的。
但是为了确保,请让我们分析一下TOS中相关的部分。
这里的关键语言似乎是第二段第二句话:最后修改日期:2014年4月14日
使用我们的服务
您必须遵守在服务中提供给您的任何政策。
不要滥用我们的服务。例如,不要干扰我们的服务或尝试使用我们未提供的接口和指令来访问它们。您只能根据法律(包括适用的出口和再出口管制法律法规)使用我们的服务。如果您不遵守我们的条款或政策,或者我们正在调查涉嫌不当行为,我们可能会暂停或停止向您提供我们的服务。
使用我们的服务不会使您拥有我们的服务或您访问的内容的任何知识产权。除非获得其所有者的许可或法律另有允许,否则您不得使用我们服务中的内容。这些条款不授予您使用我们服务中使用的任何品牌或标志的权利。不要删除、隐藏或更改我们服务中显示的任何法律通知。
我们的服务显示了一些不属于 Google 的内容。此内容是提供该内容的实体的唯一责任。我们可能会审核内容以确定它是否违法或违反我们的政策,并且我们可能会删除或拒绝显示我们合理认为违反我们的政策或法律的内容。但这并不意味着我们一定会审核内容,请不要以为我们会。
在您使用服务时,我们可能会向您发送服务公告、管理消息和其他信息。您可以选择退出其中的某些通讯。
我们的某些服务可在移动设备上使用。不要以使您分心并防止您遵守交通或安全法规的方式使用此类服务。
例如,不要干扰我们的服务或尝试使用除我们提供的界面和说明以外的方法访问它们。
而关键短语似乎是:...使用除界面之外的方法...
我不是律师,但我认为自定义样式“界面”并不一定改变“方法”。启动巨大的语言菜单。
使用自定义图标(尚未设计)。
下拉菜单是可点击的链接。我的自定义图标也将是可点击的链接。没有方法上的变化。我认为没有明显的违规。
支持这种解释的事实是,为了使额外宽的语言菜单适合较小的屏幕,必须自定义样式。
<--div id=":0.targetLanguage" style="border: none; float: right;"--><--/div-->
当脚本启动时,它会添加继承的样式。您会注意到我的目标以0开头,那是因为我使用了简单版本的小部件。这里的1是另一个版本的代码。总之,复制谷歌呈现的代码,然后在其上面添加您的目标样式。我在样式化翻译小部件方面遇到了一些问题。您可以尝试将翻译小部件包装在一个div中,例如<div id="google_translate_element"/>
,然后使用CSS选择器,如下所示:
#google_translate_element select {}
#google_translate_element div {}
#google_translate_element span {}
根据您的需求对小部件进行样式化。
<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>
当然可以!只需要这样做... 查看示例
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>
<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>