[judge]

So here is my latest Gmail .Mac skin for FireFox 1.5 (way down at the bottom of this post as an attachment!). Naturally I should point out that this wouldn't exist without the input of many people over in this thread. Here's a few features:

• All of the various pages are now skinned (except for login, which could be done fairly easily but would be part of a different domain).
  
• Removed the annoying blue stripes on some elements.
  
• When you're reading a message, the 'sponsored links' have been removed and the tools are now above the message you are reading so you now have more width to play with.
  
• The web clip bar is now skinned.
  
• The 'invite a friend' table is now skinned.
  
• I've removed the 'expando snippets' when you mouse-over message in your in-box. You can add it back in by editing gmail.css (search for snippets).
  
• All of the images are inline. If you want to change them you can just set them to a URL on some web-site or you can get yourself a copy of base64.exe and make them inline yourself.
  
• You can change the .Mac logo by replacing the URL where it says /* change this to get different email pic */.

So how do you use this puppy? Unzip the attached file into the chrome foler in your firefox profile folder. Go to your firefox profile folder/chrome and edit userContent.css. If there isn't a userContent.css you can just create one with nothing in it. Then, at the very top of this file add the following line:

@import url("gmail.css");

Remove any remnants of previous skins for Gmail from your userContents.css file. Restart firefox and all should be well. If it isn't, make sure you were in the right profile folder, that you put the import at the very top and that you entered it exactly as it is shown above, that gmail.css is where you think it is, that you're using FireFox 1.5 etc. etc.

Here's a PSD file that you can use to create your own logos.

Here's a ZIP of the images I used.

Here's some screenies:





Enjoy

Attached File(s)

•  gmail.zip (142.49K)
  Number of downloads: 877

[shockme17]

any chance of a screenshot

[shmengie]

d'oh! i'm busting my hump trying to figger out why i can't get this to work. then i decide to read your whole post...just a minor detail about needing v1.5. i'm sure it's awesome...

[mimeryme]

Quote

Excellent work judge!

One minor change to the instructions though, the file should go into the "chrome" directory within your firefox profile folder as that's where the userContent.css file should be as well.

At least that's where I've always had my userContent.css located. If it works this way too, then please pardon me.

[judge]

No. You were right. Have amended instructions.

[shockme17]

woohoo, i'm in the screenshot!

[zerroeffect]

Got it to work. Good job and thanks.

[judge]

Minor update. Forgot one element - the 'Mail has been marked as read' etc. status bar. Re-download and write over gmail.css.

Also here are the images that were used to skin it, so you can create your own skins (err, like a milk skin maybe?).

Attached File(s)

•  gmailimages.zip (126.52K)
  Number of downloads: 430

[piotr82]

Ok sorry for that but i install it for first time.
I must install any plugins ???
I get to this :
C:Documents and SettingspiotrDane aplikacjiMozillaFirefoxProfilesv4jxfybn.defaultchrome

and put there : gmail.css and userContent.css that i create with @import url("gmail.css");

ooo i hope this is for 1.5 , i install it over the previous version

Ok i solve the problem
Great skin

[nightcrawler1089]

Nice, using it now . Thanks!

-NC

[Innova]

Thanks Judge for taking the time to make this.
Sorry to be a pain but I have a few issues:

How can one increase the width of the links on the left (inbox, compose mail etc)?
I ask this because some of us use localised non-english versions and the text is longer than the button. The code is far too complex for the novice user.

Also I saw in your pics that the labels and invite widths are the same as the link buttons on top. On my comp this is not the case, the labels and invite a friend are a bit longer. Take a look.

Also the ability to center align the link text would be super nice.

Attached File(s)

•  corel.png (16.07K)
  Number of downloads: 77

[judge]

I don't know of any general way of stretching the buttons. You would have to edit the images by hand to be the right size and then re-insert them into the CSS file, either by encoding them with base64 or by just uploading them somewhere and then putting the URL in the CSS file. There are three sections in the file labelled 'span.lk' - you would need to change the URL for the 'background-image' entry in those sections.

[Gideon007]

thanks for taking all that time to perfect this skin. The @import way is a really clean way to make it work. Great thinking.

Bug:
Java script console is reporting errors in line 395 and 399

Quote

background: solid #cccccc !important;

the solid part is not understood by firefox.

Is there a way to load the pictures without writing them to the css file?

[judge]

Gideon007 said:

thanks for taking all that time to perfect this skin. The @import way is a really clean way to make it work. Great thinking.

Bug:
Java script console is reporting errors in line 395 and 399

the solid part is not understood by firefox.

Hmm. interesting, Dreamweaver generated that for me. Will fix it in next update. Have to say though, compare with the errors it reports from google's scripts/css that's nothing

Quote

Is there a way to load the pictures without writing them to the css file?

Yes. Just replace the URL with a real URL - though for security reasons it can't be a local file URL, it has to come from a web site. For example you could change:

background-image: url('data:image/gif;base64,R0lGODlhAQADAJEAAP7+/vj4+O/v7wAAACwAAAAAAQADAAACAoRSADs=') !important;

to

background-image: url('http://www.mysite.com/images/myimage.gif')

[Gideon007]

ah, I see. I wonder why they do this for security reason...
Leads me to another question of course, is there a way to learn which of the "data:image/gif;base64,R0lGODlhAQADAJEAAP7+/vj4+O/v7wAAACwAAAAAAQADAAACAoRSADs='" is which picture of your pack?

[judge]

Good point. I've updated the attachment in the first post to include comments for the images (and I've fixed the background: solid #cccccc !important problem).

[Mac_Win]

ｉｔ　ｉｓ　　ｆｏｒ　ＩＥ　？

[Gideon007]

Quote

ｉｔ　ｉｓ　　ｆｏｒ　ＩＥ　？

huh?

Quote

So here is my latest Gmail .Mac skin for FireFox 1.5.

@Judge: Thanks again.

[guru]

thanks judge!!

[Timan]

Judge that looks fantastic, amazing work as always.