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;
}

2. How do I change the menu font colour of File, Edit, View, History ect.
This can be accomplished with the following code. Remember to add in your own color.
#main-menubar menu {
color:red;
}

3. How do I learn CSS?
http://www.w3.org/Style/CSS/

4. How do I remove the down-arrows next to the forward and back buttons in the iPox theme?
This can be accomplished with the following code:
#back-button dropmarker,
#forward-button dropmarker {
display: none !important;
}

5. How do I change tabs designs, make them rounded or square, etc. As well as change their colors?
Open up the folders global and icons. In this folder you’ll find images that start with tab-. These images all relate to the appearance of the tabs. Edit them and you’ll be good to go. If you need to edit fonts, the tab items are in browser.css inside the global folder.

6. How do I make the font on the bookmark toolbar change color when I hover over it?
Open up the browser folder and then browser.css. In this file, create a new style called toolbarbutton.bookmark-item:hover or just edit the one that already exists. Here you can define the hover appearance of the text in the bookmarks toolbar.

7. How do I customize the scrollbar?
Check out the scrollbar customization tutorial.

8. How do I change the UUID?
Check out the creating your themes identity tutorial. It’ll cover how to change the UUID.

Have you created a theme from the iPox Remix tutorials? I’d love to know!

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.

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.

If you want, you can also add in a font, bold, underline or other CSS code to modify the text.

Of note, iPox includes code for the del.icio.us toolbar. So, you should also update .yb-tag-item:hover as this acts as the bookmark bar with the del.icio.us toolbar extension.

As of now, I’ve really only got a few questions from users. You can submit yours here.

Are others building themes off the iPox Remix tutorials? If so, let me know. I’d love to showcase some of your creations.

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.

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.

If you already have a Fireox theme and want to add custom scrollbars then it’s a bit tricker to do. I think all you’ll also to modify xulscrollbars.css but then again, I’m not positive. It’s been a while since I went though all the steps to work in custom scrollbars.

Customizing the scrollbars can really bring a theme together and is something that I don’t feel a lot of developers do. iPox Remix custom scrollbars should be Mac, PC and Linux friendly too.

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.

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).

Once uploaded, it goes into the Sandbox. This is where all themes live until an editor deems them worthy of being public. Tip, ask your friends to leave comments & reviews about your theme on the Addon’s site as that’ll get it public faster. It could take days, or even longer, for a theme to get out of the Sandbox, but you are free to send all your friends there to get it. A free account is necessary for Sandbox access.

And basically that’s it. Getting your theme onto the Mozilla Addon site isn’t hard and it’s something every theme should do in order to get the best exposure possible.

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.

1. Navigation Bar
2. Bookmarks Bar
3. Status Bar

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.

The bookmarks bar background is called bookmark_toolbar_background.png can be found in the /browser/graphics/ folder. The CSS files to go with it are inside /broswer/browser.css and element name is #PersonalToolbar. #ybToolbar also uses the same CSS code as #PersonalToolbar as #ybToolbar is the del.icio.us toolbar if users are using that as a replacement for the built in bookmarks bar.

The status bar background is called statusbar_background.png and located in the /global/menu/ folder. Again, just recreating a png file is all that is necessary. If you want to have a bit more control over the code, like font colors, you’ll need to open up /global/global.css and edit the menu element.

You are free to use images or just color behind toolbars. Keep in mind that toolbars can be different heights based on what is in them, so try and keep that in mind when creating background. You never know what your users will come up with.

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.

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.

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.

Hosted on Zooomr

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.

Myself, I use Macromedia Adobe Fireworks 8. 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.

• Photoshop (Regular or Elements)
• Fireworks
• Gimp (free)
• Illustrator
• Pixen (free)
• Inkscape (free)
• PaintShop Pro

I’m sure there are more choices too. You can check out MacUpdate.com, VersionTracker.com or Download.com to find others. It doesn’t matter what program that you use, but you should take the time and familiarize yourself with something.

What’s your graphic program of choice?

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.

To do this, we’ll need to modify two files inside the iPox Remix Pieces folder; install.rdf and contents.rdf. Each file should be able to be opened by a basic text editor like TextEdit (Mac) or WordPad (Windows)

Inside install.rdf we start by giving our theme it’s own UUID. This is like a fingerprint and it makes each theme unique. UUIDs are simple to get. Just visit http://www.famkruithof.net/uuid/uuidgen and they’ll give you one. Now, replace 11111111-1111-1111-1111-11111111111 with the UUID you acquired from the site above. Keep the numbers inside the {} brackets though.

Under the UUID is the theme’s version number. Feel free to set this to whatever you’d like. That one is for you to make up.

Now lets edit the Front End MetaData area. Give your them it’s name, description, creator, any contributor information and the theme’s homepage URL. You don’t need to modify them all right now, but you probably should before distributing it.

After that is the theme’s internal name. This is tells where Firefox where to put the theme elements when installing. I’d use only letters and numbers here and avoid any spaces or special characters. I usually just put the theme name here, minus any spaces. Ensure it’s unique though as calling it iPox may make it conflict with my iPox theme.

Save and close that file.

Next is the contents.rdf. It’s similar to the install file, but used after the theme is installed to control where things are.

The most important thing here is replace any iPoxRemix text with the theme’s internal name you set in install.rdf. This will tell Firefox where the pieces were put during the install process so it can find them and use them. There are 15 instances of iPoxRemix on this page that must be updated.

Once those are done, just update the author, author URL, and description with your information. Then save it.

That’s it, you’ve given your them it’s unique identity so that Firefox can tell the difference between your theme and someone else’s. Now go ahead and package it and try to install it. It should work!

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.

You can successfully download the iPox Remix theme files now.

Firefox themes are just zip files, renamed to jar. So, if you can create a zip file, and rename a file, you’ll be done in no time. You may have to make a few tweaks to how XP/Vista shows files though.

For starters, open the iPox Remix Assets folder. Inside you’ll see nine items. Select all items and zip them up. On a Mac, you can just right click and make an archive. On PC, you should be able to right click and send to compressed folder.

After that, rename the zip file to jar and you’re done. On a Mac, just change .zip to .jar and you’re good to go. On XP, this works too, but you have to go into the Control Panels and Folder Options first and uncheck ‘Hide extensions for known file types‘. Then you can successfully change .zip to .jar.

I usually name jar file to coordinate with the theme name and version (example: iPoxRemix0.1.jar) but you don’t have to do that. Any name will work.

To install your theme in Firefox, just open the browser and go to the addons window. Now drag your jar file to the addons window and it should try an install.

I say try because if you are trying to install iPox Remix, you’ll get an error as your theme doesn’t yet have a unique identity. That’s the next lesson that will be coming soon.

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.

iPox Remix is not only the files, it is going to also be a set of walkthroughs that help you better understand how to create a Firefox theme. They could be used to modify iPox as you wish, or it could be to use it as a base to create your own, all new, Firefox theme.

Judging from the HUGE success of my basic How to create a Firefox Theme post, there are a lot of folks out there that would love to create a theme. So I’m expanding upon that post to bring more in depth information and tutorials. The basic tutorial work well, but it lacks some detail and I’d like to expand upon it more.

I’m going to try and hit the main areas but it’ll take a while. If you have requests of what you’d like to learn, go ahead and let me know.

Overall, this is meant to be an easy exercise. I hope to keep things on a level that is easy to understand. And really, with the iPox Remix source, all you need to do is replace some graphics and you’ll be well on your way to creating your own version.

You can get all the details on the project and the source files necessary on the official iPox Remix page.