web-dev-qa-db-fra.com

Pouvez-vous nommer le plugin google translate?

J'utilise ce plugin (http://translate.google.com/translate_tools) pour traduire mon site Web . Le problème est que je ne peux pas comprendre comment le styler afin qu'il ne corresponde pas au reste de la page.

Aucune suggestion?

cssstylestranslationgoogle-translate
14
Vasseurth

Bien sûr, vous pouvez styliser tout ce qui est rendu sur votre page.

Voici une partie de la majoration rendue:

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

Vous pouvez regarder ce que goog-te-combo rend et le remplacer par vos propres styles comme celui-ci:

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

Selon ce que vous voulez changer, cette méthode peut être utilisée pour tous les styles restitués dans leurs classes ou pour les étendre.

16
Mike Veigel

Vous pouvez également utiliser ce plugin ( https://github.com/wistcc/stylinggt.js ) pour apporter facilement des modifications différentes à leur style.

7
Winner Crespo

Vous pouvez modifier le style en utilisant l'élément target: 

C'est ce que j'ai utilisé pour éliminer la frontière sur le widget; 

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

Lorsque le script entre en jeu, il ajoute au style hérité. Vous remarquerez que ma cible commence par 0, c'est parce que j'ai utilisé la version simple du widget. Le 1 ci-dessus est pour une autre version. Dans l'ensemble, copiez le code au fur et à mesure que Google le rend, puis ajoutez votre style cible au-dessus.

J'espère que cela t'aides.

3
OMG

J'ai eu peu de succès avec le style du widget de traduction. Vous pouvez essayer de placer le widget de traduction dans un div say <div id="google_translate_element"/> et d'utiliser des sélecteurs CSS tels que:

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

styliser le widget selon vos besoins.

2
Salman A

Oui, c'est possible, comme cela est décrit ici dans cet article article .

1
Abd Ul Aziz

Voici ce que j'utilise - Combinez les réponses ci-dessus (merci!)

Ma couleur d'arrière-plan est définie sur Noir, le texte sur Vert et la bordure supprimée - jouez avec les paramètres de couleur/taille du texte de la partie Style pour obtenir l'effet souhaité.

Ce fil a été très utile alors je veux donner et partager.

<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

Oui tu peux! Faites ceci .... Voir un Exemple

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