Main Content
iPox 3

iPox – Mozilla Firefox Theme

iPox 3

iPox is a Mozilla Firefox theme loosely based off the classic iPod and Apple GUI. Ok, that’s where it started, it has since evolved into a sleek theme of blues and whites.

iPox 3 Information

iPox 3 includes some completely re-designed elements, quite a few bug fixes and address some compatibility issues with Firefox 3.6. iPox fans will love the updated theme and if you haven’t tried it out before, it’s worth the install.

To get the iPox Aqua buttons, you’ll need to:

1. Install Stylish

2. Create a new style and use this code:
.toolbarbutton-1,
#back-forward-dropmarker {
list-style-image: url("chrome://browser/skin/custom/ToolbariAqua.png") !important;
}
#stylish-toolbar-button {
list-style-image: url("chrome://stylish/skin/s1-24.png") !important;
}
toolbar[iconsize="small"] #stylish-toolbar-button {
list-style-image: url("chrome://stylish/skin/s1-16.png") !important;
}

iPox 2 Information

iPox 2 has been completely re-coded for Firefox 3, however the same look and feel has been kept.

Note: At this time, most hacks from iPox 1 have not been worked into iPox 2.

iPox 1 Information

With iPox 1.0 it makes a huge step forward. I started from scratch throwing out all the previous iPox code in order to create the best possible version for Firefox 2.0. While working though the code, I found more areas to theme and areas that needed fixing up. iPox has come a long way from version 0.7x which was developed for Firefox 1.5. iPox 1.0 leaves Firefox 1.x behind and embraces Firefox 2.0 fully.

Not only is the theme more complete, it also comes with a few options. That’s right, I added some code for all those that have expressed dislikes to a few certain areas. Just grab Stylish and go to town.

1) Don’t like the blue bar? Turn it into a metal/gray bar by using this code:
@import url(“chrome://global/skin/extra/bookmarks-bar2.css”);

2) Need more color behind the buttons? Add a bright blue, Apple like, bar with this code:
@import url(“chrome://global/skin/extra/toolbar2.css”);

3) In love with the old status bar? Get it back with this code:
@import url(“chrome://global/skin/extra/statusbar2.css”);

4) Kill bookmark icons in the bookmarks bar with this code:
toolbarbutton.bookmark-item > .toolbarbutton-icon { display: none; }

5) Customize the bookmarks bar any way you want.

Change Personal Toolbar Background Color
#PersonalToolbar { background: #e5e5e5 !important; }

Change Personal Toolbar Background Image
#PersonalToolbar { background: url(“yourImage.png”) repeat-x !important; }

Change Personal Toolbar Text Color
.toolbarbutton-text { color: #464646 !important; }

See most the iPox hacks enabled. This screenshot is with them all enabled, you can choose to only do one if you wish.

6) If you have your bookmarks bar replaced with the del.icio.us bookmark bar, use this code for nice tags:
.yb-tag-item { color: #CCD4F5; list-style-image: url(chrome://global/skin/icons/tag.png) !important; }

7) Want the old Apple like throbber?

