How To Create Your Own FireFox Theme

The Firefox web browser supports two different theme types: so-called Personas or light themes, and complete themes.

The main difference between the two is that Personas modify only colors and backgrounds, much like Chrome themes do, while complete themes can modify nearly every element in the interface.

Mozilla, for some reason, has focused on light themes in recent times and while you can still get full themes for Firefox, they have taken a backseat because of it.

This guide walks you through the steps of creating your own light theme. It is actually rather easy thanks to the limitations they impose on what can be changed.

Lets take a look at requirements first
  • You need the Firefox add-on Personas Plus to load the customizations. This is an official Mozilla theme that adds functionality to Personas.
  • You need an image editor to create the Personas header image that you want used.
  • The header dimensions are 3000x200 pixels.
  • The footer dimensions are 3000x100 pixels.

Getting started

The first thing you need to do is find a suitable image. You can also create your own instead, for instance in the image editor of choice.

In for example, you select File > New, set the width to 3000 and height to 200 to get started.

Now you can use the gradient tool to create gradiants for example. The benefit of this is that header images with gradients or plain colors fit better in the header usually as images may make it difficult to read tab text for example. They are also smaller in size by a large margin.

If you want to use part of an existing image instead, the process is slightly different. You can check out Reddit's ultra HD group for inspiration for example.

Once you have found one load it in the image editor of choice. If you are using, use the selection tool to highlight a 3000x200 area on the image and press Ctrl-c once you have done so.

Use Ctrl-n to create a new image with the 3000x200 dimensions, and Ctrl-v to paste the copied part of the images on to it. If you are asked to expand the canvas, don't but keep the original size.

Save the image to your local system and repeat the process for the footer image.

Note that the footer area is not displayed anymore by default by Firefox due to recent changes made by Mozilla.

Adding the theme to Firefox
Now that you have created the header image for the theme, all that is left to do is to create it in Firefox.

Install the Personas Plus add-on if you have not done so already and restart the browser to complete the installation.

It adds an icon to the main toolbar that you can click on for options. Click on it and select preferences from the menu.

Check the "enable custom personas" option when the preferences window opens.

Once done, click on the menu icon again and select Custom Persona, Edit from the menu.

Select the browse button next to header (and footer as well) and pick the image that you have created for that spot.

The theme is applied right away so that you can see it in action. Note that you may need to change the text color depending on the theme as Firefox may apply a shadow effect to the font automatically in the tab bar. This happens for example when you select a light background as you may not see the text on tabs otherwise because of the light text color.

Just switch to a darker color in this case and the shadow effect is gone.

Want to create your own Chrome theme ?


Post a Comment

Yes You Can Comment,Dnt Be Shy