How to change the font and color of the Google Dictionary and Google Translate extension

In the version 2.0 of the Google Dictionary and Google Translate Firefox extension, you can apply your own style to the dictionary pop-up. You can change the background color, the font family, the font color, or the font size, etc. To do that, you must have some knowledge of CSS (Cascading Style Sheets). If you do not want to bother, you can just choose from the samples we provide.

To input your own CSS code, go to the extension's Options dialog and click on the Style tab; check the Enable my style option; and input your CSS code underneath.

One or two style classes are applied to each element of the dictionary pop-up. The names of the classes are shown in the following picture.

(NOTE: As mentioned in the comments below, in the newer versions, we added a child to the node with class gDicClassPopupDetail. Its class name is gDicClassPopupDetailList. Please make a copy of your gDicClassPopupDetail (if you use it) and name the copy as gDicClassPopupDetailList.)

To change the appearance of an element, just write your own CSS code for the class for that element. For example, if you want to turn the background color of the pop-up into white, add the following code into the CSS input box in the Options dialog:

.gDicClassPopup {

   background-color: white !important;

}

To let your code override the default one, you must append !important to the end of the value for a property.

Here is another example. If you want to change the font size and color of the more link, you need to write code for two style classes -- gDicClassPopupMore and gDicClassPopupMoreDisabled. Because the more link can sometimes be disabled, we want it to have a different appearance (e.g. grayed out) when it is. Class gDicClassPopupMore is for the normal appearance -- e.g. blue and underlined, and class gDicClassPopupMoreDisabled is for when the link is disabled -- e.g. gray and not underlined.

.gDicClassPopupMore

{

   color: cyan !important;

   font-size: 16px !important;

}

.gDicClassPopupMoreDisabled

{

   /* color: gray !important; */   /* not necessary, as it is the default */

   font-size: 16px !important;

}