Mozilla Mailnews FAQ

How do I change the emoticon images that Mozilla displays graphically?

Mozilla 1.6 and prior

Each emoticon is a 19x19 pixel GIF file contained in the program's comm.jar file. To replace any of them, you need an archive zipper such as WinZip.

1. First, take the files you would like to use as your new emoticon images and name them accordingly:
cool_n.gif
cry_n.gif
embarrassed_n.gif
foot_n.gif
frown_n.gif
innocent_n.gif
kiss_n.gif
laughing_n.gif
money_n.gif
sealed_n.gif
smile_n.gif
surprise_n.gif
tongue_n.gif
undecided_n.gif
wink_n.gif
yell_n.gif

2. Save them in C:\content\editor\images.

3. Close Mozilla.

4. Unzip comm.jar which resides in the Mozilla's \chrome\ directory: C:\Program Files\mozilla.org\Mozilla\chrome

5. Click on "ADD", to add a file to the archive; and select the files you saved in step 2. Make sure that you check mark "Save extra folder info", so that the files being added include the directory \content\editor\images. That should replace the already existing files of the same name and filepath.

6. Zip up com.jar, and close WinZip.

Mozilla 1.7 and beyond

In Mozilla 1.7, emoticons have become dependent on the theme being used. These instructions will override any theme. You will not need a file zipper. Save the 19x19 pixel images in your profile's \chrome\ directory.

To change the images that show up within the message content, add the following script to your userContent.css (See Editing Config Files):

span.moz-smiley-s1{
background-image: url("filename.extension") !important;
}

Replace filename.extension with the actual file name and extension.

Also note that "s1" refers to which emoticon is being replaced.

s1 = smile
s2 = frown
s3 = wink
s4 = tongue
s5 = laughing
s6 = embarrassed
s7 = undecided
s8 = surprise
s9 = kiss
s10 = yell
s11 = cool
s12 = money
s13 = foot
s14 = innocent
s15 = cry
s16 = sealed

So, if I wanted to replace the "cool" emoticon with my own cool.png file, I would add this to my userContent.css:

span.moz-smiley-s11{
background-image: url("cool.png") !important;
}

Next is the dropdown menu.
For the dropdown menu, you'll need to add the following script to your userChrome.css:

.insert-smile > .menu-iconic-left {
list-style-image: url("filename.extension") !important;
-moz-image-region: auto; /* cut off inheritance */
}

Again, replace filename.extension with the actual file name and extension; and replace "smile" with the name of the emoticon that is being replaced.