Hi annbrundige,
I can see we just need some very specific CSS styling here.
See if you like this – add below to the CSS Overrides box located in “Settings > Google Language Translator”:
.goog-te-gadget {
color: #d1dae5;
letter-spacing:0;
}
.goog-logo-link {
color: #d1dae5;
letter-spacing:0;
}
.goog-logo-link img {
background: #fff;
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
padding: 2px 3px 1px 3px;
opacity: 0.6;
margin-right: 3px;
width:35px !important;
height:12px !important;
}
The only reason this would not work, is if your theme styles would still override my code above. But I can force the styles harder if this happens, so let me know if it doesn’t look quite correct after you add this.
Thanks! Rob
Thanks, Rob. I just pasted the code snippet into the Add CSS Styles box and saved the changes. That’s a lot better, but still not quite there. Now the multi-color word Google has a white background, which makes it show up. The words Powered By and Translate are still the default colors.
Powered By is a dull orange, perhaps complementary to the blue. Translate is black. Is there a way to get those to a light color, or also give them a white background?
I don’t entirely understand your code snippet, but I see you specified #d1dae5 (a light gray-blue)in two places, presumably for the text words. However, I don’t see that, so looks like the theme or something else is overriding your style code somehow.
Ok, the styles just need to be forced a little harder – just re-copy everything below and replace entirely:
.goog-te-gadget {
color: #d1dae5 !important;
letter-spacing:0;
}
.goog-logo-link {
color: #d1dae5 !important;
letter-spacing:0;
}
.goog-logo-link img {
background: #fff;
border-radius: 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
padding: 2px 3px 1px 3px;
opacity: 0.6;
margin-right: 3px;
width:35px !important;
height:12px !important;
}
That did the trick! Thanks very much for your help, Rob.
