Mozilla Firefox 3.6 | Creating a customized Mozilla Persona Header

In the limelight of browser wars, the fastest most efficient browser Firefox has thrown in a few punches to remain a favorite on most user computer systems and establish it self as the leader it is, on the helms of browserdom.

The latest release version 3.6 has taken theming to the next level by allowing creation of customized themes that really allow you to re-brand your browser to have that conceptualized persona of you as an individual or company. Quite a number of themes are already available on the Mozilla Firefox website from different popular companies, brands and trademarks on film, TV, nature, sports and so much more.

This article is not to inform you of the Firefox 3.6 release since I know most of you are already using the new version, being that you had already noticed the pop up on the bottom right corner requesting you to update or informing you that your browser has been updated to the latest version but to take you through a brief How to Create your Own Mozilla Firefox Persona.

A brief history

The Mozilla Firefox persona has been built on the Mozilla Firefox themes which have been available ever since I started using Firefox. These earlier themes had the ability to change the basic look of your browser from the different colors for the title bar to different shaped and colored buttons on the menu bar and the navigation toolbar.

Creating your own Mozilla Firefox Persona

Creating a persona involves creating a persona header image and creating a persona footer image. The persona header image is displayed as the background of the top browser, nestling behind the toolbars, address bar, search and the famous Firefox multitasking tabs. This header image is anchored to the top-right corner of the browser window. The following are some of the requirements for the creation of a Mozilla persona header image:

  1. Dimensions are very important since anything above the preset, will not qualify as a Mozilla Firefox Persona. The header image should be 3000px wide and 200px high.
  2. The header image format should be either PNG or JPG
  3. The size of the image should not be more than 300kb in file size
  4. To achieve the best with your persona header image and avoid competition with the other graphics that will overlay the header then the image should be subtle, softly contrasting and gradients work best
  5. When the persona header image is placed Firefox may reveal more of the lower portion if an extra toolbar is installed through extensions.
  6. The detail of the header image is on the right-hand side. As the size of the browser is increased, the browser reveals more of the left-hand side of the image.
  7. And as a copyright precaution, do not use graphics or art work that you do not have legal rights to use.

Please note that you can test an already created persona before submitting. Now, brings me to Persona Plus. Persona Plus is a free tool that enhances your experience with personas. It enables you to test your personas and easily install other personas without having to send your browser to the persona gallery. With Persona Plus installed, at the bottom left corner click on the little Firefox to bring up a menu, click on preferences and ensure that the “Show Custom Persona in Menu” box is checked. Close the box and click on the little Firefox again and hover the mouse on “Custom” and to the sub menu find and click Edit. You can then build your persona with the upload fields and additional settings.

Creating a Custom Persona Footer Image

That brings me to the creation of a custom persona footer image. The requirements for a custom persona header image will apply to the persona footer image. The persona footer image should be:

  1. Dimensions should be 3000px wide by 100px high
  2. Image format should be PNG or JPG
  3. Subtle, soft contrast images and gradients for best look
  4. The other requirements on file size, artwork from the custom persona header image still apply on the custom footer image.

    Testing your Custom Persona Header Image

    The next step in Custom Mozilla persona creation will involve testing that is if you are satisfied with your mumbo jumbo in creative graphic design. The first step in testing has been highlighted above under Persona Plus. Persona Plus will allow you to test your Persona on your computer. The other step will involve downloading the Photoshop Personas Header Template. The key to using is this PSD template is layering your persona header image underneath the three operating system layers. Turning off the other OS layers you are not using will be a good idea. Once the other OS layers have been turned off you will be able to see any conflicts that arise and deal with them as necessary. Compatibility involves team work; therefore your persona header image should play nice with all the other members of the operating system cluster. If you are comfortable with the how the team is playing you can then save your final copies in PNG or JPG format ensuring that you do not exceed the 300kb file size. You might want to have a saved copy of the PSD with the changes you have made, in case you need to change something later.

    Submitting your Custom Mozilla Firefox Persona

    With your Custom Mozilla Firefox Persona Header fully designed, the next step will be to upload to the Mozilla servers, through submission. Once you have clicked the previous link you will be directed to a page where you will be asked basic info: your e-mail address, username, preferred password, description and of course to beat malicious code you will have to validate your input through reCaptcha.

    You can send me e-mail if you want a custom designed
    persona.

    That’s it. Enjoy your customized persona.


SNETTSCOM is an IT company. We excel at providing solutions in systems integration, consultancy, outsourcing, applications development, networking and security. Aside from this, SNETTSCOM also specializes in creative design and marketing.