GMail in Blue: Professional skin

Written by marteau, installed 5,617 times.
Last update on Oct 3, 2008
18 fans 27 comments

====== Give a professional apparence to your GMail with this skin! ======

Works with the new version of GMail Firefox 3 +Greasemonkeyand Opera

* Footer, logo, logo on print, chat box, invites, spam count, icons and ads have been removed
* Background color of messages in white
* Hover-effect on messages in blue color
* New mail incoming is highlighted in yellow color
* Works with small attachment icons, and blank canvas signature scripts
* Font size has been fixed to 11px but can be easily changed in the code

If you use Folders4Gmail with this skin don't forget to download this one: http://userscripts.org/scripts/show/34694

All known bugs have been solved but... don't hesitate to suggest some improvements! :)

Inbox

GMailinBlue3

Message view

GMailinBlue3

Print view

GMailinBlue3

Contacts

GMailinBlue3



Latest:
10/03/2008: The loading of images after clicking on the "view" button has been fixed

09/15/2008: No need to deactivate the script for adding picture to your contact. Script is now also compatible with Mailto 2 Gmail script - Input field border in grey and width 100%
05/09/2008: Webclips bug has been solved - Quick links (print all, ...) have been aligned on right with blue hover effect - Search box field is now colored in white
09/03/2008: "Print all", "new window", "expand all", "collapse all", "forward all" buttons are now working
09/02/2008: New code and new apparence of the skin with highlight of each mail section (i.e inbox, starred, spam...) - full width is included by default and label box was condensed - chat box removed but could be added by changing the code - bugs known: you need to disable this skin to add a picture to your contacts - clips do not work anymore (please download the previous version to keep these features)
08/18/2008: info account has been removed (because I'm not paranoiac and Gmail allows now secure connection in settings) - code has been cleaned
07/16/2008: now info storage and info about account in blue color (instead green)- both moved on top
07/15/2008: footer has been cleaned and info-space has been moved on top-right
07/10/2008: name of the clips on right has been removed to avoid text superposition "older> and oldest>>"
07/09/2008: sentence "about these links" in ads has been removed
06/17/2008: bug in contact display with Firefox 3 has been fixed / Gmail full width script removed.
06/16/2008: uncompleted display in "contact" has been fixed / now Gmail full width and Remove Logo on Print scripts are included by default
01/28/2008: GMail logo removed (works now with the last version of greasemonkey)
12/21/2007: when you open a new mail from google.com/ig, title of subject and first line of conversation were not truncated anymore
12/05/2007: arrow in "more actions" button added. Script has been optimized for Gmail native labels



You could comment on this script if you were logged in.

27 comments Feed-icon

1 point
login to vote
marteau script's author
Posted Sep 30, 2008

Hi Iscah!
Try this one that works fine for me and is compatible with my script: http://userscripts.org/scripts/show/14030
:)

1 point
login to vote
iscah user
Posted Sep 30, 2008

This is an excellent script! I don't think I could ever go back to the original Gmail interface after using this.

With the help of your instructions to others I have tweaked this so that it works better for me, but there is one functionality that I would love to see - Google Reader integrated into Gmail.

I'm new to using Greasemonkey, but it seems that there were a few scripts that worked with the old version of Gmail. I liked how this one looked: http://blog.persistent.info/2006/10/google-read...

It appears that a new menu item ("Feeds") was added to the left side menu and you could view your feeds in the email pane.

Is this something you might look into?

In any case - I love Gmail in Blue. Thanks for going to the effort. :)

1 point
login to vote
Chris Bartlett user
Posted Sep 29, 2008

AWESOME! Very well done, sir.

2 points
login to vote
marteau script's author
Posted Sep 29, 2008

Sorry it was a mistake, I've corrected the link. Yes you need to reinstall this new one and to remove the original. :)

1 point
login to vote
Chris Bartlett user
Posted Sep 29, 2008

Hi again,

