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 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:

Using Firefox Color to Test Themes

Mozilla has introduced a new add-on called Firefox Color. Previously we had Personas Plus to test our designs before submitting them, and I found it immensely helpful. But now Mozilla has created Firefox Color to replace Personas Plus. And I thought it might be helpful for some to create this tutorial.


As Halloween is creeping up on us I've selected a grim reaper clip art image from classroomclipart.com for my test.  The downloaded image size is 550 x 367.

Although it has always been stated that Firefox Themes should be 3000 x 200 pixels in size, with the new Static Themes there doesn't seem to be a limit anymore. You really only need, at most, 200 pixels in height though and even some of that won't show on your browser. The width can pretty much be whatever you want it to be. It doesn't have to be 3000 pixels wide anymore, thus I'm using a much smaller image in this tutorial.

So what do you do? Well one thing you can do is when the image is open in your graphics program you can take your Selection Tool and select the first 200 pixels (starting from the top) of your image. Like so.

I have it set up in Photoshop to show the Ruler of an image and in the Preferences I have Rulers set to display in Pixels as opposed to Inches, etc. So when I selected the image I just paid attention to the ruler on the left side until my selection was close to if not exactly at the 200 pixels mark. Keep in mind, once again, that not all of your image will be seen. So think about how much and what parts you want seen. For me, I'm going to adjust my selection by putting my pointer inside the selection and clicking then dragging the section down.

As you can see from the above image, I moved my selection down a bit. It's not necessary to see the tippy top of the reapers head. At this point I cropped the image and saved it to my computer.

So let's take our cropped clip art image into Firefox Color to test it out!

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.

Installing Firefox Theme In Thunderbird

EDITED 08/10/2022

I have 2310 themes (as of this edit) available on Mozilla yet only 8 of my themes are available to use in Thunderbird. The Brave theme shown in this tutorial isn't even available for me to use anymore. I have no clue as to why that is. And I've not been able to find any answers either. So more than likely this tutorial is irrelevant now.

 

In order use a Firefox Theme in Thunderbird, you have to install it through Thunderbird. So you want to open Thunderbird then click on TOOLS. From there go to ADD-ONS.

If you are logged into your Firefox account in Thunderbird, you should see a profile area (as shown below) in the Add-ons Manager window that opens. If you are not logged in, you can login and then click on MY PROFILE. That will take you to your page with your available Themes shown.

Simple Non-Animated Rain

Let's say you have an image that you want to add a touch of rain to it. It's really easy to do.

I've chosen this stormy image that I got from thewallpapers.org. Open your chosen image in your graphics program.

Start off by adding a new transparent layer.