Hi
One of my Mozillian goals for the year is to make something, and there are a few ideas for some themes I would like to make. I enjoy installing themes of both Nightly on my desktop and on Android and it only seems fair that I contribute a few of my own.
I tried to make one the other day, but I found that the text on the background was very blurry and almost unreadable. What causes this and are there any tips to avoid this from happening?
Hi Seburo,
Is the theme you mentioned still online? I’d like to see what you mean if possible. Then perhaps I can make a suggestion on what will help with the blurry text.
Without seeing an example, my first guess would be that the text color you chose might have been too light or too dark and the drop shadow caused it to not be clearly visible.
Apologies for the delay in responding.
I have made this: https://addons.mozilla.org/en-GB/firefox/addon/privacy-theme-v1/ using the theme creation tool in AMO.
The text in the active tab is a little hazy, and the text in inactive tabs is invisible. The icons and the text in the address bar look perfect, and I want to use the background image, maybe making the toolbar color a little darker.
Any ideas?
It is the colors you chose. Trying changing the text colors to white or a lighter color and see if that looks better. Sometimes a darker color has a shadow to it and that is what makes it look blurry.
Hi Seburo,
You could try changing the text color, as MaDonna suggested; however, I added your theme to my browser to test the text. I wanted to see what you were seeing. Having done that I can see that you have your background color as light gray because the image you used isn’t wide enough to fit my screen resolution. Anyway, one good thing to always remember when choosing a background color is to pick a color that matches, or as close as you can get, to the background color of the image used. So my suggestion would be to change the background color to either the blue, rgba(0, 62, 124, 1), or the black ,rgba(0, 0, 0, 1).
Light background colors will produce a white drop shadow while dark background colors will produce a black drop shadow. Using a light background color, as you have, the system assumes that you are going to use a darker color for the text, thus a light drop shadow. But in your case, because you’re using a dark image you used a fairly light color text. And a light color text with a white drop shadow will look blurry, same if you have a darker color text with a dark drop shadow.
As for the text in the address bar, it looks fine because there is no drop shadow applied to it.
Below is a print screen of what your theme looks like on my computer.
