1 – Create a new folder called chrome.
2 – Move browser, communicator, global and mozapps into chrome.
3 – Compress the four folders in chrome into one .jar file. Name it: themenamefiles.jar (all lowercase).
4 – Back out of the chrome folder.
5 – Create a new plain text file with TextEdit or Notepad and copy in the following lines of code:

skin browser ThemeName2 jar:chrome/themenamefiles.jar!/browser/
skin communicator ThemeName2 jar:chrome/themenamefiles.jar!/communicator/
skin global ThemeName2 jar:chrome/themenamefiles.jar!/global/
skin mozapps ThemeName2 jar:chrome/themenamefiles.jar!/mozapps/

7 – Replace themename with the name of your theme in steps 3 & 5.
8 – Replace ThemeName2 with the theme name (em:name) that is listed  in install.rdf.
9 – Save the file as chrome.manifest in the same directory as the install.rdf file.
10 – Don’t forget to bump the Firefox version number in install.rdf to 3.6.*

This is what the new file structure should look like. The green files are new.

New File Structure

That’s it. Repackage your theme and it should work in Firefox 3.6!

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.

Re-Package Your Theme For Firefox 3.6 originally posted at http://www.twistermc.com

The bad news is that my themes are currently NOT compatiblewith Firefox 3.6. I tested it out the other day and nothing happened. No error, no theme, no luck.

The good news is I was able to find out why and fix it. I had to re-do the theme structure and install files but I did get it to work. If you are using iPox Remix as the basis of your theme, you’ll need to make the updates as well. I hope to have a how-to on that soon.

iPox has been submitted to Mozilla with 3.6 compatibly and some bug fixes. Hopefully that’ll be live sooner than later.

Tinseltown is next up on the list to fix. With Christmas basically here, fixing Tinseltown is a high priority.

Once you upgrade to Firefox 3.6 don’t be alarmed if my themes don’t work. I’m working on them as I get time and you’ll hopefully see them soon.

Firefox 3.6 Theme Compatibly originally posted at http://www.twistermc.com

So, if you’d like to take the files, update them, and release them, you are free to. If you’d like to take the files and create your own theme, you can do that as well.

Below are the files for each theme that work with Firefox 2. Combine those graphic elements with the code from the iPox Remix set of tutorials and you should have enough to get started.

Good luck and I hope someone takes the time to update iAqua and extero because they are really nice themes with a lot of fans and both deserve to get updated.

iAqua Theme Files

extero Theme Files

iAqua and extero Themes Need Your Help originally posted at http://www.twistermc.com

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!

If you have a theme that you created, based off my tutorials, please drop me a note to let me know.  Maybe I’ll showcase one of yours!

Showcase: Indianapolis Colts Firefox Theme originally posted at http://www.twistermc.com

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.

If you do use the iPox Remix tutorials to create your own Firefox theme, please let me know.  I’d love to showcase some of your creations!!

iPox Remix Theme Tutorials for Firefox 3 originally posted at http://www.twistermc.com

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.

On the other hand I’ve gotten a lot of comments recently about people who are so passionate about Miint that they’d switch back to Firefox 2 until it was ready for Firefox 3.  These kind of comments drive me.  They are not yelling at me but encouraging me to spend more time theming.  And the good news is, Miint for Firefox 3 has come along way in just two and a half hours.

What I’m trying to point out here is that when you don’t pay for something, you should not demand updates and start swearing at developers.  We do this because we want to, because we love to, not because we have to.

Give a little respect to those that create free addons, themes and free software in general.

Why I would quit theming today. originally posted at http://www.twistermc.com

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.

iPox Remix – General Theme Answers originally posted at http://www.twistermc.com

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.

Changing Fonts & Colors in Firefox Themes originally posted at http://www.twistermc.com

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.

Customize Firefox’s Scrollbar originally posted at http://www.twistermc.com

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.

Submitting Your Theme to Mozilla originally posted at http://www.twistermc.com

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

Customizing Toolbar Backgrounds originally posted at http://www.twistermc.com

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.

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.

Custom Firefox Toolbar Buttons originally posted at http://www.twistermc.com

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.

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

Graphics Editing for Firefox Themes originally posted at http://www.twistermc.com

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.

Creating Your Themes’ Identity & Install Files originally posted at http://www.twistermc.com

You can successfully download the iPox Remix theme files now.

iPox Remix Download Fixed originally posted at http://www.twistermc.com

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.

Update: The file structure is now different with Firefox 3.6. See the updated file structure here.

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.

Packaging Firefox Themes originally posted at http://www.twistermc.com

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.

iPox Remix – Modify or Create Your Own Theme originally posted at http://www.twistermc.com