I am amazed how easy is translating a web page. I just type a website into a translating tool and it a few seconds I can read a web page in my native tongue. Good example is when I wanted to read some news about Neon Genesis Evangelion 4.0 release date, which I was looking for primary sources in Japanese websites. Sadly, all the results were speculations, old news, and sad news. Never the less, I was amazed that Google translated some websites that was readable for humans. Some of you will argue that some results are not readable, but sloppy translations. I agree with you guys , but I am just amazed that some results are very good.

That is why I added a translated plugin to this web site and made it possible to translate this blog in Spanish and Japanese. I choose these two languages because I can (barely) read some of the translations and some readers are from Spanish speaking countries.

Yet, I want to talk about one thing: I don't like this plugin and its the color and the how this blog does not properly place the widget on the right location. First, the widget was placed behind a header, so you can't see it. Second, the colors were too "bright" and it felt the color scheme did not match the right mood for the blog.

The only way to fix this plugin was to toy around with the CSS. This was placed in the end of CSS file.

/*----------------------------
        Google
-----------------------------*/
 #google_translate_element {
   position: absolute;
   top: 0px;
   left: 21px;
   z-index: 1;
   opacity: 0.5;
 }
  #google_translate_element:hover {

    opacity: 0.9;
  }

First, you have to manipulate the element. Making absolute made it not pushed out to the header. I have to move from the left to 21 pixels, so it could be flushed to the "inner-site" section.

Now, I like it, but it was too bright for me, so the only solution was to change the opacity when it was displayed and it will show its true colors when the pointer hovers above the link. Now if you want to change it more, I recommend to use Google Chrome to change CSS settings for testing purposes.

For example I don't like the border element and I use !important tool to remove the borders in the CSS file. Please use the !important for debugging and not for actual work.

.goog-te-gadget-simple{

    border-left: none !important;
    border-top: none !important;
    border-bottom: 0px !important;
    border-right: 0px !important;
}

I am thankful for Google's "Tools for Developers" for these tips and tricks.

---