How to Change the Google Translator's Text Color

Written by ken burnside Google
  • Share
  • Tweet
  • Share
  • Email

Google Translate can be embedded into a website as an inline translation tool. Doing so allows website maintainers to use the service to provide automatic translation of their content into different languages. Google Translate's integration into a web site uses properly formed Cascading Style Sheets and DOM elements to position the translation output into your own website's design. CSS lets you easily change the colour of the results.

Skill level:

Things you need

  • Text editor or CSS editor

Show MoreHide


  1. 1

    Start your text editor or CSS editor.

  2. 2

    Download the CSS document for your website as a local copy. A CSS file is a text file and will have the extension ".css." Open the file in your CSS editor.

  3. 3

    Search for the element "goog-te-gadget," and then look for the "colour" property underneath it. The colour will either be listed as a six-digit hexadecimal value, or as a standard colour name. Enter the value for the new colour you want the translation results to appear in. Some CSS editors will refer to that part of the CSS file as a "class name," which is a more technically correct term.

  4. 4

    Save the CSS file.

  5. 5

    Make a copy of your original CSS file on your server and put it in a backup directory.

  6. 6

    Upload your new CSS file to your server and reload the page. You may need to check other "goog" elements in the CSS file to get exactly the results you want, so this may take a few tries.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.