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 32x32px and small are 24x24px.
Each button also has five states. From top to bottom they are:
Normal, Pressed, Disabled, Hover, Active.
From left to right, the buttons are:
Back, Forward, Stop, Reload, Home, Downloads, History, Bookmarks, Print, New Tab, New Window, Cut, Copy, Paste, Email (if available).
What you’ll want to do is re-work each button as you wish. Keeping in mind that large buttons can’t be bigger than 32px tall or wide and small can’t be more than 24px tall or wide.
In the image below, I’ve outlined each button’s area with a green line to help you see each button. The checkered background represents a transparent background in Fireworks.
You can find the toolbar images inside iPox Remix Assets -> Browser -> Toolbar.png and Toolbar-small.png
When you are done creating the buttons in your graphics program, you can save them out as GIF, JPG or PNG format. I suggest PNG because it’s the best quality. I always have transparent backgrounds so I save out the images as PNG 32.
For easy updating, I’d suggest keeping the PNG format and exact name. If you don’t, you’ll need to search the /browser/browser.css file and update the name of the images to correspond with yours.
Now re-package and install your theme and you should have custom toolbar buttons.
Also, if you are digging around, you may see Toolbar-rtl-small.png and Toolbar-rtl.png. The rtl has something to do with where the icons are placed on the toolbar in regards to the URL bar. Or so I think. Honestly, I just make the rtl files the same as the non-rtl versions.
Ohh and I did notice that in the iPox Remix assets, there is a Toolbar1.png file. You can toss that out as it’s un-necessary. 🙂
Go ahead and customize your toolbars now!
This is just one installment into the iPox Remix set of tutorials that will help you learn how to create your own Firefox theme. Visit the main iPox Remix page for more details.
This was exactly the info what I was looking for, thanks!
The RTL ones are for languages that write right-to-left – i.e. the past is to the right and the future is to the left, so in general arrows pointing left or right should be flipped.
Should I create a separate .gif file if I want to make the buttons hover animated or should I just change the original file and where is and what does the buttons hover code look like, I can’t find it. My logic behind this is that thats what the throbber has, a separate .gif for animation.
Mark – Yes you can make a hover for almost any element. If you want to make the main buttons animated on hover, then you’ll have to modify the code in /browser/browser.css to point to the individual graphics.
umm hey i followed your tut (which is great btw 😀 its really helpful) but when i go to re-package the .jar file the modified icons dont show up, for some reason it goes back to the classic buttons >.<, are there ne ideas where i went wrong?
i have the same problem as DanG…any idea’s?
Same problem here – maybe a rookie mistake? can you remember how you fixed it for the following guys?
best website tut. ive ever seen dude! I’ll forward it to all my friends weve been discussing it for ages! you may even help out your itunes addiction!!
Send me the jar file and I can look into it. twistermc/gmail
Not without seeing the files. You can send them to twistermc/gmail
i wish you’d do this for changing the firefox color, like
going from the default skin to a dark skin.
keep it up 🙂
When you say, “When you are done creating the buttons in your graphics program, you can save them out as GIF, JPG or PNG format. I suggest PNG because it’s the best quality. I always have transparent backgrounds so I save out the images as PNG 32.”
Where are these being saved to? Do I place them over the original pictures in the toolbar.png file? If not, where do I save them and with what name?
Hi Scott. Same name, same location.
Wow….Just….Wow….You should make us pay to read this stuff.
I don’t understand how to implement these instructions for developing a theme for Firefox 3. The template you have above doesn’t look like the toolbar image you have in the Assets folder…can you explain the size difference requirements in Firefox 3? Whenever you went through and updated the instructions for Firefox 3, it got really confusing- it seems that creating a new guide for Firefox 3 would have been more efficient. Thanks for all you do though, it has been a big help so far!
For Firefox 3 it’s pretty similar. All buttons are the same size with the exception of the big back and forward buttons. Row 1 is normal, row 2 is disabled row 3 is pressed. And yes, I do need to make updates to this post.
so what about the sizes of the buttons? can they still be 32×32? the ones you have seem to be 24×24 and I am not sure of the big back and forward buttons. I want mine to be 32×32 because the image isn’t so clear that I am shrinking down and the bigger the better in my case. Thanks.
They can be any size you want, you just may need to edit the CSS files to matched the new size.
I would like to make back and forward buttons that are not inside a rectangle-oval.
Can this theme be modified to use standalone back and forward buttons?
You can modify the button files to make them any way you want.
Nice TUT! but for some reason I just get the classic firefox icons not my icons :O!
Without being able to see your files, I’m un-sure. Usually an issue with naming. Possibly with the install files.
I want to make buttons 32×32 but how can i have that grids like in FireWorks.
I’m using Adobe PhotoShop CS3
To activate the guidelines, you have to first activate the rulers then what you do is click on the ruler, then hold, then drag it into position. I had to create all of them manually.
I hope you still check this, but I am having a problem with this.
I am making my own buttons but my question is, do I have to lay them out the same way that you layed yours out on the document? Like;
—Back— —Forward— etc etc etc etc
Also when I open the browser folder there is only toolbar.png I dont have toolbar small.png