I know that my Firefox Theme tutorials get a lot of attention, but I don’t always get to see the outcome. One that I know of though is the Indianapolis Colts Firefox theme.
Theme designer, madBOX20, went though my tutorials and created this football theme. Sure, he started with one of my themes, but he designed all the buttons and made a well polished, great looking theme.
Myself, I’m not a Colts fan, but I do love to see what has been created buy you, the visitors!
iPox Remix has been updated for Firefox 3.
iPox Remix is a set of tutorials on creating your own Firefox theme. You are provided with a starter theme that contains all the necessary files and images to get you going. It also contains a set of tutorials to help you customize the files and create your own theme.
Unfortunately I don’t have a tutorial for converting themes from Firefox 2 to 3. I did it manually and re-coded everything. It’s what worked best for me.
I love to create Firefox themes, make addons and lots of freebees that others often enjoy. I do this on my free time and love to see people enjoy them. But some days, I’m ready to throw in the towel.
I’ve recently got a few comments from a visitor saying “hurry up and release the f**king theme” and “do your f**king job.”
Now I know that there is bound to be one jerk out of hundreds of users, but it’s comments like these that make me wonder why I continue to spend my time on themes. It’s not my job and, the more negative comments I get, the slower my progress will be. These things take hours to build and there is a lot to take into consideration.
iPox Remix has generated a lot of interest in themes, but there are many unanswered questions out there. Here are a few that have come across my email.
1. How do I use a different image/skin for the menu bar and the bar with the address box?
The main menu bar with File, Edit, View ect. can be themed with this code:
#toolbar-menubar {
background:red;
}
#main-menubar {
background:none;
}
The URL bar can be themed with this code:
#nav-bar{
background:red;
}
Today’s question comes off the iPox Remix request line:
How do I make the font on the bookmark toolbar change color when I hover over it?
Since Firefox runs mainly on CSS, this is a pretty easy edit. Just go into /browser/browser.css and look for the following chunk of code:
toolbarbutton.bookmark-item:hover,
toolbarbutton.bookmark-item:hover:active,
toolbarbutton.bookmark-item[open="true"] {
background: url(chrome://browser/skin/bookmarks/bookmark-highlight.png) !important;
color: #fff;
padding: 2px 4px;
}
Where you see color: #fff this states that it’s using white as the rollover (aka hover) color. Change that to another color and you’re good to go. Colors can be in HEX format or you can type in an actual color like red or blue.
One nice element that can really bring a Firefox theme together is a themed scrollbar. Lucky for you, this is already read to go in iPox Remix.
Simply open the global folder and inside you’ll find scrollbar.css and a scrollbars folder. The scrollbar folder contains all the pieces. I don’t believe the hover states are used but I put them in anyways. All pieces are pretty much self explanatory. Just open them up and edit the images. For the most part, scrollbar.css doesn’t need to be edited at all. However, if you feel you need to make modifications to the scrollbars, outside of the imagery, then this is where you’d do it.
Once you’ve gone though and created your own, original, Firefox theme via the iPox Remix tutorials, you’re next step is to submit it to the Mozilla Addon site for the world to enjoy.
Head on over to addons.mozilla.org and register for a free account. Once that’s done, you should see a ‘Developers Tools’ link in the left sidebar. Click on it and the left sidebar will change and you’ll see a link to ‘Submit Add-on’. This is where you upload your theme file (.jar).
There are three main toolbars in Firefox, each that can have a separate background.
The main toolbar background graphic is named toolbar-background.png and located in the /global/toolbar/ folder. If you just recreate a new png file, you won’t need to edit any of the CSS code. If you want to make some modifications to how it’s displayed, you can open /global/toolbar.css and edit the toolbar elements. For the most part here, you are just concerned with the toolbar style.
This edition of iPox Remix, we are talking about creating custom toolbar buttons. Good buttons can really make a theme so don’t just rush through them.
Update: In iPox Remix for Firefox 3, there is one image for all buttons and not really small and large versions of all buttons. However, the same basic rules apply.
Firefox’s toolbar buttons are really just two images. One for all the large and one for all the small. Each image is made up of 14 (or 15 if you include email) individual buttons. Large buttons in iPox Remix are set at 32×32px and small are 24×24px.
In order to create custom buttons and imagery for your Firefox theme, you’ll need some graphics skills and a program.
Myself, I use Macromedia Adobe Fireworks CS3. I really like how easy it is to use and how well it mixes vector and bitmap imagery. That’s my choice, but you can choose to use whatever you want.
Here are a few graphic application ideas.
Social Status