-
-
Save alezzigo/a540b5e55f6bd63530351700d75fd2a9 to your computer and use it in GitHub Desktop.
Revisions
-
kentarofujiy created this gist
May 26, 2019 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,8 @@ Google Translate Custom Styling ------------------------------- A Google Translate embedded widget. Restyled using CSS and jQuery. A [Pen](https://codepen.io/j_holtslander/pen/PjPWMe) by [Jay Holtslander](https://codepen.io/j_holtslander) on [CodePen](https://codepen.io). [License](https://codepen.io/j_holtslander/pen/PjPWMe/license). 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,19 @@ <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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,56 @@ // 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,102 @@ * {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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />