Google Translate Custom Styling

google-translate-custom-styling.markdown

Google Translate Custom Styling

A Google Translate embedded widget. Restyled using CSS and jQuery.

A Pen by Jay Holtslander on CodePen.

License.

index.html

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en,es,jv,ko,pa,pt,ru,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<h1>Custom styled Google Translate</h1>
<h2>Including the dropdown!</h2>
<p>
  Another method:
  <a href="https://github.com/wistcc/stylinggt.js">
    https://github.com/wistcc/stylinggt.js
  </a>. (Demo: <a href="http://stylinggt.azurewebsites.net">http://stylinggt.azurewebsites.net</a>)
</p>
<p>See also: <a href="http://www.techumber.com/make-custom-drop-down-menu-for-google-translate/">this article</a> regarding the Dropdown</p>

<div id="google_translate_element"></div>

script.js

// WORK IN PROGRESS BELOW
      	
$('document').ready(function () {


		// RESTYLE THE DROPDOWN MENU
    $('#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': '#544F4B',
                'font-family': 'Roboto',
								'width':'100%'
            });
        // Change menu's padding
        $("iframe").contents().find('.goog-te-menu2-item-selected').css ('display', 'none');
			
				// Change menu's padding
        $("iframe").contents().find('.goog-te-menu2').css ('padding', '0px');
      
        // Change the padding of the languages
        $("iframe").contents().find('.goog-te-menu2-item div').css('padding', '20px');
      
        // Change the width of the languages
        $("iframe").contents().find('.goog-te-menu2-item').css('width', '100%');
        $("iframe").contents().find('td').css('width', '100%');
      
        // Change hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
            $(this).css('background-color', '#4385F5').find('span.text').css('color', 'white');
        }, function () {
            $(this).css('background-color', 'white').find('span.text').css('color', '#544F4B');
        });

        // Change Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', 'none');

        // Change the iframe's box shadow
        $(".goog-te-menu-frame").css('box-shadow', '0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3)');
        
      
      
        // Change the iframe's size and position?
        $(".goog-te-menu-frame").css({
            'height': '100%',
            'width': '100%',
            'top': '0px'
        });
        // Change iframes's size
        $("iframe").contents().find('.goog-te-menu2').css({
            'height': '100%',
            'width': '100%'
        });
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

* {box-sizing: border-box;}
html, body {height:100%;}
body {
  background: #212121;
  background-image: url("https://images.unsplash.com/photo-1547132025-0868fd15d909?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
  background-size: cover;
  padding: 0 16px;
	// top:0!important; // Prevent Google Topbar from pushing down body.
  h1 {color:#fff; margin: 1em 0 0.5em 0; letter-spacing: -1px;}
	h2 {color:#fff; margin: 0 0 1em 0; font-weight:100;font-size: 1.8em; letter-spacing: -1px;}
  p {color:#fff;}
  a {color:#fff;}
}
// .goog-te-banner-frame {display:none;} // Don't show Google Topbar
// #goog-gt-tt {display:none!important;visibility:hidden!important;}

#google_translate_element {
  position: absolute;
  bottom: calc(53px + 16px);
  right: 16px!important;
  // z-index: 99999;
}
.goog-te-gadget {
  font-family: Roboto, 'Open Sans', sans-serif!important;
  text-transform: uppercase;
}
.goog-te-gadget-simple  {
  background-color: rgba(255,255,255,0.20)!important;
  border: 1px solid rgba(255,255,255,0.50) !important;
  padding: 8px!important;
  border-radius: 4px!important;
  font-size: 1rem!important;
  line-height:2rem!important;
  display: inline-block;
  cursor: pointer;
  zoom: 1;
}
.goog-te-menu2 {
  max-width: 100%;
}
.goog-te-menu-value {
  color: #fff !important;
    &:before {
    font-family: 'Material Icons';
    content: "\E927";
    margin-right: 16px;
    font-size: 2rem;
    vertical-align: -10px;
    // width:32px!important;
  } 
}
.goog-te-menu-value span:nth-child(5) {
  display:none;
}
.goog-te-menu-value span:nth-child(3) {
  border:none!important;
  font-family: 'Material Icons';
  &:after {
    font-family: 'Material Icons';
    content: "\E5C5";
    font-size: 1.5rem;
    vertical-align: -6px;
  }  
}

.goog-te-gadget-icon {
    background-image: url(https://placehold.it/32)!important;
    background-position: 0px 0px;
    height: 32px!important;
    width: 32px!important;
    margin-right: 8px!important;
    //     OR
    display: none;
}

// ============ HIDE TOP BAR ============ 
.goog-te-banner-frame.skiptranslate {display: none!important;} 
body {top: 0px!important;}

/* ================================== *\
    Mediaqueries
\* ================================== */
@media (max-width: 667px) {
	#google_translate_element {
		bottom: calc(100% - 50% - 53px);
		left: 16px!important;
		width: 100%!important;
		goog-te-gadget {
			width:100%!important;
		}
		.skiptranslate {
			width:100%!important;			
		}
		.goog-te-gadget-simple {
			width: calc(100% - 32px)!important;
			text-align: center;
		}	
	}
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />