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:

As you can see, my background color started out as a dark gray and, as I said above, I saved the images as transparent PNG files. So even this gray works well but I'm going to eventually change the background color to yellow and input the RIGHT image.

And here is what the theme looks like with both images put into place.

Keep in mind that the preview image on the Firefox Color website usually doesn't display things properly but at least the browser header area does.

Now we need to customize the colors. Go to the Custom Colors tab.

So the first thing I did was change the background color to the yellow shown in the first image above. I just copied the hex color code from Photoshop and input it in the given area outlined in the image below.

Now to customize the rest of the colors. I tend to like the Toolbar color and Search Bar color to be transparent.You might not want to make it completely transparent but keep in mind that if you don't lower the transparency of at least the Toolbar color then you will be blocking the images just put into place.

The colors are now customized.

As I mentioned above I more often than not make toolbar areas fully transparent. So let's take a look at it if I were to make the toolbar area color a light green and didn't lower the transparency at all.

As you can see, it hides the lower half of both graphics. But let's say I lowered the transparency to 50%, it would look like this:

You can now at least see the bottom halves of the left and right images. And it still looks good. But again, I prefer completely transparent.

Once I'm satisfied with everything, I like to save the design. This way if I ever feel the need to make adjustments to it, I don't have to start over. It will be there and easily editable.

Now for the awesome part! 😃 The EXPORT feature.

When you click on the Export feature you will be presented with a pop-up window.

Upon clicking Next you will then need to input a name for your theme.

After that you will be presented with two download options. You can either download your theme in a Zip file or an XPI file. I tend to download the XPI file but either will work just fine.

EDITED: I no longer download the XPI but rather the ZIP file because I had to download a special program to be able to open them if I needed to edit the version number of the theme. Whereas my Windows computer already opened ZIP files without an additional program.
Changing the version number on a theme will be a tutorial for another time.

When the window pops up for you to choose a location to save the file in, it will be titled with theme.xpi or theme.zip depending on which you choose to save. I edit the file name so that it corresponds to the theme name.

Now head on over to the Add-Ons site and submit your theme.

If you've not submitted a static theme before you will see that you are asked how you want to distribute it. The default is set to "On this site" so go ahead and leave it that way then click continue.

For those that have uploaded a static theme in the past, this is where things differ from the way you've done things before. Instead of clicking on the "Create a Theme" button you want to click on the "Select a file" button instead.

When you click on that button you want to select either the ZIP file or the XPI file that you saved your theme in. Your file will be processed. Once it's validated you can proceed by clicking continue.

When you saved your theme in Firefox Color and it asked you to input a name, that name will automatically appear once you submit the uploaded file. Saves you a small step.

And because you input your color preferences in Firefox Color it skips that step in the upload process as well. When you are finished adding a summary and selecting a category and such, just click the "Submit Version" button and you are done!

If you want to see the theme in action, you can see it here: https://addons.mozilla.org/en-US/firefox/addon/retro-colors/