Personalizing the Google Translate drop-down menu

I've recently implemented Google Translator on my website to allow users to view the content in different languages.

Here is the code snippet I used:

<div id="google_translate_element"></div>
<div id="language"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
    pageLanguage: 'en', includedLanguages: 'bn,en,kn', 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>

Now, I would like to customize the dropdown menu with changes to background color, text color, text size, and width. Can someone guide me on how to achieve this?

Any help or suggestions would be greatly appreciated.

I've attempted setting the dropdown opacity to 0 and placing a customized dropdown in the same position, but it doesn't seem to work as intended...

jquerycssgoogle-translator-toolkit

Answer №1

Even though this post is old, I wanted to share my solution here for anyone else facing the same issue as me.

Since the drop down resides within an iframe, simply styling it on your page won't suffice. Here's how I customized my Google Translator drop down menu using jQuery:

$('document').ready(function () {
    $('#google_translate_element').on("click", function () {

        // Modify 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': 'tahoma'
            });

        // Adjust hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
            $(this).css('background-color', '#F38256').find('span.text').css('color', 'white');
        }, function () {
            $(this).css('background-color', 'white').find('span.text').css('color', '#544F4B');
        });

        // Alter Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #F38256');

        // 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'
        });
    });
});

Answer №2

TO CUSTOMIZE DROPDOWN LANGUAGE LINK COLOR:

Here is a simple script to add to the head of your website:

<script>
var $ = jQuery.noConflict();
$('document').ready(function () {

    $('#google_translate_element').on("click", function () {

var $frame = $('.goog-te-menu-frame:first');
$frame.contents().find(".goog-te-menu2-item div")
            .css({
                'color': '#544F4B',
                'font-family': 'tahoma',

  }).hover(function(){
   $(this).css("background","#eeeeee");
  },function(){
   $(this).css("background","");
  }); 
   });
});
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to get rid of the "bouncing effect" on my button while using an inline floating-label text input?

When an input with a floating label (Bootstrap 5) is inline with other elements, the elements may appear to jump up and down depending on the position of the floating label. https://i.sstatic.net/kDxBo.gif <link href="https://cdn.jsdelivr.net/npm/bo ...

htmlcsstwitter-bootstrapbootstrap-5

What is the deal with this boundary?

Recently, I was experimenting with CSS borders and came up with this interesting result: border-style: double dashed dashed solid; I am curious to understand why it produces such an effect. Adjusting the border-width seems to have unexpected consequences ...

css

The current page I'm working on is scrolling sideways, but I prefer a stationary layout without any scrolling

I am currently facing an issue with my webpage scrolling to the right. This behavior is not acceptable as web pages are not supposed to scroll to the right, correct? Could someone assist me in eliminating this unwanted scroll from my page? I have only u ...

htmlcss

Facebook-Clone Chrome extension that automatically displays "User is listening to..."

I'm currently developing a Chrome Extension that will replace the chat input box with the music I'm listening to by simply pressing "´". It's worth noting that the chat is designed using react and does not use the traditional input/textarea ...

javascriptjqueryhtmlgoogle-chromegoogle-chrome-extension

I am interested in incorporating a <div> element and arranging it in rows of 3 columns. Can you please review my code for this setup?

Looking for some help with my code below, I'm trying to create a dynamic box structure on my page with rows and 3 columns. However, the current output only displays one column with multiple rows. Please keep in mind that I am new to programming: < ...

phphtmlcss

"Encountering a jQuery JavaScript issue when utilizing the $(...) element

