Manipulating A Picture To Fit Theme

 

 Have you ever wanted to create a theme using a picture that, let's say, had more than one person in the picture but they weren't all side by side with each other? And if you've made themes before, you know that there isn't very much space, height wise, in which to use to create your theme. 

So for this tutorial I'm going to be using my now standard template of 5200 pixels wide (for extra wide screen resolutions) by 200 pixels tall. In the end, depending on what I choose as my background, I may crop some of the width from my theme. For now, let's get started.

I'm going to use this Disney's The Little Mermaid poster. As you can see, there are a number of characters (as well as other elements) that can be used in a theme. Now just for reference, the image below shows two dotted lines across the poster. Those lines represent the height of my theme template. And from that example, you see just how much of the poster would not be seen if you simply just cropped it and used what you were left with.

Firefox - Additional Toolbars

TUTORIAL SOMEWHAT IRRELEVANT NOW

Edited 08/10/2022

While it is still possible to customize the toolbar area, it doesn't appear possible to add any number of additional toolbars like it used to be. Also, to customize the toolbar area, just right click the header over any area without a clickable button and select Customize Toolbar.

--------------------------------------------------------------------------------------------------------------------------

Awhile back I started using the Classic Theme Restorer (NO LONGER AVAILABLE) add-on with Firefox so that I could bring back the footer area as well as customize certain things that were no longer doable in Firefox itself. And I honestly thought that even without that add-on you could add more toolbars. I found out that that wasn't the case when I was using my sister's laptop one day. So to customize the number of toolbars on your browser, you will need to add the Classic Theme Restorer add-on to Firefox.* From there, it's pretty simple and I've included some print screens below to show you how.

Once Classic Theme Restorer is installed, click on the menu button.

Then click on CUSTOMIZE from the menu that pops up.

 
At the bottom of the screen you will see an ADDITIONAL TOOLBAR button to the left of the green Exit Customize button.  Click on that.

Mozilla Themes - Focal Point Placement

A little while back a theme designer uploaded a design which was approved but after viewing their design on their browser they thought that someone at Mozilla, whether a reviewer or someone else, had resized their design. I explained that the designs are not in any way altered after they are uploaded. Here the issue was due to the focal point of the person's design not being where they expected it to be after it was displayed on their browser. So I created a sort of guide to show what was happening.

The problem was with where the focal point of the design (in their case an Anime image) was placed in relation to the person's screen resolution.

So let's take a look at some examples. The first one is a fairy design that I just created for this tutorial. I used a desktop wallpaper to create it and the focal point is the fairy and the caterpillar.

NOTE: The design is displayed on my browser with additional toolbars added so that the height is greater, allowing for more of the design, height wise, to be viewable. And the colored lines with numbers show various screen widths. If you don't know what your screen resolution is, visit: http://www.whatismyscreenresolution.com/ Click the image to see a larger view.

As you can see from the image above, my screen resolution's width is 1920 pixels, thus that is the largest width in my example image above and those below. But some screen resolutions are larger.

So let's say you wanted to create a design and weren't aware of how the themes display in your browser and you placed your image that you wanted to use in the center of your design.

Mozilla Themes - Focal Point Size

The pixel size for themes (previously referred to as Personas) is 3000x200 for the header graphics and 3000x100 for the footer graphics. In one of the Firefox updates a while back, the footer area is not seen by default so these days quite a few people don't even bother creating a footer graphic. I still do and will continue to do so because I have mine set to see the footer area.

So let's take a look at a sample 3000x200 header graphic.

So when I'm creating a design, I have a blank template file saved on my computer. One of things on the template file is a size guide (which I call Marker). Default screen resolutions have gotten bigger over the years. My screen resolution is 1920x1080. I remember when the main screen resolutions used were 800x600 and 1024x768. So my size guide is 1024 wide, like so:

I have the marker available there so that when I'm creating a design, the focal point is within that area. That's not to say that my design always stays within that area though. I've created designs that went the whole way across the image and you can too. You'll just need to keep in mind that the amount of design you or anyone else will see is dependent on their screen resolution. But at least using some sort of marker you know, especially if you are adding text, that the majority of screen resolutions will be able to see it as it is intended to be seen.