</div> <script type="text/javascript"> "> </div> <script type="text/javascript"> "> </div> <script type="text/javascript"> " />

Hulp nodig bij het stylen van de Google Translate-knop

Ik heb er geen idee van dat ik de Google Translate-knop op mijn website via CSS heb gestileerd. Ik wil met name de achtergrond-/tekstkleuren van de standaard wit/zwart wijzigen in die van mijn pagina. Tot nu toe heb ik verschillende methoden geprobeerd, waaronder de methoden die hier in een andere thread worden aangeboden, maar zonder resultaat. Ik gebruik de eenvoudige vervolgkeuzelijst en de HTML-code staat hieronder. Alvast bedankt voor uw hulp!

<div id="google_translate_element" style="float:left; padding-left:15px"></div>

<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ca,da,de,el,en,es,fr,it,ja,ko,nl,pl,pt,ru,sv,tl', 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>
3

2 antwoord

Just paste following right after your <scripts> tags

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Updated DEMO for hover.

8
toegevoegd
Hebt u ideeën voor het wijzigen van de kleuren van het vervolgkeuzemenu? De blauwe achtergrond op de zweeftekst botst echt met mijn website.
toegevoegd de auteur DACrosby, de bron
Controleer de update.
toegevoegd de auteur The Alpha, de bron
Graag gedaan :-)
toegevoegd de auteur The Alpha, de bron
@ Sheikh: Spot-on perfect! Dank je!
toegevoegd de auteur user1477553, de bron
Ook had ik dit moeten opnemen in mijn doelstellingen voor de vertaalknop, maar ik probeer ook een tekst-zwevende effect toe te voegen (kleurverandering). Ik heb geprobeerd de tweede regel code die je hebt opgegeven te dupliceren en aan het einde "a: hover {color: #ffffff}" toe te voegen, maar daar is geen succes. Zijn hier ook oplossingen voor? Nogmaals bedankt!
toegevoegd de auteur user1477553, de bron
Aha, "span: hover"! Nogmaals bedankt!
toegevoegd de auteur user1477553, de bron

Standaard styling door jQuery:

$('document').ready(function() {
    $('#google_translate_element').on("click", function() {

       //Change font family and color
        $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
            .css({
                'color': '#687074',
                'font-family': 'tahoma'
            });

       //Change hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function() {
            $(this).css('background-color', '#18BA9B').find('span.text').css('color', 'white');
        }, function() {
            $(this).css('background-color', 'white').find('span.text').css('color', '#687074');
        });

       //Change Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #18BA9B');

       //Change the iframe's box shadow
        $(".goog-te-menu-frame").css({
            '-moz-box-shadow': '0 3px 8px 2px #666666',
            '-webkit-box-shadow': '0 3px 8px 2px #666',
            'box-shadow': '0 3px 8px 2px #666'
        });
    });
});
0
toegevoegd