Sorry, I'm confused. Your link points to this very script, not Arend's Folders4Gmail script. I reinstalled the one you link to (this one), but still green. Do I need to reinstall Folders4Gmail or dod you rewrite his script, post it elsewhere, but post the wrong URL?

Little lost, sorry!

1 point
login to vote
marteau script's author
Posted Sep 29, 2008

Hi Chris,
The image of the icon is given by the script Folder4Gmail itself. So I've modified the original script from Arend by changing the color of "+" and "-" in blue. You will find the script here: http://userscripts.org/scripts/show/34694
But one more times all credits to Arend

1 point
login to vote
Chris Bartlett user
Posted Sep 29, 2008

Very cool.

I have removed the encryption because, yeah, it's just for me. Many thanks, this is a wonderful script!

In closing, if I may make a final suggestion... The only thing i did not do is change the color scheme of the Folders4Gmail scipt (the plus and minus signs). Honestly, it's out of my league to change all that's necessary... But with so many people using your script (and we all know how popular Folders4Gmail is as well), do you think that fix is something you'd be able to do for everyone to benefit? Food for thought!

Again, it truly is a fantastic style you've created here. I can't praise it enough.

2 points
login to vote
marteau script's author
Posted Sep 29, 2008

in fact I think you can only replace original script by the following one. Indeed if it is for a personal use you don't need to encrypt your address
/* REPLACE GMAIL LOGO */ .zYsCRb { background-image: url('http://www.mysite.com/image.png') !important;}

but unfortunately, I think only 143*59 px is allowed :)

1 point
login to vote
Chris Bartlett user
Posted Sep 29, 2008

Perfect, that all worked beautifully! Thanks!

One final question, though... The native Gmail logo is 143x59 px. Can I change it, in your script, to 143x143 px? If so, how?

Thanks!

PS. Good lord, that encrypted link is looooooooooooooong... ;-)

2 points
login to vote
marteau script's author
Posted Sep 26, 2008

Hi Chris, thank you for your comments!

