Friday, January 14, 2011

Style templates for Google Dictionary and Google Translate firefox extension


In the upcoming version 2.0 of the Google Dictionary and Google Translate firefox extension, users can apply their own style to the dictionary pop-up. This is a highly wanted feature requested in many comments.

To do that, 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. Yes, the user should know some CSS to better use this feature. However, if you can stand these common/popular styles we provide -- we would continue to provide more style templates based on your comments -- you can just copy and paste the code and make little modification to suit your needs.

A more detail explanation of how to write your own CSS code for the Google Dictionary and Google Translate firefox extension can be found in another post. This post just keeps all the templates for the common people who only want it work.

Now, talk less and act best. Here are the style templates we have --









Black font on white background

/* black on white */
.gDicClassPopup {
  background-color: white !important;
  border: 2px solid gray !important;
}

White font on black background

/* white on black */
.gDicClassPopup {
  color: white !important;
  background-color: black !important;
  border: 2px solid gray !important;
}
.gDicClassPopupMore
{
  color: cyan !important;
}

Big font

/* big font */
.gDicClassPopup
{
  font-size: 16px !important;
}
.gDicClassPopupOrig
{
  font-size: 20px !important;
}
.gDicClassPopupTrans
{
  font-size: 20px !important;
}
.gDicClassPopupDetail
{
  font-size: 16px !important;
}
.gDicClassPopupDetailList
{
  font-size: 16px !important;
}
.gDicClassPopupMore
{
  font-size: 16px !important;
}
.gDicClassPopupMoreDisabled
{
  font-size: 16px !important;
}


Black font on white background with big font

/* black on white with big font */
.gDicClassPopup {
  background-color: white !important;
  border: 2px solid gray !important;
  font-size: 16px !important;
}
.gDicClassPopupOrig
{
  font-size: 20px !important;
}
.gDicClassPopupTrans
{
  font-size: 20px !important;
}
.gDicClassPopupDetail
{
  font-size: 16px !important;
}

.gDicClassPopupDetailList
{
  font-size: 16px !important;
}
.gDicClassPopupMore
{
  font-size: 16px !important;
}
.gDicClassPopupMoreDisabled
{
  font-size: 16px !important;
}

White font on black background with big font

/* white on black with big font */
.gDicClassPopup {
  color: white !important;
  background-color: black !important;
  border: 2px solid gray !important;
  font-size: 16px !important;
}
.gDicClassPopupOrig
{
  font-size: 20px !important;
}
.gDicClassPopupTrans
{
  font-size: 20px !important;
}
.gDicClassPopupDetail
{
  font-size: 16px !important;
}

.gDicClassPopupDetailList
{
  font-size: 16px !important;
}
.gDicClassPopupMore
{
  color: cyan !important;
  font-size: 16px !important;
}
.gDicClassPopupMoreDisabled
{
  font-size: 16px !important;
}

Round corner
(for version 2.5 and up)

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


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

AERO GLASS (by Benedikt P.)
See Benedikt's comments for this fancy style. You may need to restart Firefox after applying this style.

.gDicClassPopupBox {
  -moz-appearance: -moz-win-glass !important;
  border-style: none !important;
  background-color: transparent !important;
}

