Lauren Shutt Lauren Shutt - 23 days ago 6
CSS Question

CSS styling for Google Translate plugin - some displaying, but not all

I'm attempting to modify the Google Translate plugin to fit more nicely with our organization's website. I've been able to customize the look of the button (you can see it by clicking on the link), but can't seem to customize the drop-down menu. I've had success in in Chrome's web developer tools, but the code is ignored when I add it to the stylesheet.

Here's what I'm trying to do:

.goog-te-menu-item,
.goog-te-menu-item:link,
.goog-te-menu-item:visited,
.goog-te-menu-item:active {
color: #7D592E !important;
text-decoration: underline !important;
}

.goog-te-menu-item:hover {
background: #F1E9DA !important;
}

.goog-te-menu2 {
border: 0px !important;
}


If it makes a difference we're using a content management system.

Any insight would be greatly appreciated!

Answer

I guess it's only fair that I come up with a solution as I'm the one who marked your question as duplicate. In short, there is no simple solution. However, with a bit of Javascript hacking, here is what should do the trick:

<script>
$( document ).ready(function() {
  var cssLink = document.createElement("link") 
  cssLink.href = "style.css";
  cssLink .rel = "stylesheet"; 
  cssLink .type = "text/css"; 
  $('.goog-te-menu-frame').contents().find('head')[0].appendChild(cssLink)
})
</script>

Put it anywhere after jquery load and it will fire once the document has loaded and will add your main style.css file to the iframe for google translate. Then it is a simple matter of adding css selectors. GL