A Pen by André Givenchy on CodePen.
Created
December 31, 2020 08:10
-
-
Save andregivenchy/5abb0fc8b28c101c99320ed1a94405b3 to your computer and use it in GitHub Desktop.
Custom Google Translate Widget
This file contains 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: 'en,ar,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> | |
<p>Sample //</p> | |
<h1 style="max-width:50vw !important;">Strategy is the act of setting yourself apart by being different at what you do — it has very little to do with being better at what you do.</h1> | |
<h2 style="color:#aaa; font-size:1rem;">— Andrê Givenchy</h2> | |
<p style="color:#808080; margin-top:12vh;"> | |
NOTES:<br>This method enabled styling of the Google Translate widget.<br> This includes the dropdown selector as well as the selecror window. | |
</p> | |
<div id="google_translate_element"></div><script type="text/javascript"> |
This file contains 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': 'Manrope', | |
'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', '#f54c65').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 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 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:#000; | |
color:#fff; | |
padding: 0 16px; | |
// top:0!important; // Prevent Google Topbar from pushing down body. | |
// .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.0)!important; | |
border: 1px solid rgba(255,255,255,0.40) !important; | |
padding: 8px 4px 8px 16px!important; | |
border-radius: 4px!important; | |
font-size: 1rem!important; | |
line-height:2rem!important; | |
display: inline-block; | |
cursor: pointer; | |
zoom: .75; | |
} | |
.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: 1.6rem; | |
vertical-align: -05px; | |
// width:32px!important; | |
display:default; | |
} | |
} | |
.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 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
Is there a way to change this so that the script adds rel attributes to the following link that's added to my site?
<a class="goog-logo-link" href="https://translate.google.com" target="_blank" rel="noopener noreferrer"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="37px" height="14px" style="padding-right: 3px" alt="Google Translate">Translate</a>