Friday, May 4, 2012

customizing google translate in your website

This is my way of customizing the google translate in a website. 

<style type="text/css">
/* to hide the toolbar and tooltip - START */ 
.goog-tooltip {
display: none !important;
}
.goog-tooltip:hover {
display: none !important;
}
.goog-text-highlight {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.goog-te-banner-frame{
display:none !important;
}
body{
top:0 !important;
}
.skiptranslate{
height:30px;
overflow:hidden;
}
/* to hide the toolbar and tooltip - END */ 
</style>

<!-- script for the google translate  -->
<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
             pageLanguage: 'en',    gaTrack: true
      }, 'google_translate_element');
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- display the drop down of all languaes -->
<div id="google_translate_element"></div>