locked
Style Google Translate Drop-down and HIDE Google Translate Toolbar RRS feed

  • Question

  • User1278384134 posted

    Trying to customize or style the Google Translate widget? Hide the google icon? Style the text inside the language drop-down? HIDE the top-bar (toolbar) when selections are made? I spent a day searching and testing trying to get full control over the appearance and presence of this google code generated creature, and now I am sharing my code with you. I hope this helps you save some time getting a better cleaner look. 

    Wednesday, April 11, 2018 3:21 PM

Answers

  • User1278384134 posted
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- This line adds jquery to the page, otherwise the script tags at the bottom will not run -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <!-- Google Translate Element begin -->
        <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({
                    pageLanguage: 'en', includedLanguages: 'en,es,pl,pt,zh-CN,zh-TW,ar,so,ru,hy,ko,vi',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                }, 'google_translate_element');
            }
        </script>
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
        <style type="text/css">
            /* OVERRIDE GOOGLE TRANSLATE WIDGET CSS BEGIN */
            div#google_translate_element div.goog-te-gadget-simple {
                border: none;
                background-color: transparent;
                /*background-color: #17548d;*/ /*#e3e3ff*/
            }
    
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {
                text-decoration: none;
            }
    
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
                color: #aaa;
            }
    
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
                color: white;
            }
            
            .goog-te-gadget-icon {
                display: none !important;
                /*background: url("url for the icon") 0 0 no-repeat !important;*/
            }
    
            /* Remove the down arrow */
            /* when dropdown open */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {
                display: none;
            }
            /* after clicked/touched */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {
                display: none;
            }
            /* on page load (not yet touched or clicked) */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {
                display: none;
            }
    
            /* Remove span with left border line | (next to the arrow) in Chrome & Firefox */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {
                display: none;
            }
            /* Remove span with left border line | (next to the arrow) in Edge & IE11 */
            div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {
                display: none;
            }
            /* HIDE the google translate toolbar */
            .goog-te-banner-frame.skiptranslate {
                display: none !important;
            }
            body {
                top: 0px !important;
            }
            /* OVERRIDE GOOGLE TRANSLATE WIDGET CSS END */
        </style>
        <!-- Google Translate Element end -->
    </head>
    <body style="background-color: black; color: white;">
        <h3>Google Translator testing</h3>
        <div id="google_translate_element"></div>
        <p>This text is here to test the language translator.</p>
        <p>Please note that the jquery is what styles the text inside the drop down where you select languages.</p>
        <p><input type="submit" value="Button does nothing" /></p>
    
    
        <script>
            $('document').ready(function () {
                $('#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',
                        'background-color': '#e3e3ff',
                        'font-family': '"Open Sans",Helvetica,Arial,sans-serif'
                    });
    
                    // Change hover effects  #e3e3ff = white
                    $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
                        $(this).css('background-color', '#17548d').find('span.text').css('color', '#e3e3ff');
                    }, function () {
                        $(this).css('background-color', '#e3e3ff').find('span.text').css('color', '#544F4B');
                    });
    
                    // Change Google's default blue border
                    $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #17548d');
    
                    $("iframe").contents().find('.goog-te-menu2').css('background-color', '#e3e3ff');
    
                    // Change the iframe's box shadow
                    $(".goog-te-menu-frame").css({
                        '-moz-box-shadow': '0 3px 8px 2px #666666',
                        '-webkit-box-shadow': '0 3px 8px 2px #666',
                        'box-shadow': '0 3px 8px 2px #666'
                    });
                });
            });
        </script>
    </body>
    </html>

    See? Google may not love you, but God does!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 11, 2018 3:27 PM