Я использую этот плагин (http://translate.google.com/translate_tools) для перевода моего сайта. Проблема в том, что я не могу понять, как стилизовать его, чтобы он не соответствовал остальной части страницы.
Любые предложения?
Можете ли вы создать плагин 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
Вы также можете использовать этот плагин (https://github.com/wistcc/stylinggt.js), чтобы легко вносить изменения в свой стиль.
Ответ 3
Вы можете изменить стиль, используя целевой элемент:
Это то, что я использовал для устранения границы виджета;
<--div id=":0.targetLanguage" style="border: none; float: right;"--><--/div-->
При запуске script он добавляет унаследованный стиль. Вы заметите, что моя цель начинается с 0, потому что я использовал простую версию виджета. 1 здесь для другой версии. В общем, скопируйте код, когда Google отобразит его, затем добавьте свой целевой стиль над ним.
Надеюсь, что это поможет.
Ответ 4
У меня мало шансов усовершенствовать виджет перевода. Вы можете попробовать обернуть виджет перевода внутри div say <div id="google_translate_element"/> и использовать селектор CSS, например:
#google_translate_element select {}
#google_translate_element div {}
#google_translate_element span {}
чтобы стилизовать виджет в соответствии с вашими потребностями.
Ответ 5
Да, это возможно, как описано здесь в этой статье .
Ответ 6
Условия использования Google
Я приземлился на этой странице, потому что я надеялся на ваш вопрос...
Можете ли вы создать плагин google translate?
скажет мне, если изменение внешнего вида виджета является нарушением Google TOS.
Учитывая этот вопрос, связанные вопросы на этом сайте, и вопросы на Форумы Google Webmaster, не рассматривайте эту проблему вообще, я предполагаю, что это не проблема, и изменение стилей в порядке.
Но просто чтобы убедиться, разрешите разбивать соответствующий раздел в TOS.
Последнее изменение: 14 апреля 2014 г.
Использование наших служб
Вы должны следовать любым политикам, предоставленным вам в рамках Услуги.
Не злоупотребляйте нашими Сервисами. Например, не мешайте нашим Сервисы или попытайтесь получить к ним доступ, используя метод, отличный от интерфейса и инструкции, которые мы предоставляем. Вы можете использовать наши Услуги только как разрешенных законом, включая применимый экспортный и реэкспортный контроль законы и правила. Мы можем приостановить или прекратить предоставление наших Услуг если вы не соблюдаете наши условия или политику, или если мы расследование предполагаемого проступка.
Использование наших Услуг не дает вам права владения никакими интеллектуальными права собственности в наших Сервисах или доступ к контенту. Вы не можете используйте контент из наших Сервисов, если вы не получили или иным образом разрешены законом. Эти условия не дают вам право использовать любой брендинг или логотипы, используемые в наших Сервисах. Dont удалять, скрывать или изменять любые юридические уведомления, отображаемые в или вместе с наши Услуги.
Наши службы отображают некоторый контент, который не является Google. Этот контент является исключительной ответственностью организации, которая делает ее доступной. Мы может просматривать контент, чтобы определить, является ли оно незаконным или нарушает наши политики, и мы можем удалить или отказаться отображать контент, который мы разумно полагают, что нарушает нашу политику или закон. Но это не обязательно означают, что мы просматриваем контент, поэтому, пожалуйста, не предполагайте, что мы делаем.
В связи с использованием вами Услуг мы можем отправить вам услугу объявления, административные сообщения и другую информацию. Вы можете отказаться от некоторых из этих сообщений.
Некоторые из наших Сервисов доступны на мобильных устройствах. Не используйте такие Услуги таким образом, что отвлекает вас и препятствует вам подчиняться правил дорожного движения или безопасности.
ключевой язык здесь представляется вторым предложением второго абзаца:
Например, не мешайте нашим службам или пытайтесь получить к ним доступ, используя метод, отличный от интерфейса и инструкций, которые мы предоставляем.
И ключевая фраза выглядит следующим образом:
... используя метод, отличный от интерфейса...
Я не юрист, но я не думаю, что пользовательский стиль "интерфейса" обязательно меняет "метод".
В моем случае я заменяю раскрывающийся список...
который запускает гигантское языковое меню.
с пользовательским значком (который еще не разработан).
Выпадающее меню - это интерактивная ссылка. Мой пользовательский значок будет кликабельной ссылкой. Никаких изменений в методе. По-моему, явное нарушение.
В поддержку этой интерпретации есть тот факт, что внешнее языковое меню должно быть оформлено в обычном порядке, чтобы оно соответствовало меньшим экранам.
Ответ 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>Ответ 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>
Ответ 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>