CODEWITHSUNDEEP
cssgoogle-translate
Aidan Ewen
Aidan Ewen

Reputation: 13328

Google Translate is removing CSS

I've added googles translate app to a site using the following code

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}

</script><script src="//translate.google.com/translate_a/element.js?
cb=googleTranslateElementInit"></script>

The app seems to work for a couple of languages. When translating to other languages all the css is removed.

I'm keeping an eye on specific elements (such as a li in the header, or a div), and then running the translation. I can see that neither the header scripts (ie the css), or the elements are being changed by the app. It's just that the styles are no long applied (firebug tells me 'This element has no style rules')

The problem occurs on Firefox but not Chrome or Opera.

Any ideas what's going on here?

afrikaans tranlsation french translation

Upvotes: 4

Views: 3362

Answers (2)

adarsh sharma
adarsh sharma

Reputation: 1

#google_translate_element span{
     color:white!important;
     font-size:15px;
     border-left:1px solid transparent!important;
     line-height: 22px;
 }  
 .goog-te-gadget-simple {
    background-color: #5191CD !important;
     border-left: 1px solid transparent !important; 
     border-top: 1px solid transparent !important; 
    border-bottom: 1px solid transparent!important; 
    border-right: 1px solid transparent !important;
 } 
 .goog-te-gadget-icon {
     margin-left: 0px; 
     margin-right: 0px; 
    width: 0px!important; 
     height: 0px !important; 
    border: none; 
     vertical-align: middle; 
}

Upvotes: 0

Aidan Ewen
Aidan Ewen

Reputation: 13328

In case anyone else has the same issue -

The php that compresses the css files was adding a title to the scripts so

<link title="Default" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">

was being changed to

<link title="Par défaut" media="screen" type="text/css" href="/modules/pd_smoothgallery/jd.gallery.css" rel="stylesheet">

I removed the title and the translation works fine for all languages.

(not sure why firebug wasn't highlighting this change, but it wasn't).

Upvotes: 3

Related Questions