.gDicClassPopup {
  border: none !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-radius: 3px !important;
  margin: 5px !important;


Tooltip
See the user's comments for this style.



.gDicClassPopupBox {
-moz-appearance: none !important;
border-style: none !important;
background-color: transparent !important;
}

.gDicClassPopup {
-moz-appearance: tooltip !important;
max-width: 400px !important;
}

 

Note: if you are using Windows, the popup usually has a shadow. This can not be changed within Firefox or the extension. To get rid of the shadow, you need to change the appearance of the desktop. Follow these steps (this example is for Window XP, other variants of Windows should be similar):
  • Right click on the desktop and select Properties on the context menu
  • In the Display Properties dialog, select the Appearance tab
  • Click the Effects button
  • In the Effects dialog, deselect Show shadows under menus
  • Click OK in the Effects dialog
  • Click OK in the Display Properties dialog.

13 comments:

Admin said...

Can you add Bengali language in you google dictionary add on.

Anonymous said...

Is is possible to have a areo border?

Anonymous said...

"Round corner" CSS does not word, help pls

i use 2.5 version and all css codes worked except the round corner

how can i fix that ps ?

Benedikt P. said...

For AERO GLASS you can try for example this:

.gDicClassPopupBox {
-moz-appearance: -moz-win-glass !important;
border-style: none !important;
background-color: transparent !important;
}

.gDicClassPopup {
border: none !important;
background-color: rgba(255, 255, 255, 0.25) !important;
border-radius: 3px !important;
margin: 5px !important;
}

Anonymous said...

Is it possible to have a phonetic symbol,please?May be I learn it,but I can't read it.Thank you.

said...

All of above gDicClassPopupDetail class should be replaced to gDicClassPopupDetailList.

http://www.toptip.ca/2011/01/how-to-change-font-and-color-of-google.html

Zen said...

Thanks to 瞬 for reminding us the change that the class for the translated text has been renamed to gDicClassPopupDetailList. gDicClassPopupDetail is still in use so you would want to set it too. The post has been updated and the examples are good to use.

Anonymous said...

A beautiful one, like a tooltip:

.gDicClassPopupBox {
-moz-appearance: none !important;
border-style: none !important;
background-color: transparent !important;
}
.gDicClassPopup {
-moz-appearance: tooltip !important;
max-width: 400px !important;
}

M D P said...

customized for myself, just wanted to share:

.gDicClassPopupBox {
background: #444444 !important;
}

.gDicClassPopup {
border-radius: 20px !important;
margin: 5px !important;
background: transparent !important;
border-color:#FFFFFF !important;
color:#FFFFFF !important;
}

.gDicClassPopupMore
{
display: none !important;
}

.gDicClassPopupTrans
{
color: #FFFFFF !important;
}

Rexy Dallas said...
This comment has been removed by a blog administrator.
Rexy Dallas said...

Aero Glass with text shadows instead of increased brightness (looks prettier) (Benediky P. made original AERO GLASS style that I based this off, so courtesy to him.):

.gDicClassPopupBox {
-moz-appearance: -moz-win-glass !important;
border-style: none !important;
background-color: transparent !important;
}

.gDicClassPopupMore {
text-shadow: white 0.1em 0.1em 0.2em !important;
}

.gDicClassPopup {
border: none !important;
background-color: rgba(255, 255, 255, 0) !important;
border-radius: 3px !important;
margin: 5px !important;
-moz-appearance: none !important;
color: white !important;
text-shadow: black 0px -2px 1px,
black 0px 2px 1px,
black -1px 0px 1px,
black 1px 0px 1px !important;
}

Boris Severa said...


.gDicClassPopupBox {
background: #444444 !important;
border-radius: 10px !important;
}

.gDicClassPopup {
border-radius: 10px !important;
margin: 0px !important;
background-color: transparent !important;
border-color:#FFFFFF !important;
color:#FFFFFF !important;
}

Light skin :)

.gDicClassPopupMore{
display: none !important;
}

.gDicClassPopupTrans
{
color: #FFFFFF !important;
}
.gDicClassPopupBox {
border-style: none !important;
}

alethinh said...

.gDicClassPopupBox {
-moz-appearance: -moz-win-glass !important;
border-style: none !important;
background-color: transparent !important;
}

.gDicClassPopup {
color: #142736 !important;
border: none !important;
background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(242,242,242,1) 6%, rgba(239,239,239,1) 10%, rgba(204,204,204,1) 100%); /* FF3.6+ */
text-shadow: 1px 1px 2px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}

.gDicClassPopupTrans {
text-decoration: none !important;
color: #9F343A !important;
font-weight: bold;
}

.gDicClassPopupMore {
text-decoration: none !important;
color: #9F343A !important;
font-weight: bold !important;
}

 
Get This <