Monday, January 24, 2011

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;
}

5 comments:

Anonymous said...

I tried this but it seems as though gDicClassPopupDetail doesn't work. All the others work fine but no matter how I change the font for gDicClassPopupDetail it remains tiny and as it is. How can I change the definition font?

Zen said...

In the recent version, a new node/element is added as a child of that of "gDicClassPopupDetail". I should update this post soon. In the meantime, please try to change the font for class *gDicClassPopupDetailList* too.

Robert Wang said...

I've tried to changed the font of gDicClassPopupDetail with Google Font like this:

@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Zeyada);

.gDicClassPopupOrig {
//font-family: 'Roboto', sans-serif;
font-family: 'Zeyada', cursive;
}

.gDicClassPopupTrans {
//font-family: 'Roboto', sans-serif;
font-family: 'Zeyada', cursive;
}

.gDicClassPopupMore {
font-family: 'Roboto', sans-serif;
}

.gDicClassPopupMoreDisabled {
font-family: 'Roboto', sans-serif;
}

.gDicClassPopupDetail {
// font-family: 'Roboto', sans-serif;
font-family: 'Zeyada', cursive;
}

/* round corner */
.gDicClassPopupBox {
border-style: none !important;
background-color: transparent !important;
}

.gDicClassPopup {
border-radius: 10px !important;
margin: 0px !important;
}


But font doesn't change, how could I achieve it? Thanks!

Wayne Yang said...

Since the classes are nested under gDicClassPopup, change the font family with:

.gDicClassPopup * {
font-family: 'Roboto', sans-serif;
}

Aspic said...

Hi,

Here is my version

.gDicClassPopupTrans::after {
content: "";
display: inline-block;
width: 24px;
height: 24px;
position: relative;
top: .5em;
left: .2em;
background: url('http://icons.iconarchive.com/icons/marcus-roberto/google-play/24/Google-Translate-icon.png');
}
.gDicClassPopupMore,
.gDicClassPopupTrans {
font-weight: bold;
text-decoration: none !important;
color: #F08500 !important;
text-shadow: 1px 1px 1px rgba(200, 200, 200,.9);
}

.gDicClassPopupBox {
border: 1px solid #DDD !important;
}

.gDicClassPopup {
border: none !important;
padding: 0.5em;
background-color: #FFFFF0 !important;
}

Notice that the icon displayed after the translation has the advantage to let the shortcut to Google Translate accessible, even if no translation appears. About that, why not displaying the translation every time, even if it's the same word in both languages ? It would be redundant but not so absurd.

One last thing, maybe there's a better icon source to set instead of icons.iconarchive.com, I don't know...

 
Get This <