Create your own Firefox Theme

Martin Brinkmann
Jan 7, 2015
Updated • Jan 7, 2015
Firefox
|
11

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 Paint.net 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.

gradiant2

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 Paint.net, 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.

custom personas

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

firefox custom persona

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.

Summary
Create your own Firefox Theme
Article Name
Create your own Firefox Theme
Description
Find out how to create your own theme for the Firefox web browser in two easy steps. No coding required.
Author
Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Ronald said on January 17, 2015 at 1:30 am
    Reply

    I’d like to put in a plug here for the Simple White complete theme: https://addons.mozilla.org/de/firefox/addon/simplewhite/

    Very stylish and Aero transparency is preserved.

  2. Pizzapops said on January 9, 2015 at 10:15 pm
    Reply

    I found that the 3000×200 and 3000×100 sizes are not set in stone. I use All-In-One sidebar and am tired of the personas that have funky colors in the sidebar. I used a 1920×1080 image for both header and footer and it worked. Both my Firefox 34 and my Cyberfox 34 both run from a SSD and I have not noticed any startup slowdown. I will probably use a 1920×100 image for the footer in future personas. Does anyone know if a transparent image was used for the footer, would the header show through?

  3. David said on January 7, 2015 at 9:09 pm
    Reply

    That add-on converter looks fantastic. SeaMonkey still does some things better than Firefox out of the box, but extension compatibility drives me away every time. Maybe with this converter I can get the essentials working :-)

    I tried SM again last week, and I was surprised that the messy secure addressbar highlighting is still a problem. It makes a terrible impression. I’d like see Martin do a review of SeaMonkey and how it holds up against Fx. I think it will be close.

  4. Testuser said on January 7, 2015 at 5:15 pm
    Reply

    Awesome to see another guide on this :) But since there is a lack of documentation for something specific: There is a way to have Personas enabled in Windows 7 with Aero transparency enabled. After an incredible amount of searching time I found a working method on Youtube (youtube.com/watch?v=Y_CVAKPdpHA), and in short you need to do this: Do everything described in the article. Your picture MUST include png transparency, luckily easily addable with many photo editors. After you have added your own local persona, go to about:config and search for extensions.personas.custom, and add

    ,”accentcolor”:”rgba(0,0,0,0.0)”}

    at the end of the text. If there is already an accent color value, replace it. It should look something like this: {“id”:”1″,”name”:”My Persona”,”headerURL”:”file:///C:/Persona-1-1_transparent.png?6237″,”footerURL”:”file:///C:/Persona-1-1_transparent2.png?7511″,”custom”:true,”accentcolor”:”rgba(0,0,0,0.0)”}

    If done correctly, go to the custom persona editor, and now it applies the transparency! :) The fact that every standard persona removes your Aero transparency on Firefox / Pale Moon / Cyberfox (etc) was always a major dealbreaker for me.

    1. Martin Brinkmann said on January 7, 2015 at 5:39 pm
      Reply

      That’s a great tip, thanks so much!

  5. dummy said on January 7, 2015 at 1:48 pm
    Reply

    Why not giving an opportunity to SeaMonkey?
    http://www.seamonkey-project.org/
    If you are concerned about the lack of extensions, now there is an add-on converter: http://addonconverter.fotokraina.com/
    See for reference this thread oon mozilla zine: http://forums.mozillazine.org/viewtopic.php?f=40&t=2834855
    Note that important add-ons like noscript, request policy, mozilla archive format, silent block, down them all, adblock plus and many others works without any conversion.
    If you need mouse gestures, Mouse Gestures Suite works pretty well (for me, better than firegestures on firefox or palemoon).

    I can’t say that Seamonkey will be fine for everyone, but I really think it is worth a try.
    Cheers
    :)

    1. kalmly said on January 7, 2015 at 3:12 pm
      Reply

      I’m about to try SeaMonkey myself. I loved Pale Moon, much more than FF, but can’t use it now on my XP system, and FF is hogging CPU (and Avast seems to be helping it) on both the XP and the Win7 machines.

      I’m not an extension freak. I use Adblock Plus, Colorful Tabs, Tab Mix Plus, Classic Theme Restorer, and Session Manager. But since FF 34, “sessions” fail to load about half the time. Pale Moon was smooth and easy on the XP, but is glitchy on the Win7.

      Remember when browsers just worked?

      1. Doc said on January 7, 2015 at 11:54 pm
        Reply

        Get rid of XP as soon as possible. There’s no more security patches for it (unless you’re a corporate customer and willing to pay huge sums for patches), and Windows 7 works better anyway.

        @Testuser: Did you miss the part where kalmly mentioned Windows xp? :)

      2. Testuser said on January 7, 2015 at 5:20 pm
        Reply

        Sounds like a possible conflict with video drivers. If you haven’t reinstalled Windows 7 for a long time, you should do it. Windows is prone to unknown errors and other glitches when you have done a lot of installations or other things, especially if your installation is several years old. I have experience with this, and maybe I’m just lucky with my video drivers or whatever, but I had never a single browser crash in any browsers. Or at least I can’t remember when the last one was. I’m not one of these liars which say that Steam doesn’t have downtimes, it’s really the current state for me.

  6. David said on January 7, 2015 at 1:08 pm
    Reply

    Australis broke everything. That’s why I’m not updating. Not cos of the styling, but cos NOTHING WORKS ANYMORE.

    I’d like to see a guide: How To Compile Firefox Yourself Without Australis. Someone already did this in the Holly branch, so all I want are instructions concerning how. And no, not Pale Moon.

  7. Aust-fail-us said on January 7, 2015 at 10:43 am
    Reply

    Australis makes it so that, you can’t have foxdie IRON MAN, a status bar, or use addons like Chrome Edit Plus, ProxySelect.
    Where there once was CONTROL of the browser there now is none. In Linux it’s an anoyance that must be bypassed with Palemoon.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.