Можете ли вы стилизовать плагин Google Translate?

Конечно, вы можете стилизовать все, что отображается на вашей странице.

Вот часть отрендеренной разметки:

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

<style>
    .goog-te-gadget {
        font-size: 19px !important;
    }    
</style>

В зависимости от того, что именно вы хотите изменить, этот метод можно использовать для любого из стилей, отображаемых в своих классах, или для их расширения.

Вы также можете использовать этот (https://github.com/wistcc/stylinggt.js) плагин легко вносить различные изменения в свой стиль.

Условия использования Google

Я попал на эту страницу, потому что надеялся, что ваш вопрос...

Можете ли вы стилизовать плагин Google Translate?

сказал бы мне, если изменение внешнего вида виджета является нарушением Google TOS.

Учитывая, что этот вопрос, связанные вопросы на этом сайте и вопросы по форумы Google для веб-мастеров, не решайте эту проблему совсем, я предполагаю, что это не проблема, и изменение стилей допустимо.

Но чтобы убедиться, давайте разберем соответствующий раздел в TOS.

Последнее изменение: 14 апреля 2014 г.

Использование наших услуг

Вы должны следовать любым политикам, доступным вам в Сервисах.

Не злоупотребляйте нашими Услугами. Например, не вмешивайтесь в наши Сервисы и не пытайтесь получить к ним доступ с помощью метода, отличного от интерфейса и инструкций, которые мы предоставляем. Вы можете использовать наши Услуги только в соответствии с законодательством, включая применимые законы и положения о контроле за экспортом и реэкспортом. Мы можем приостановить или прекратить предоставление вам наших Услуг, если вы не соблюдаете наши условия или политики или если мы расследуем предполагаемое неправомерное поведение.

Использование наших Сервисов не дает вам никаких прав на интеллектуальную собственность в отношении наших Сервисов или контента, к которому вы получаете доступ. Вы не можете использовать контент из наших Сервисов, если вы не получили разрешение от его владельца или иным образом не разрешены законом. Эти условия не дают вам права использовать какие-либо бренды или логотипы, используемые в наших Сервисах. Не удаляйте, не скрывайте и не изменяйте какие-либо юридические уведомления, отображаемые в наших Сервисах или вместе с ними.

В наших Сервисах отображается некоторый контент, который не принадлежит Google. Исключительную ответственность за этот контент несет организация, которая делает его доступным. Мы можем проверять контент, чтобы определить, является ли он незаконным или нарушает наши правила, а также мы можем удалять или отказываться отображать контент, который, по нашему обоснованному мнению, нарушает наши правила или закон. Но это не обязательно означает, что мы просматриваем контент, поэтому, пожалуйста, не думайте, что мы это делаем.

В связи с использованием вами Услуг мы можем отправлять вам служебные объявления, административные сообщения и другую информацию. Вы можете отказаться от некоторых из этих сообщений.

Некоторые из наших Сервисов доступны на мобильных устройствах. Не используйте такие Услуги таким образом, который отвлекает вас и мешает вам соблюдать правила дорожного движения или безопасности.

ключевым языком здесь является второе предложение второго абзаца:

Например, не вмешивайтесь в работу наших Сервисов и не пытайтесь получить к ним доступ с помощью метода, отличного от интерфейса и инструкций, которые мы предоставляем.

И ключевая фраза выглядит так:

...используя метод, отличный от интерфейса...

Я не юрист, но я не думаю, что индивидуальный стиль «интерфейса» обязательно меняет «метод».

В моем случае я заменяю раскрывающийся список...

который запускает гигантское языковое меню..

с пользовательским значком (который еще не разработан).

Выпадающее меню представляет собой кликабельную ссылку. Мой пользовательский значок будет кликабельной ссылкой. Никаких изменений в методе. По-моему, явного нарушения нет.

В пользу этой интерпретации говорит тот факт, что расширенное языковое меню должно иметь индивидуальный стиль, чтобы оно поместилось на экранах меньшего размера.

Вы можете изменить стиль, используя целевой элемент:

Это то, что я использовал, чтобы убрать границу виджета;

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

Когда сценарий срабатывает, он добавляет к унаследованному стилю. Вы заметите, что моя цель начинается с 0, потому что я использовал простую версию виджета. 1 здесь для другой версии. В общем, скопируйте код в том виде, в котором его отображает Google, а затем добавьте над ним свой целевой стиль.

Надеюсь это поможет.

У меня не было большого успеха в стилизации виджета перевода. Вы можете попробовать обернуть виджет перевода внутри div, например, <div id="google_translate_element"/>, и использовать селекторы CSS, такие как:

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

чтобы стилизовать виджет в соответствии с вашими потребностями.

Да ты можешь! Сделайте это... См. Пример

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>

Вот что я использую - объединил приведенные выше ответы (спасибо!)

Мой фоновый цвет установлен на черный, текст — на зеленый, а граница удалена — поиграйте с настройками цвета/размера текста в разделе «Стиль», чтобы получить желаемый эффект.

Эта тема была очень полезной, поэтому хочу поделиться.

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