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.

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

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

Unknown said...

Hi. That's a very helpfully addon. I used in FF 15 and i'm using in FF 28 now, ...cuz i'm reading a some pages of css and it's very usefull to not get out of the page and keep reading. :-)

So, THANK YOU.

The page translate don't work for me in any way. FF 28 spanish in XP english. But it doesn't matter to much.

Suggestion, If it works, you could make in just one icon. Left click for the popup and right for the page translate. That's saves an icon space. (very usefull for FF versions that not have the addonbar, and love addons)

Also i wish to contribute with a skin. (In FF15 and 28 (localized es-AR) it works! )
Hope you like it. Big huge.


.gDicClassPopupBox {
-moz-appearance: none !important;
border-style: none !important;
background-color: transparent !important;
}
.gDicClassPopup {
-moz-appearance: none !important;
opacity: 0.95 !important;
padding: 12px !important;
border-image-source:
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAvCAYAAABAHIylAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUlSURBVHja7JtPaBRXHMc/781OdnXNqinVlphK4iJoQWiLGIjgLV6UEBFLEcFzLr0JihdB8OjNkwdBWCkKIejFXIKYQkR6CS2Gsv5rjE0sSN11kzWz814P+ya+vMxGL4Xdzfzgx7x9O4edD9/fmzfz+67QWrNeCCGEO9Vg3MyhG4zRnwAg4r53oAgniRm3AhwdM7bnYmGtAWTBiSBI6yiduWaH5AJR1lE5czoO0ipAFhwbhGeltI4upGZWkA0ltI6h9Tk6ZxWkFUAOnChTVmaAHcBWIAukY8qtWeEAfAAqwDvgDVAFalYqK1cgCa11HBzPQPGBDuBrz/P6BgcH1aFDh6pHjx4t9/f3V2mhmJqayty/f7/z0aNHmfHxcRmG4TPgb2AZCAyk0IVkAxKOajqMSvbm8/kdV65c+efkyZNl2iDu3LnTef78+S+LxeIb4E+jrmVHTdoFFCknUk0G6NmzZ09vsVgsAoyMjBwYHx8fLpVKfUEQdLUSFN/33+ZyuWeDg4Oj165dmwbI5/P5p0+fPgdmTclFagoBpbXW9u3bs5STAbZ6nvdDoVCYP3XqVOnw4cM/Pnny5KdUKrUspQyFELqVAGmthVLKq9VqHfv27bs1OTn5S6FQyJ0+ffor4DezNlUtJYWA9pxbuG/KKgPsPnHiRPrSpUsLIyMjByYmJn5Op9NLUkq1du/Y/CGEQEqpPM+rzc/Pf//69evfz507Nzs9Pb1lZmYmBZSchVoDWlp3IumoqGtgYKAMcO/evTO+739oNdU0AKV93/8wNjZ2BmBgYKACbDfXnLK2MQJnL+MC6jx+/HgJoFKp9EgpQ9okpJRhuVzeDTA0NPQOyK0HCKfMIkjpfD4fACilsu2gHltFSqmsWaiDGDgrwpHOM5cNyGPjRCpOPa6ChLOL3kiAPOfahbsGxUESGwiQaPB8KaTzNB73amOjAIp7pYNc50XYRgS0hoUkifW3BAmCBFACKAGUAEoAJYASQAmgJBJACaD/F5DrgNAbiIOmgQNEOhO24yGcmZnpAJBSVkyLqG2e3oUQSwAvXrzwWW1gsFkgiXdAKKA6Nja2DSCbzc4qpdrmDWMYhl4ul3sOUCgUvgAWcdo9ERPZAI4C3k9OTnYBHDt27GYQBOl2UJHWWgRBkB4aGroJ8PDhw+3UTQ0qDpLdOIwsLpFpQRSLxXxvb++7CxcuvLx7965eWFj4TgihTbYcGKVUKgiCzP79+2/dvn174vr1611Xr17tA54B71nbWVVuTz4DbAY6qdtcdu/atWvn7Ozsr7CqN58PgmBbKwHyff/fXC5XtHvzPT09A69evVoAXlJvPZdNuVUxjg+3L58GNlH3/+RM7u3u7s5evnz5j7Nnz75thzXoxo0bXRcvXvx2bm6uQt3dUTJZAZaouz1qQOh2VSPjwiZgi1FSJ9Atpfymv79/4eDBg2+Hh4ffHDlyZLGVoDx48GDz6OjojsePH3dNTU3tVEr9BcwZ1ZRNiS1ZZbZSYo3cHZsNpKzJLdQdZjnzXQfN7VN0787LpnxK1B1m741iKma8GLMG6ZTWOlpwI99ezZwkrW2AMvNVPrZpU6ztqzUroOj3R9dWNWpZdFRju8z05zrMMlZ2NADU7B5FF1AEKcrPcphBY49ilL5J2/XaKgqKHK2ByWUr1/coRntvB5LrcvX52OC3e9nQ/D5p5UCqWVA+7XI1+wRqtVrik6aBT9r3fQAbUuK0jwPkQLJBbez/atiA7HBguUDa/t8+/w0Aop+YsD/C4DEAAAAASUVORK5CYII=") !important;
border-image-slice: 15 fill !important;
border-image-width: 15px !important;
border-image-repeat: repeat !important;
color: white !important;
background: none !important;
-moz-window-shadow: none !important;
}


