CSS 你能设计谷歌翻译插件的样式吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6633127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:58:14  来源:igfitidea点击:

Can you style the google translate plugin?

cssstylestranslationgoogle-translate

提问by Vasseurth

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.

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

Any suggestions?

有什么建议?

采纳答案by Mike Veigel

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:

您可以查看 goog-te-combo 渲染出来的内容,并使用您自己的样式覆盖它,如下所示:

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

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

回答by Winner Crespo

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

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

回答by Michael Benjamin

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.

会告诉我修改小部件的外观是否违反了 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.

但为了确定起见,让我们分解一下 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.

最后修改时间:2014 年 4 月 14 日

使用我们的服务

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

不要滥用我们的服务。例如,不要干扰我们的服务或尝试使用我们提供的界面和说明以外的方法访问它们。您只能在法律允许的情况下使用我们的服务,包括适用的出口和再出口管制法律法规。如果您不遵守我们的条款或政策,或者我们正在调查可疑的不当行为,我们可能会暂停或停止向您提供我们的服务。

使用我们的服务并不赋予您对我们服务或您访问的内容的任何知识产权的所有权。除非您获得其所有者的许可或法律允许,否则您不得使用我们服务中的内容。这些条款并未授予您使用我们服务中使用的任何品牌或徽标的权利。请勿删除、掩盖或更改在我们的服务中显示或随我们的服务一起显示的任何法律声明。

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

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

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

The key languagehere 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...

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

enter image description here

在此处输入图片说明

which launches the giant language menu..

它启动了巨大的语言菜单..

enter image description here

在此处输入图片说明

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 mustbe custom-styled in order for it to fit on smaller screens.

支持这种解释的事实是,必须对超宽语言菜单进行自定义样式,以使其适合较小的屏幕。

回答by OMG

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

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

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

Hope this helps.

希望这可以帮助。

回答by Salman A

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:

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

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

to stylize the widget according to your needs.

根据您的需要对小部件进行风格化。

回答by Abd Ul Aziz

Yes, its possible as it is described here in this article.

是的,正如本文中所描述的那样,这是可能的。

回答by Jetro Bernardo

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>

回答by Chaumurky

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>

回答by Marco Diversi

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