1.
Change this
/* REMOVE GOOGLE LOGO */ .zYsCRb {display:none !important;}
by this:
/* REPLACE GMAIL LOGO */ .zYsCRb { background-image: url('http://www.yourwebsite.com/mylogo.gif ') !important; margin-top: 7px !important; background-repeat:no-repeat !important; }
but you need to encode this address in base64 before (for doing this, use the following link: http://www.greywyvern.com/code/php/binary2base64)

2. The "+" image is defined by the Folder4Gmail script and correspond to the following link: data:image/gif;base64,R0lGODlhDAAMALMPAP///3ejQYKrUfT377fOmrTMlvL27YSsU/H164WtVb3To7nPncHVqLXNmL/Upv///yH5BAEAAA8ALAAAAAAMAAwAAAQ08K0Uqk3rEYWA/4hCCMNXfYMQfMBpri97WvQ617cMey6/t6SYJ0VwGFgeA6PxKBxwh8IjAgA7
I think that you can create your own and replace the previous link by yours, for example with this I have created:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF////XqXQba3c7+//8/f/rs//tdT/cK7dsdD/8fb/q83/8PX/ca/ft9X/utb/rM7/9ms/jgAAAEhJREFUeNp0jTsWwCAIBBcR/5r73zYoNpqXKWCnWACnRouWGBIqFjUInNdApMM7zGWi8RLafOWvc5yWnu1pHg+4ROvHwq8AAwBP0wEQ6FYxYwAAAABJRU5ErkJggg%3D%3D

you need to replace all the links "+" "-" and also for mouse-hover effect

3. I use the "Gmail *2* small attachment icons" script that you can download here: http://userstyles.org/styles/3958

1 point
login to vote
Chris Bartlett user
Posted Sep 25, 2008

Wow! Great script, I just installed it for the first time, and I love it. Three quick questions, as I'm new to this particular script.

1. Is there a way for me to place my own logo in place of the blank whitespace where the Gmail logo used to be? I figured out how to get the logo back, now I'm simply curious if i can replace it!
2. I use the Folders4Gmail script as well. Still works perfectly, but the plus signs to expand the folder list are still green (that script's color scheme). Do you happen to know where I could change it?
3. I don't see the attachment icons being different. They're all just the paper clip. Do I need a separate script? I know the "Gmail with different attachment icons" script no longer works... :-(

THANKS!

1 point
login to vote
marteau script's author
Posted Sep 15, 2008

Hi hubert_joost!
You can now add a picture to your contact and also use your favorite script "Mailto 2 Google" with the 4.0.4 version of my script. Enjoy!

1 point
login to vote
hubert_joost user
Posted Sep 15, 2008

Best Gmail skin so far - however I can't get it to work with other scripts that redirect mailto: links to Gmail (I now use this one: http://userscripts.org/scripts/show/12321 . It seems that the skin is then blocking Gmail somehow.

Have you noticed this before? It would be appreciated if you find a way to correct this.

Thanks!

1 point
login to vote
snjflame user
Posted Sep 8, 2008

Cool, Thanks !

2 points
login to vote
marteau script's author
Posted Sep 5, 2008

Hi snjflame!

If you want the search bar comes under the storage information, you have to replace the text:

/* MOVE STORAGE INFO TO TOP */ .pghVUe span {position: absolute !important; right: 10px !important; top: 50px !important;color: #336699 !important;}

by the following one:

/* MOVE STORAGE INFO TO TOP AND SEARCH BAR TO RIGHT */ .pghVUe span {position: absolute !important; right: 10px !important; top: 40px !important;color: #336699 !important;} .oF1kyb {position: absolute !important; right: 10px !important; top: 50px ! important;}

1 point
login to vote
snjflame user
Posted Sep 5, 2008

How about moving "mail search bar" under the "You are currently using 94 MB (1%) of your 7103 MB."

1 point
login to vote
marteau script's author
Posted Sep 4, 2008

Hi Marno!
1. Download the version 4.0.2 of the script
2. Delete the text /* HIDE CHAT/CONTACTS BOX */ div[class=\"XoqCub a3hTGd\"] { display: none !important;} and chat box will be displayed.

1 point
login to vote
Marno user
Posted Sep 4, 2008

Hi, very beautiful skin. Only it seems to remove the chat list from the side pane. Is this on purpose?

1 point
login to vote
marteau script's author
Posted Sep 2, 2008

Sorry kimC, it seems the attachment icons script is not longer working. We're waiting for an update!

1 point
login to vote
kimC user
Posted Aug 24, 2008

Hi, everything looks nice, but how do you get attachment icons to work?

1 point
login to vote
Dapxin user
Posted Jul 31, 2008

thx. It works better now.

I will suggest you make that a variable declaration above the script. Not every one out there fancies Ctrl+F.

Or, a small, medium, large button floating (on 1st run) will be most n00b-ful :) good work ! It rocks in opera !

1 point
login to vote
marteau script's author
Posted Jul 9, 2008

Hi Dapxin,
Feel free to increase the font-size as you like: find the sentence at the top of the script "font-size : 11px !important;" and change 11px by 12px, 13px or more!

1 point
login to vote
Dapxin user
Posted Jul 9, 2008

Yo. good work.

On a widescreen, the fonts become smaller. Is it possible you give us a variable so we can simply up the font-size ??

thx.

1 point
login to vote
Alan Smith user
Posted May 20, 2008

wow I didn't expect this change to be so drastic. looks great. thanks for writing it.
just some small suggestions
on the right, more space between where it says "sponsored links" and lists the number of messages (i.e. "1 - 50 of 87")
on the left side where the "folders" are, give that area a box like the chat and labels have. (compose mail/inbox/starred/chat...)
yup.
looks great, thanks.

1 point
login to vote
backdoorangel user
Posted Mar 7, 2008

I created a login just to let you know that this is the best gmail skin i've seen so far, been using it since v2.0 and i absolutely love it!

thanks and keep up the awesome work!

You could comment on this script if you were logged in.