it-swarm.com.de

Können Sie das Google Übersetzer-Plugin stylen?

Ich verwende dieses Plugin (http://translate.google.com/translate_tools), um meine Website zu übersetzen. Das Problem ist, dass ich nicht herausfinden kann, wie ich es stylen soll, damit es nicht zum Rest der Seite passt.

Irgendwelche Vorschläge?

14
Vasseurth

Sicher können Sie alles gestalten, was auf Ihrer Seite angezeigt wird.

Hier ist ein Teil des gerenderten Markups:

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

Sie können einen Blick darauf werfen, was goog-te-combo rendert, und es mit Ihren eigenen Stilen wie folgt überschreiben:

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

Je nachdem, was genau Sie ändern möchten, kann diese Methode für alle in ihren Klassen gerenderten Stile verwendet oder erweitert werden.

16
Mike Veigel

Sie können dieses Plugin ( https://github.com/wistcc/stylinggt.js ) auch verwenden, um verschiedene Änderungen an ihrem Stil vorzunehmen.

7
Winner Crespo

Sie können den Stil mithilfe des Zielelements ändern: 

Dies ist, was ich verwendet habe, um den Rand des Widgets zu entfernen. 

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

Wenn das Skript einsetzt, wird es zum geerbten Stil hinzugefügt. Sie werden bemerken, dass mein Ziel mit 0 beginnt, weil ich die einfache Version von Widget verwendet habe. Die 1 ist hier für eine andere Version. Alles in allem kopieren Sie den Code so, wie er von Google dargestellt wird, und fügen Sie dann Ihren Zielstil darüber hinzu.

Hoffe das hilft.

3
OMG

Google-Nutzungsbedingungen

Ich bin auf dieser Seite gelandet, weil ich auf Ihre Frage gehofft habe ...

Können Sie das Google-Übersetzungs-Plugin gestalten?

würde mir sagen, wenn das Ändern des Aussehens des Widgets eine Verletzung der Google-Nutzungsbedingungen ist.

In Anbetracht dessen, dass diese Frage, Fragen auf dieser Website , und Fragen in Google Webmaster-Foren , dieses Problem nicht ansprechen überhaupt, gehe ich davon aus, dass es kein Problem ist. und das Ändern der Stile ist in Ordnung.

Aber um sicherzugehen, lassen Sie uns den relevanten Abschnitt in den TOS aufschlüsseln.

Letzte Änderung: 14. April 2014

Nutzung unserer Dienstleistungen

Sie müssen alle Richtlinien einhalten, die Ihnen in den Services zur Verfügung gestellt werden.

Missbrauchen Sie unsere Dienste nicht. Stören Sie zum Beispiel nicht unsere Services oder versuchen Sie, auf sie mit einer anderen Methode als der Schnittstelle Und den von uns bereitgestellten Anweisungen zuzugreifen. Sie dürfen unsere Dienste nur als Nutzen, die gesetzlich zulässig sind, einschließlich der geltenden Export- und Wiederausfuhrkontrollbestimmungen . Wir können die Bereitstellung unserer Dienste für Aussetzen oder einstellen, wenn Sie unsere Bedingungen oder Richtlinien nicht einhalten oder Mutmaßliches Fehlverhalten untersuchen.

Durch die Nutzung unserer Dienste erhalten Sie kein Eigentum an geistigen Eigentumsrechten an unseren Diensten oder den Inhalten, auf die Sie zugreifen. Sie dürfen Inhalte aus unseren Diensten nicht verwenden, es sei denn, Sie erhalten die Erlaubnis des Inhabers oder sind anderweitig gesetzlich zulässig. Diese Bedingungen gewähren Ihnen Nicht das Recht, Markenzeichen oder Logos zu verwenden, die in unseren Services verwendet werden. Lassen Sie keine Rechtlichen Hinweise, die in oder neben Unserer Services angezeigt werden, entfernen, verdecken oder ändern.

In unseren Diensten werden Inhalte angezeigt, die nicht von Google stammen. Für diesen Inhalt Ist ausschließlich die Stelle verantwortlich, die ihn zur Verfügung stellt. Wir Können Inhalte überprüfen, um festzustellen, ob sie illegal sind oder gegen unsere Richtlinien verstoßen, und wir können Inhalte entfernen oder die Anzeige von Inhalten verweigern, von denen wir Vernünftigerweise glauben, dass sie gegen unsere Richtlinien oder gegen das Gesetz verstoßen. Dies bedeutet jedoch nicht unbedingt, dass wir den Inhalt überprüfen. Nehmen Sie also nicht an, dass .

In Verbindung mit Ihrer Nutzung der Dienste senden wir Ihnen möglicherweise Ankündigungen, Verwaltungsnachrichten und andere Informationen. Sie können Einige dieser Kommunikationen ablehnen.

Einige unserer Services sind auf mobilen Geräten verfügbar. Verwenden Sie solche Dienste nicht auf eine Weise, die Sie ablenkt und Sie daran hindert, Verkehrs- oder Sicherheitsvorschriften einzuhalten.

DieSchlüsselsprachescheint hier der zweite Satz des zweiten Absatzes zu sein:

Stören Sie beispielsweise nicht unsere Services oder versuchen Sie, mit einer anderen Methode als der Benutzeroberfläche und den von uns bereitgestellten Anweisungen darauf zuzugreifen.

Und der Schlüsselsatz scheint zu sein:

... mit einer anderen Methode als der Schnittstelle ...

Ich bin kein Anwalt, aber ich glaube nicht, dass das Custom-Design der "Schnittstelle" notwendigerweise die "Methode" ändert.

In meinem Fall ersetze ich die Dropdown-Box ...

 enter image description here

was das riesige Sprachmenü startet ..

 enter image description here

mit einem benutzerdefinierten Symbol (das noch nicht entwickelt wurde).

Das Dropdown-Menü ist ein anklickbarer Link. Mein benutzerdefiniertes Symbol wird ein anklickbarer Link sein. Keine Änderung in der Methode. Keine klare Verletzung, glaube ich.

Diese Interpretation wird durch die Tatsache unterstützt, dass das extrabreite Sprachmenü must benutzerdefiniert gestaltet ist, damit es auf kleinere Bildschirme passt.

3
Michael_B

Ich hatte wenig Erfolg beim Gestalten des Übersetzungs-Widgets. Sie können versuchen, das Übersetzungs-Widget in ein div-Wort <div id="google_translate_element"/> zu packen, und CSS-Selektoren verwenden, wie beispielsweise

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

um das Widget nach Ihren Bedürfnissen zu gestalten.

2
Salman A

Ja, es ist möglich, wie hier in diesem Artikel beschrieben.

1
Abd Ul Aziz

Hier ist was ich verwende - Kombiniert die obigen Antworten (Danke!)

Meine Hintergrundfarbe ist auf Schwarz gesetzt, Text auf Grün und der Rand wird entfernt. Spielen Sie mit den Farb-/Textgrößeneinstellungen im Style-Teil, um den gewünschten Effekt zu erhalten.

Dieser Thread war sehr hilfreich, also möchte ich etwas zurückgeben und teilen.

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

Ja du kannst! Tun Sie dies ... Siehe ein Beispiel

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>

0
Jetro Bernardo