Main Content

iPox Remix – General Theme Answers

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

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.


13 Responses

  1. Roberto says:

    Hi there!. 🙂

    First of all I want to say thank you very much for this great resource. It´s being a very useful tutorial for beginners like me.

    Ok, so my question is about version compatibilities. I mean, I´m in the process of making my first firefox theme and I would like to know if my skin could be still used by people when Mozilla upgrade the browser. I don´t know much about that kind of matters but for example I have a few awesome skins that aren´t compatible with the latest versions of the browser. Why this happens? which components are the essentials to make sure your theme will be compatible with future upgrades? I must keep untouched something?

    Thank you very much for your time.

    Cheers!

    Roberto.

  2. Thomas says:

    Roberto – Unfortunately Firefox 2 themes need upgrades to work with Firefox 3 and I’ve yet to find any good tutorials on how to do that.

  3. Jon says:

    Same problem as Roberto. Any way to use my own theme (I followed your excellent tutorial) on Firefox 3? When I attempt to transfer the .jar file into the add-ons window, I recieve a message about incompatability. Maybe by now you know of a good tutorial to do this?

    Thanks

  4. Roberto says:

    Hey Jon!

    It seems that they made a few changes from previous versions of Firefox. There are some folders that now contain different images/files due the new features (like the ones related when typing on the search bar).

    I´m porting my Firefox skin to 3.01 atm and it works so far. There are a couple of open sources skins already made for 3.01 that maybe could help you.

    I´m using a skin provided by Bodizzle . as the base for my port instead of the iPox remix. The tutorial from this page is completely functional (it worked perfectly for me to make the necessary changes on the .rdf files) but you have to make sure you respect the new folder and sub-folder structure inside the the new 3.01 themes. So it is not as easy as just overwriting the existing folders with the previous ones from your 2.something skin. That´s the most important, for the rest (CSS, icon substitution, etc..) you can use the tutorials provided by Thomas, they still working pretty good.

    Hope it helps. Good luck and cheers!

    Roberto.

  5. Thomas says:

    Jon – I haven’t successfully found a transition document. I’m starting from scratch and will provide a new base them once I get things worked out.

  6. Phoenixsong says:

    I tried downloading the newest version of iPox, changing the descriptions and UUID, repackaging, and dragging to the add-ons window. It gave me a message saying it wasn’t compatible with Firefox 3.0.2.

    Oh well. Looking forward to iPox Remix V3!

  7. Jason says:

    First, thanks so much for the excellent tutorial! It has definitely helped us get down the path of customizing Firefox.

    Second, a question: when I go fullscreen on iPoxRemix, I see a blue bar at the top of the screen. Is this intentional? If so, where was it defined? If not, any thoughts on how to fix it?

    Thanks!

  8. Thomas says:

    @jason – I don’t have that bar on my Mac, so it’s not intentional and I’m not sure where the code for it is.

  9. HarryOCEDY says:

    Hey, how do I change that loading sign that appears on the tabs?
    Would appreciate any help.

  10. c_lopez says:

    Hi, when I use your theme or the theme that I created based on yours, and I attempt to log in to a site, the site will give me the window for a list of previously entered login names, but the window is fully gray, and the list doesn’t appear. This occurs in both my custom theme and the original iPox theme.

    Help would be really appreciated.

  11. c_lopez says:

    This problem appears in the top section of the search bar, as well.

  12. Thomas says:

    If you continue to have this issue with the login boxes, email me. twistermc/gmail.

Leave a Reply