คุณสามารถจัดสไตล์ปลั๊กอิน 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>