I am in the process of migrating some older code to jQuery: let xmlHttp = new XMLHttpRequest(); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4) { $("#" + ajaxArea).html(xmlHttp.responseText); $("#" + ajaxArea).attr('t ...

javascriptjqueryjquery-uijquery-selectors

Error occurred during the parsing of an AJAX response

Hello, I am currently exploring the world of JavaScript and jQuery. I recently encountered a situation where I initiated an AJAX call in my code and received an unexpected response. https://i.sstatic.net/AUHb7.png My current challenge revolves around imp ...

javascriptjqueryjsonajax

Cypress - display of empty select element list when executed within viewport dimensions

I'm attempting to run the following code snippet: it('try select', () => { cy.visit('http://automationteststore.com/index.php?rt=account/create') cy.get('select:visible').eq(1).select(5, { force: true }) }) When I exe ...

jqueryselectdrop-down-menucypress

Personalizing the Header for Web API Requests using JQuery/JavaScript (AJAX) or WinForms

Currently, I am delving into the world of Web API and facing the task of incorporating a specific Authentication mechanism: The initial interaction with the Web API involves a Handshaking process (Login and token sharing). The Login Method of the Web API ...

c#jqueryhttpwebrequesthttp-headersasp.net-web-api

Troubleshooting: jQuery $.post not functioning as expected in certain circumstances

I'm currently experimenting with inserting data into a MySQL database using AJAX and jQuery's $.post method. To test this functionality, I have created the following setup: In my index.html file (which already includes jQuery for various other f ...

javascriptphpjquerymysqlajax

Using data-image as the source for Bootstrap Modal

I am currently working on an image gallery that utilizes the Paver jQuery plugin. The gallery is functional, but I am facing an issue where it displays the same image in the modal instead of showing the respective data-image for each image. My goal is to ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to temporarily disable CSS hover effects

I have a menu with some links <ul id="nav"> <li> <a href="#">Project</a> <div class="subs"> <div> <ul> <li> <h3>Save</h3> <ul> <li> <a i ...

jquerycss

Guide on utilizing `ReactCSSTransitionGroup` for developing an expandable/collapsible list

Utilizing ReactJS to implement a collapsible/expandable list with animation has been my latest endeavor. To access the code, simply visit this link. Upon clicking the Extend button located at the top of the list, I anticipate the items to appear within 1 s ...

javascripthtmlcssreactjs

What is the best way to store my JSON output in a JavaScript variable?

In my jsonOutput.php page, the code looks like this: $response['imgsrc'] = $filename[1]; echo json_encode($response); When executed, it produces a JSON output like {"imgsrc":"071112164139.jpg"} My query now is, how can I make use of ...

phpjavascriptjqueryajaxjson

Showing error message when utilizing the search bar and autocomplete feature (material design CSS)

I'm having difficulty setting up a materialize search bar () with autocomplete functionality () on my website. The issue I'm facing is that the autocomplete feature seems to affect the display of the search icon. When doing a "select all," it be ...

htmlcssfrontendmaterialize

Learn the step-by-step process of loading images from posts onto the Smooth Div Scroll slider

Looking to integrate the 'Smooth Div Scroll' Slider into my custom Wordpress theme, specifically pulling images dynamically from a category of posts. You can view my website Diario Metropolis I am currently using the "simple slider" with parame ...

phpjquerywordpresspluginstimthumb

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

I've been working on a template that includes a blog.html file featuring various layouts: full-width layout 2 column layout 3 column layout 4 column layout I've customized the blog.html so that when specific classes are added to the body tag, ...

jqueryhtml

Encountering a 403 Forbidden error while attempting to make an Ajax post request within the Django

Struggling to implement jQuery in a Django framework web application? Having difficulty getting a simple ajax call to function properly? Here is what my template file consists of, containing the form HTML and JavaScript to manage the ajax call: <script ...

jqueryajaxdjangopost

Experiencing the power of DoJo with the latest Wordpress 4

SOLUTION: After some investigation, I discovered that reordering the loading sequence of jQuery UI and DoJo files in the footer resolved the issue. By placing jQuery UI before any DoJo-related files, I ensured jQuery UI was fully loaded before any DoJo scr ...

javascriptjquerywordpressdojo

In Javascript, delete everything following a colon except for specific words

I have an address in the following format: "8 51209 Rge Rd 950 Road: Rural Parkland County House for sale : MLS®# E4125520" What I want to do is remove everything after the colon, but keep "Rural Parkland County" intact. So the modified address should l ...

javascriptjquery