Firefox Color - New Feature

I'll admit that when I first installed Firefox Color I was glad to have the ability to test themes out before uploading them but then I just found it to be a bit of a hassle. It was because it would automatically change your current theme to whatever was active in Firefox Color. So then after using it I would have to go into the Add-Ons menu and switch back. Unfortunately, that's still the case. However, I've found a new feature that wasn't there the last time I used it. And that is the EXPORT option! It's an amazing feature. PLUS, you can use multiple images (up to three) to create your theme as well. If you were to just upload a theme normally, you would only be able to upload one image. So let me show you what you can do with Firefox Color!

For this tutorial I created a pretty simple theme. The image below shows the theme that I came up with using a stock image found on Freepik.

What you might not have been aware of before, like me, is that you can incorporate more than one image in your theme. So for the theme above I have two images, one at each side, and then just a light yellow background.

I saved each side image separately as transparent PNG files.

So once you have your image(s) saved, go to Firefox Color.

From the Custom Background tab I selected the LEFT side image first. As you can see from the image above, the default setting is for the image to repeat both ways. But I don't want it to repeat so I'll change the drop down menu to No Repeat. I'll also set the alignment from the Right to the Left, like so:

Using Firefox Color to Test Themes

Mozilla has introduced a new add-on called Firefox Color. Previously we had Personas Plus to test our designs before submitting them, and I found it immensely helpful. But now Mozilla has created Firefox Color to replace Personas Plus. And I thought it might be helpful for some to create this tutorial.


As Halloween is creeping up on us I've selected a grim reaper clip art image from classroomclipart.com for my test.  The downloaded image size is 550 x 367.

Although it has always been stated that Firefox Themes should be 3000 x 200 pixels in size, with the new Static Themes there doesn't seem to be a limit anymore. You really only need, at most, 200 pixels in height though and even some of that won't show on your browser. The width can pretty much be whatever you want it to be. It doesn't have to be 3000 pixels wide anymore, thus I'm using a much smaller image in this tutorial.

So what do you do? Well one thing you can do is when the image is open in your graphics program you can take your Selection Tool and select the first 200 pixels (starting from the top) of your image. Like so.

I have it set up in Photoshop to show the Ruler of an image and in the Preferences I have Rulers set to display in Pixels as opposed to Inches, etc. So when I selected the image I just paid attention to the ruler on the left side until my selection was close to if not exactly at the 200 pixels mark. Keep in mind, once again, that not all of your image will be seen. So think about how much and what parts you want seen. For me, I'm going to adjust my selection by putting my pointer inside the selection and clicking then dragging the section down.

As you can see from the above image, I moved my selection down a bit. It's not necessary to see the tippy top of the reapers head. At this point I cropped the image and saved it to my computer.

So let's take our cropped clip art image into Firefox Color to test it out!