@import url(“chrome://global/skin/extra/old-throbber.css”);

I hope you enjoy iPox and please let me know what bugs come up. Also, if you use some of the hacks above to customize your install of iPox, feel free to drop a link to the image and show it off.

Version 3 Updates:
– Completely re-designed address bar utilizing CSS.
– Integrated iPox Aqua.
– Re-designed scrollbars.
– Brought back the Mac throbber.
– Fixed the full screen button.
– Fixed a number of other items.

Version 2.071508 Updates:
– First public release for Firefox 3 with a whole new code base.
– Toolbars are all blue now too.

Version 1.3 Updates:
– Fission Support (as good as I can get)
– AddBlock Plus Fixes (I think)
– Added New Tab Button on Tab Bar Extension Support
– Old Throbber Hack

Version 1.2 Updates:
– New Throbber
– Addon’s separator themed.
– Colored tabs working??
– ForcastFox/Statusbar Separators cleanup.
– Tiny Dot by Go Button gone.
– Linux crashes fixed (I hope)

Version 1.1 Updates:
– Fix to secure URL background.
– Bigger Big Buttons and more normal sized small buttons.
– Sage icon comes back. (thanks Jon Hicks)
– All in One Sidebar code. (not sure how well that works)

49 Responses

  1. Dodo says:

    Hey Thomas,

    looks really awesome! Can’t complain at all, but since I guess that you’re a perfectionist, check out the options-dialog in XP: http://stuff.pellkofer.de/ipox_options.png

    Kudos to you!

  2. Thomas says:

    Dodo that’d look better if you were using an XP look and feel and not Windows Classic. 😉 I did searched for that background color and haven’t find it yet.

  3. Dodo says:

    Thomas, thanks for the effort. Doesn’t really matter, don’t use the dialog much anyways — and like the classic look sooo much better 😉

  4. jfk says:

    Dude, thanks for the coolest theme above earth ! (no, I am not megalomaniac 😉 )

  5. Eric says:

    Mozilla ad-on page is down, is there a 2nd party source to the theme?

  6. Thomas says:

    Sorry Eric, there is no secondary download area as I prefer to keep official releases on Mozilla’s site. I doubt it can be down for long.

  7. how says:

    how and where do I add the options mentioned up above? I have Stylish, but I don’t know how exactly I’m supposed to implement the changes for the theme…

  8. Thomas says:

    how – To use the edits above, just open Stylish, click on write, then add the code. Here is a preview: http://beta.zooomr.com/photos/twistermc/372450

  9. RJ says:

    Very nice job Thomas. I really like the theme.

    The only comment I have at the moment, is the help-button. I liked the previous help-button more, this doesn’t seem to fit.

    Check my screen: http://img465.imageshack.us/img465/3850/ipoxhi2.jpg

  10. Thomas says:

    Wow, in my testing there wasn’t a help button at all. 🙂 That goes on the fix-it list. Thanks

  11. jrk says:

    i absolutely love the iPox is finally fixed up for firefox 2.0!

    my only qualm is the new background on the menus.. is there anyway to remove that (ie a hack like the ones described above) and have the old white background?

  12. Ed Turner says:

    Can’t seem to get the first code working or any other ‘change colour’ codes in fact. I realised they do not seem to come up as global codes, does that make any difference?

  13. how says:

    Ok, I should’ve been more specific; I can’t get the hacks beginning with “@import url” to work, stylish basically says they don’t work. I guess I’ll have to mess with them a bit. I did figure out how to change the thing that was bothering me, the blue bookmark bar. I do have a question though; How can I change the scrollbars to a different color? I rather have white bars than blue, but I’m not very educated when it comes to CSS, unfortunately. 🙁

  14. how says:

    argh, hate leaving all these posts…is there a way to turn the scrollover for the buttons in the bookmark and custom toolbars back on?

  15. Thomas says:

    jrk – You’ll need to add this code:

    menupopup > menu,
    popup > menu,
    menupopup > menuitem,
    popup > menuitem {
    max-width: 42em;
    background: none !important;
    }
    menupopup > menu[_moz-menuactive=”true”],
    menupopup > menuitem[_moz-menuactive=”true”],
    popup > menu[_moz-menuactive=”true”],
    popup > menuitem[_moz-menuactive=”true”] {
    background: url(“chrome://global/skin/menu/menu-hover2.png”) repeat left center !important;
    color: #fff !important;
    }

    Ed – Yes, they need to be global styles and do need to be enabled. Did you see my screen shot a few comments above you?

    How – Scrollbars are a much bigger issue to deal with as there are 8+ images to deal with and it’s not something I can just post here. As far as the bookmarks bar question. I’m not sure what you did so I’m not sure how to fix it.

    If you need specific Stylish help, look at the Stylish website and or forum.

  16. Thomas says:

    New: Install the hacks automatically: http://userstyles.org/user/show/1063

  17. LK says:

    Is it possible to change the text color of the main menus (file/edit/view/history/etc.)? From what I can tell the color’s based on your system’s default text color, but I was hoping it was possible to assign a specific text color to them.

  18. how says:

    Thomas, about the bookmark toolbar; usually when you scroll over a bookmark’s text, it would highlight, but it doesn’t do that in this extension, so I presumed that it was turned off. I was wondering if someone could write up a code that would turn the bookmark text highlight back on.

  19. how says:

    and about the scrollbar, no problem. Now that the blue bar behind the bookmarks is gone, they aren’t so bad.

  20. Unit says:

    Thanks Thomas Still a great theme

  21. jrk says:

    wow, thanks for that code, and the install link for stylish.. makes it real simple for someone like me who really doesn’t know anything about how to code the appearance of firefox……. yeah..

    is there any way to get back the old blue highlight colour in the menus as well, though? cos now that i’ve gotten rid of the stripes in the right-click menus, anything i hover over disappears (i guess the highlight got removed?)….

    i swear i’m not picky… i just love the blue of iPox!

  22. Thomas says:

    jrk – I thought the code I added with the stylish button (see Stylish page http://userstyles.org/user/show/1063 ) had all the correct code. Is that what you are using?

    how – I’m not sure why your bookmark highlights left. You overwrote the highlight code when you added some other code I’m guessing.

  23. how says:

    Not so Thomas, it was like that as soon as I installed Ipox, and before I modified it at all. I also turned off all my other Stylish stuff, and none of my other extensions affect it.

  24. jrk says:

    the only code i’ve added was the one you mentioned, the ‘Remove iPox’s Right Click Background’ code on the userstyles page.. it’s almost as if the highlight colour is white, and so whenever i hover over any menu item, it disappears. kinda sounds like how and i have the same thing going here, i believe? not sure though…

    here’s a screenshot of what i’m talking about: http://photos1.blogger.com/blogger/1061/924/1600/disappearinghilight.0.jpg

  25. how says:

    not quite, jrk. I’m talking about the toolbar scrollover effect. It just isn’t there anymore, so when I put my cursor over a toobar link or button, it doesn’t highlight, it stays the same.

  26. Chris says:

    Dittos on the menu background. It seems too busy and distracting to my eyes at least 😉

    Also, I don’t know if it was already mentioned but on the bottom right of the Tools | Options dialog box, the Help button is squished over towards the right. When I hover over it, it only half shows a button icon. The rest is buried under the Cancel button.

  27. how says:

    yeah, it’s been mentioned, if not here, then at the mozilla extensions page for Ipox. I also have that “problem.” Not really bothered by it, since it’s in a spot I don’t go to very frequently.

  28. Thomas says:

    jrk – I updated the Stylish code as it had fancy quote marks and that was throwing errors. Try again: http://userstyles.org/style/show/1299

    how – I think you just don’t see it or are expecting more. It’s now a light white (like 70% transparent) and might be easily lost on some monitors. I know it looks good on mine. 😉

  29. how says:

    no, it’s not my monitor. It’s not there at all. I even changed the color to black and also switched it back to the original blue background to see if it just didn’t show up on the white, but it’s just not there. 🙁

  30. Thomas says:

    Maybe a W2K issue. I’ll have to look into it. Thanks

  31. jrk says:

    yay! the blue highlight’s back! thanks!!

    but uh….. yeah, i found something else. hehe.. for sites with unauthenticated content, it highlights the location bar in red and has the little padlock with a line through it… only the padlock repeats for the entire location bar, so you can’t see the location bar at all..

    here’s my screenshot so you can see exactly what i mean: http://photos1.blogger.com/blogger/1061/924/1600/securedsite.jpg

  32. Thomas says:

    jrk – That’s a known issue that I missed. I’ll get that fixed up for the next release.

  33. Eric says:

    any chance of getting the bigger icons back?

  34. Thomas says:

    Eric – Hopefully.

  35. Huy says:

    Are the small icons on the navigation toolbar purposeful, or is this an error? I’d really like to get back the size of icons that were existent in the theme for Firefox 1.5.

  36. Thomas says:

    Huy – They were made to match the PC’s default sizes. I can’t believe how many people hate the PC sized icons. I’ll get them back when I get time.

  37. how says:

    can you make that optional, then? I don’t mind the icon size.

  38. Thomas says:

    Small and Large will be back to their prior iPox 1.0 sizes very soon. No more tiny.

  39. Dao says:

    Hi. I’m Dao Gottwald, the developer of the Aging Tabs extension (http://en.design-noir.de/mozilla/aging-tabs/).
    I noticed that my extension can’t change the color of the tabs when using iPox. I guess this is due to your use of !important, which shouldn’t be needed. See chrome://global/skin/tabbox.css lines 185 and 211. Would be great if you could fix this.
    Thanks in advance, Dao

  40. plitvicer says:

    Hi. I use SUSE Linux 10.0 and FF 2.0 and your very cool style.
    BUT: If I want to add a site to my favourites, my Firefox crashs down.
    The same problem with the download-dialogue.
    -> Therefore, I would say, that it doesn’t work with Linux!?

  41. Thomas says:

    Dao – Thanks for the comment. I’ll have to see what I can do. Thanks for the detailed instructions too as that helps a lot.

    plitvicer – Linux has always been a problem for me. I’m not sure how to support it.

  42. Diego says:

    This theme works fine for me! I’m using Firefox 2.0 on Mepis Linux 6.0 (Firefox 2.0 is a backport for Mepis).
    It has only little minor issues as when I move the mouse over the close tab button it deforms a bit the bar of the tab. But nothing really nasty. The rest works fine for me!

  43. Jonathan says:

    Have loved the theme for some time, but it does stop one of my favourite xetensions working – ‘colourful tabs’. When I change back to other themes, I get all the tabs in pretty colours, but ipox obviously is too dominant! Any way I can adjust the theme to get the coloured tabs back? Thanks for all the work…

  44. how says:

    it has already been mentioned.

    “Hi. I’m Dao Gottwald, the developer of the Aging Tabs extension (http://en.design-noir.de/mozilla/aging-tabs/).
    I noticed that my extension can’t change the color of the tabs when using iPox. I guess this is due to your use of !important, which shouldn’t be needed. See chrome://global/skin/tabbox.css lines 185 and 211. Would be great if you could fix this.”

    Thomas says he will look into it.

  45. Thomas says:

    Yes, colorful tabs is on my fix list. I never thought so many people would be so concerned.

  46. Jonathan says:

    It’s because we love all the pretty colours…

  47. Thomas says:

    Comments Closed on this page. Please add any comments to the current release blog post.

  1. 4/11/2007

    […] iPox 1.3.1 […]

  2. 3/11/2010

    […] As a bonus, iPox Aqua was rolled into iPox. No longer will there be two separate themes. If you want to change the navigation buttons to blue, you’ll need Stylish and a few lines of code. Full details on the iPox page. […]