A Google Translate embedded widget. Restyled using CSS and jQuery.
A Pen by Jay Holtslander on CodePen.
-
-
Save alezzigo/a540b5e55f6bd63530351700d75fd2a9 to your computer and use it in GitHub Desktop.
Google Translate Custom Styling
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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%' | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * {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; | |
| } | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, I don't understand much about code, I'm just learning a little. How can I see in practice how this code works? I'm trying to customize GTranslate, but the plugin no longer generates automatic CSS to make the changes I need. Can you help me?