.gDicClassPopupMore {
color: cyan !important;
font-size: 10px !important;
}
.gDicClassPopupTrans {
color: cyan !important;
font-size: 16px !important;
}

Nerjuz said...

Try this

/* white on black with big font minimalistic */
.gDicClassPopupBox {
border-radius: 7px !important;
margin: 0 !important;
border: none !important;
}

.gDicClassPopup {
border-radius: 7px !important;
color: white !important;
background-color: black !important;
border: none !important;
font-size: 10px !important;
}

.gDicClassPopupOrig {
font-size: 10px !important;
color: grey !important;
display: none !important;
}

.gDicClassPopupTrans {
color: white !important;
font-size: 14px !important;
display: block !important;
text-decoration: none !important;
padding: 10px !important;
border-bottom: dashed 1px #dedede !important;
margin-bottom: 10px !important;
}

.gDicClassPopupDetail {
display: none !important;
font-size: 16px !important;
}

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

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

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

Unknown said...

Hi dude. It's me, again.

I made another skin. but not just the background.
It's big compared with my first one and with those here. So i think it will not be a good idea post here. So i upload at Userstyles. Hope you like it. And all appologies about spam. It doesn't the meaning. Just i think i would be better this one.


I forgot. I hadn't can move or align or whichever i like with the "more" link. My skills in css apperas to be good cuz desings. but just appears.
For example, i wish have the "more" button ALWAYS touching the bottom without be part of the table detalls. When you choose search in english too, the "more" button link appears almost all the times more at the top respect the "more" button from english results (cuz results are more richest). It's there any way that you build the popup without a table way?
or do you have any suggestion for that?
(thanks for the tuto about the images)

Also i couldn't get the panel fade in and out with some position sliding, like the panels built-in in FF I check the css from those buil-in FF panels but i had can't. I hadn't. Also an opacity effect when the loading png goes out before the results appears. and an opacity results too. :/
some help?

Wiktionary and Google Translate (FF ADDON)

(And here. Some ideas.... you know...
It will be awesome if W&GT can use some other sites to translate than wiktionary. Like www.wordreference.com (very interesting cuz it has not just definitions, even, sinonims antonims...) and www.urbandictionary.com)

Also a automatic floating button could be more accesible. (...Even more if it can use various sites.)
Let me explain what i imagine: The addon "Selected Search Plus" when you select text shows a configurable floating popup with the installed search engines,
I imagine that when you select text a floating popup bar appear with icon to choose wiktionary, wordreference england to spanish (in example), or another icon but sinonims in wordreference... and so on.

And/or even better an option to integrate those search icons in the floating popup of other addons, like "Selected Search Plus", or "SelectionSK".

GoldenGnu said...

Sometimes, the image buttons are too close to the translation, making the translation harder to read (I translate to danish, where the descriptions are often very short, so the popup is smaller).


/* add a bit of spacing between the buttons */
img {
margin-left: 5px !important;
}
/* add space between buttons and text */
img:first-of-type {
margin-left: 30px !important;
}

Unknown said...

I tried:
".gDicClassPopupBox {
-moz-appearance: -moz-win-glass !important;
border-style: none !important;
background-color: transparent !important;
}"
but have a black background under "background-color: transparent "

Anonymous said...

Thanks for the great add-on! One of the things I always missed after coming from my ipad to my pc/mac is the dictionary lookup - and this takes care of that!

However, I think you may have added a new pronunciation class? I can change the text color in every class except for that; It remains black no matter what I do. Maybe its just a syntax error or my part, but if not, how do I access it?

Also, is it possible to use the box-shadow element? I've tried but to no avail. I'm assuming that you've "cut" the edges of the box at the border in your script so that nothing outside of that will show up, but I notice that the box does have a built in shadow. Is there any way to change that?

This is what I have so far; it's a semi-transparent blue gradient background with white text and rounded corners (still under construction though):

/* Main Window Box (behind the .gDicClassPopup Box) */
.gDicClassPopupBox {
-moz-appearance:none;
border-style:none !important;
background-color:transparent !important;
}

/* Main Window Styling (no text) */
.gDicClassPopup {
border-style:solid !important;
border-radius:8px !important;
border-width:1px !important;
border-color:black !important;
background: linear-gradient(135deg, rgba(171,170,224,0.80) 0%, rgba(126,134,194,0.81) 8%, rgba(102,112,196,0.83) 16%, rgba(89,99,180,0.85) 23%, rgba(82,92,171,0.87) 27%, rgba(63,72,161,0.90) 37%, rgba(43,52,136,0.93) 55%, rgba(8,18,92,0.95) 86%, rgba(21,25,60,0.97) 94%, rgba(30,30,36,1) 100%) !important;
}

/* Main Window Text */
.gDicClassPopupDetailList {
color:white !important;
}

/* Main Title */
.gDicClassPopupOrig {
color:white !important;
}

/* Secondary Title */
.gDicClassPopupTrans {
color:white !important;
}

/* The more link at the top right: Use when enabled */
.gDicClassPopupMore {
color:white !important;
}

/* The more link at the top right: Use when disabled */
.gDicClassPopupMoreDisabled {
color:gray !important;
}

If anyone is interested, I used this website to generate the gradient and then edited it to my liking.

DRGutman said...

None of the transparent skins work on my computer and I can't figure out why.
Any advice? (I've restarted FF and even the whole system)

 
Get This <