Bisakah Anda menata plugin Google Translate?

Tentu Anda dapat menata gaya apa pun yang ditampilkan di halaman Anda.

Berikut adalah bagian dari mark-up yang diberikan:

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

Bergantung pada apa sebenarnya yang ingin Anda ubah, metode ini dapat digunakan untuk gaya apa pun yang dirender di kelasnya atau untuk memperluasnya.

Anda juga dapat menggunakan plugin (https://github.com/wistcc/stylinggt.js) ini untuk dengan mudah membuat perubahan berbeda pada gaya mereka.

Persyaratan Layanan Google

Saya membuka halaman ini karena saya mengharapkan pertanyaan Anda...

Bisakah Anda menata plugin Google Translate?

akan memberi tahu saya jika mengubah tampilan widget merupakan pelanggaran terhadap TOS Google.

Mengingat pertanyaan ini, pertanyaan terkait di situs ini, dan pertanyaan tentang Forum Webmaster Google, jangan atasi masalah ini sama sekali, saya berasumsi itu bukan masalah, dan mengubah gaya tidak masalah.

Namun untuk memastikannya, mari kita uraikan bagian yang relevan di TOS.

Terakhir diubah: 14 April 2014

Menggunakan Layanan kami

Anda harus mengikuti kebijakan apa pun yang tersedia untuk Anda dalam Layanan.

Jangan menyalahgunakan Layanan kami. Misalnya, jangan mengganggu Layanan kami atau mencoba mengaksesnya menggunakan metode selain antarmuka dan petunjuk yang kami berikan. Anda dapat menggunakan Layanan kami hanya jika diizinkan oleh hukum, termasuk undang-undang dan peraturan kontrol ekspor dan ekspor kembali yang berlaku. Kami dapat menangguhkan atau menghentikan penyediaan Layanan kami kepada Anda jika Anda tidak mematuhi persyaratan atau kebijakan kami atau jika kami sedang menyelidiki dugaan pelanggaran.

Menggunakan Layanan kami tidak memberi Anda kepemilikan atas hak kekayaan intelektual apa pun di Layanan kami atau konten yang Anda akses. Anda tidak boleh menggunakan konten dari Layanan kami kecuali Anda memperoleh izin dari pemiliknya atau diizinkan oleh hukum. Ketentuan ini tidak memberi Anda hak untuk menggunakan merek atau logo apa pun yang digunakan dalam Layanan kami. Jangan menghapus, mengaburkan, atau mengubah pemberitahuan hukum apa pun yang ditampilkan di atau bersama dengan Layanan kami.

Layanan kami menampilkan beberapa konten yang bukan milik Google. Konten ini sepenuhnya merupakan tanggung jawab entitas yang menyediakannya. Kami dapat meninjau konten untuk menentukan apakah konten tersebut ilegal atau melanggar kebijakan kami, dan kami dapat menghapus atau menolak menampilkan konten yang kami yakini melanggar kebijakan kami atau hukum. Namun hal tersebut tidak berarti bahwa kami meninjau konten, jadi jangan berasumsi bahwa kami melakukan peninjauan tersebut.

Sehubungan dengan penggunaan Layanan oleh Anda, kami dapat mengirimkan kepada Anda pengumuman layanan, pesan administratif, dan informasi lainnya. Anda dapat memilih untuk tidak menerima beberapa komunikasi tersebut.

Beberapa Layanan kami tersedia di perangkat seluler. Jangan menggunakan Layanan tersebut dengan cara yang mengganggu Anda dan menghalangi Anda untuk mematuhi undang-undang lalu lintas atau keselamatan.

Bahasa kunci di sini tampaknya adalah kalimat kedua dari paragraf kedua:

Misalnya, jangan mengganggu Layanan kami atau mencoba mengaksesnya menggunakan metode selain antarmuka dan petunjuk yang kami berikan.

Dan frasa kuncinya adalah:

...menggunakan metode selain antarmuka...

Saya bukan seorang pengacara, tapi menurut saya penataan khusus "antarmuka" tidak serta merta mengubah "metode".

Dalam kasus saya, saya mengganti kotak drop-down...

yang meluncurkan menu bahasa raksasa..

dengan ikon khusus (yang belum dirancang).

Menu tarik-turun adalah tautan yang dapat diklik. Ikon khusus saya akan menjadi tautan yang dapat diklik. Tidak ada perubahan metode. Tidak ada pelanggaran yang jelas, saya yakin.

Yang mendukung penafsiran ini adalah fakta bahwa menu bahasa ekstra lebar harus ditata khusus agar dapat muat di layar yang lebih kecil.

Anda dapat mengubah gaya dengan menggunakan elemen target:

Inilah yang saya gunakan untuk menghilangkan batas pada widget;

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

Saat skrip dijalankan, skrip tersebut menambah gaya yang diwarisi. Anda akan melihat target saya dimulai dengan 0, itu karena saya menggunakan widget versi sederhana. Angka 1 di sini adalah untuk versi lain. Secara keseluruhan, salin kode saat Google merendernya, lalu tambahkan gaya target Anda di atasnya.

Semoga ini membantu.

Saya kurang berhasil menata widget terjemahan. Anda dapat mencoba membungkus widget terjemahan di dalam div, katakanlah <div id="google_translate_element"/> dan menggunakan pemilih CSS seperti:

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

untuk menyesuaikan gaya widget sesuai kebutuhan Anda.

Ya kamu bisa! Lakukan ini... Lihat Contoh

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>

Inilah yang saya gunakan - Gabungkan jawaban di atas (terima kasih!)

Warna latar belakang saya diatur ke Hitam, teks ke Hijau, dan batasnya dihapus - mainkan pengaturan warna/ukuran teks di bagian Gaya untuk mendapatkan efek yang Anda inginkan.

Thread ini sangat membantu jadi ingin membalas dan berbagi.

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