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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, не вмешивайтесь в наши Услуги и не пытайтесь получить к ним доступ, используя метод, отличный от интерфейса и инструкций, которые мы предоставляем.

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

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

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

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

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

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

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

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

Answer 4

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

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

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

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

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

Answer 5

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

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

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

Answer 6

Да, это возможно, как описано здесь в этой статье .

Answer 7

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

Мой цвет фона установлен на Черный, текст на Зеленый, а граница удалена - поиграйте с настройками цвета / размера текстачасть стиля, чтобы получить желаемый эффект.

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

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

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

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>

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