Main Content

How to create a Firefox Theme

I’m starting a whole new set of theme tutorials. Check out the iPod Remix post for all the details.

This is a basic ‘how to’ tutorial for creating a Firefox theme. It’s not intended to be overly detailed as it’s not really that hard. In no time at all, you could get a basic theme created for Firefox.

***Important***
Before submitting a theme to Mozilla or making public, please contact the author in order to ask them if their elements are free of rights. Firefox is Open Source, Themes are often MPL/GPL but icons and pictures belong to their respective authors! Play nice people. 🙂

For this tutorial, our theme will be called joeBob and the instructions work for Firefox 1.x for sure.

  1. Find a theme that seems to be quite completed and works on Mac and PC. You’ll need a good starting point and I think it’s easier to edit other themes than start with the default ones as the PC theme doesn’t have Mac pieces and the Mac one doesn’t play will with a PC. Trust me, I found out the hard way.Get permission from the theme creator before you start playing with their theme. It’s just nice to know you have permission so that someone doesn’t accuse you of stealing their theme.
  2. Now that we have a starting spot, download the theme to your computer. To do this, right click and save link as in Firefox, or use a browser like Safari or IE that doesn’t know what to do with a .jar file except download it.
  3. Change the file name from theme.jar to joeBob.zip. Actually , a Firefox theme is just a bunch of compressed files. Nothing to fancy. Once you change it to .zip, un-zip it and you should now have a joeBob folder on your hard drive . If your software can un-jar files, you don’t have to rename it to a zip.
    folder
    When you open the joeBob folder, you’ll see some files and some folders. This is the real starting point.
    finder
  4. Open up install.rdf. This is the main theme information. You’ll need to add your own version number, theme name, description, creator and homepage information.Don’t Change the area that is inside the em:targetApplicaton as this is the coded needed for Firefox. If anything, you may need to modify the MinVersion and maxVersion numbers as they relate to versions of Firefox that this theme works with. However, lets not worry about that now.
    uuid
  5. You will need to get your own em:id, also known as your theme’s UUID. This is the theme’s identification. If it’s not changed, it’ll endup replacing someone elses theme on install. Getting a UUID is easy. Just go to http://www.famkruithof.net/uuid/uuidgen and it’ll create one for you when the page loads. Copy this into the install.rdf file.
  6. The next file to update is the contents.rdf file. Open it in a text editor and update it with your information. Example: urn:mozilla:skin:joeBob:browser. Basically, it tells Firefox where to find the files associated with your theme.
    contents
  7. Now all you have to do is start editing stuff. All images are either png or gif files. You can open them in Fireworks, Photoshop or your favorite graphics editor, design over them them, and save them back out as the same name. Most png files are png 32 as that creates perfect transparent edges.The main Firefox buttons are actually one big file that contains all the buttons, their rollover, pressed and disabled states too. Firefox then uses CSS to create the effects you see in the browser. Some are 24×24, some are 32×32. Just remember that they are all squares.
  8. All configuration files are actually CSS files. Open them in your favorite CSS editing app and go to town. There is some Mozilla specific code that starts with -moz but don’t be afraid of it. You can edit height, width, background colors, positions and all that jazz. Throw in more CSS code, get rid of code you don’t like.I skipped over all the xml files as I’m not sure what they do.
  9. When you are ready to test, go back out to the first level of your joeBob theme folder, the one that includes the install.rdf file and select all the files, in my case 9 files, and zip them all up. Then rename your zip to your joeBob.jar. If you have a compression utility that actually creates jar files, than that works do. Do not include the joeBob theme folder though as it’s not needed.
  10. Next, open up Firefox and drag your theme to the themes window to install. Restart and see how it goes.

That’s the basics. There are many pieces to edit and things to try out. Give it a whirl and I’d love to see what you come up with.

More details can be found at Mozilla’s site or by asking in Mozilla’s forums. I can try to answer questions if posted below too.

I’m starting a whole new set of theme tutorials. Check out the iPod Remix post for all the details.


216 Responses

  1. cubuss says:

    where is the contents.rdf file i cant find it on my pc in any firefox folder 🙁

  2. Thomas says:

    After you open (unzip) a theme file, it should be right inside the main folder. It should look like my first screenshot above. That is unless you are modifying the default theme, then you may have to create one.

  3. john says:

    thanks for the tutorial… i did as you describe with the Qute theme, i only want to change some of the icons in the toolbar… however they didnt change, its still the ones it originally was?

  4. Thomas says:

    john – did you chance the small and large version? You may have updated the small but are using the large. Check on that one. Also, what icon was it?

  5. Moodoo says:

    Hi Thomas! Great post! Thanks very much. I’m new to this but I’d like to give it a go. What surprised me is how many different icons there are in one theme (I downloaded BlackJapan). Is there any simple way how to test the less usual icons? With some of them I do not even know where they appear. Any advice or links to other tutorials are very much appreciated.
    Thanks a lot!

    Martin

  6. Thomas says:

    For testing purposes, use Stylish. That will allow you to put the code in at a browser level, hit apply and it’ll show you the outcome, usually right away.

  7. Onekopaka says:

    I would like a tutorial on how to make a theme from the ground up, but its pretty good tutorial. (Make iPox for Firefox 2!)

  8. Thomas says:

    iPox for Firefox 2 will be here before Christmas. 😉

  9. I’ve already typed all my stuff up so I’m just going to link you to the post at mozillazine forums. I’m not sure what coding this submissions box uses otherwise I would simply copy and paste.

    http://forums.mozillazine.org/viewtopic.php?p=2538946#2538946

  10. cloud1001 says:

    i cant figure it out heh ^^; all i want is an anime firefox skin if any 1 nos how to make them and would be soooo kind to make one for me can u email me at [email protected]

  11. Anton says:

    Hey dude, I’ve been trying to create my own theme. Starting with your theme “Ipox” as the basic one. However, I’m new to all of this, and as far as I know my themes correctly made. But when I try to use it, it thinks it’s the same theme as yours. I mean, I can’t use my own if I have your Ipox installed, because then it thinks it’s the same theme. And If I uninstall the original Ipox I can use my own, but nothings changed, vereything’s the same as in Ipox.

    (Sorry if my English isn’t the best, I’m swedish you know)

  12. Thomas says:

    Anton- Step 5 is where you need to go. Your theme needs it’s own unique UUID. That’s what separates one theme from another. Also, my iPox theme doesn’t play well with Firefox 2 so I’d suggest working off the Windows default theme.

  13. Anton says:

    Ok, thanks.
    However I think I’ve already done that several times, but whatever. Now there’s another problem, when I try to drag it into the “themes menu”(step 10) It asks me if I want to install it. Ofcourse I say yes, but then there’s a new popup saying “My_theme 0.70 could not be installed because it is not compatible with firefox”

    Well, I realize I’ve made a mistake again somewhere along the way but I can’t seem to locate it. And as I said before, my computer skills are not at tye very top. -_-

  14. Thomas says:

    Here is Mozilla’s detailed instructions on creating the install files. See if that helps.

  15. Anton says:

    Thanks for helping me!

    I have gotten further now and my theme actually gets installed. What I did wrong(I think) was that I changed the firefox UUID instead of my own themes. But, whatever. It’s quite embarrassing how things just tend to go wrong for me. So now when the theme was finally installed and I tried to use it, the theme I have is the same as the Firefox default theme. The theme’s window sais it’s using mine, but all the buttons and stuff is firefox default. Even though the theme I changed was Ipox. It’s realy conbfusing to me all of this. And one thing I’m not really aware of yet is if the theme’s supposed to be saved in some exact place. Since I have only got it on my hard drive. Well, I hope this is the last help I’ll ever need. By the way, you’re not supposed to mess around with the .css files are you, Or well, it’s not a necessary thing to do is it? Unless you want to change the colors and stuff. What I want right now is my theme to work first, and then I can go back and change some things.

  16. Thomas says:

    Anton, send the .jar file to me and I’ll see what I can figure out. twistermc/gmail/com

  17. Anton says:

    Thanks for all the help along the way, and you won’t even have to bother with my theme. I got it fixed! It’s actually working, even though some of my toolbar buttons are moving a bit when you click them I’m still fascinated. I have no Idea what finally made my theme work, but it does!

    I can’t possibly describe how helpful you’ve been. Thanks!

  18. Thomas says:

    Drop a link back here when you get it done as I’d like to see it. 🙂

  19. Jude says:

    Please specify on this tutorial that we are not allowed to use all themes. Before modifying and submitting a theme, we have to contact the author in order to ask him if his pictures are free of rights. Firefox is Open Source, Themes are often MPL/GPL but icons and pictures belong to their respective authors!

  20. Thomas says:

    Good point Jude. I guess I just assumed that people knew what respect was. 🙂

  21. Anton says:

    Hey!

    My theme’s working pretty great now, The pieces are becoming a whole theme. well, however there are still questions. I’ve never done programming, ever, And therefore I don’t know a single thing about the .css documents or what they do. So I’ve left them just as the original. But however I can’t find the picture that sets the Tools/Options background. (Dark blue in Ipox). So now my question is what I do in order to change that color. The theme I’m creating is sort of light green/Light blue.

    Well, I’m sorry for not asking you Thomas if I could use your theme Ipox. But I think I just supposed it was ok, since the whole guide is built on your theme and how to edit it. I hope it’s okay.

  22. Thomas says:

    I’m not exactly sure what background you are looking for. Open up a discussion over at Mozilla’s forums and there are a lot of great people who can help out. The CSS files control the look and feel of the browser beyond just the graphic elements. You might want to find a tutorial on CSS and then start poking around.

  23. privilege says:

    hey… i have found a theme for firefox 1.5 which looks like opera 7…. I try to make it compatible tou firefox 2 but i cannot…. Can anybody help with that or have any idea when i can find it completed??? I can send the theme by e-mail if u want…

  24. Thomas says:

    privilege – check out the Mozilla forms for help. Or go to the Add-On’s menu in Firefox, right click on the theme and go to the theme’s homepage. Maybe you can contact the author.

  25. Becka says:

    Thank you for the tutorial.
    I adore your Tinseltown Theme for Firefox.

  26. someone says:

    when i download a theme it is a RAR file…what did i do wrong

    when i went to your iPox theme page on firefox’s website where you can dowload themes…i right-clicked and said save link as… and when i went to my desktop it was a RAR file

  27. Adriorn says:

    I’ve been trying to update Aquatint and make it 2.0 compliant. Your tutorial is great and simple, but any ideas on how I might update Aquatint? It is my personal favorite theme, and 2nd is TwisterMC. Excellent, simple themes. Sad thing is, the author of Aquatint stopped working on it, so it’s gotta be one of us now. Any help would be greatly appreciated. Thanks.

  28. clint says:

    what program do i use to open the *.rdf files?

  29. Thomas says:

    someone – Did you download my theme? If so, it should be a jar file. If someone elses, it may be packaged as a rar which is like a zip. You just need to un-rar it.

    Adriorn – I’m not sure the inner workigns of Aquatint. I also started my themes over from scratch when updating to FF 2.0 as just updating them didn’t work well for me.

    clint – Any text editor should do. I use TextEdit on my Mac.

  30. someone says:

    ok i figured out the other thing but all i can make is ZIP files how do i change them to JAR files?

  31. Thomas says:

    You zip up all the files, not the containing folder, and rename it from .zip to .jar. I have to do this on my web server as on my desktop it’ll still think it’s a zip even after I rename it.

  32. someone says:

    ok i figured that out butnow when i go to test it it says”

    [IMG]http://img104.imageshack.us/img104/4612/helpsk1.png[/IMG]

  33. someone says:

    sorry bout that last post but here is the link to my screenshot: http://img104.imageshack.us/img104/4612/helpsk1.png

  34. Thomas says:

    The install file should be called install.rdf not install-Obj..rdf. If you have more questions, please email twistermc/gmail/com Thanks

  35. someone says:

    it’s not it is install.rdf here is a GIF image to show you what i did:

    http://img407.imageshack.us/img407/3982/untitledul7.gif

    before where it said install-Obj..rdf that part always changes when i try to install it…plz help and thanks for all your help!

  36. Thomas says:

    I’ve send you an email to continue this issue.

  37. HG says:

    Hi I would just like to say its a very good tutorial I will give it a go, when I get the chance and will be sure to email you if I have any questions/problems.

    HG 😀

  38. Brae says:

    Awesometastic tutorialness ! Wish I would have found your guide before trying other how-to’s.

  39. Ed says:

    I want to edit the pimzilla theme. I love the theme, but the scroll bars are buggy. Does anyone know of a good place to learn about editing the scroll bar section of the theme. I have looked in a few places and come up empty handed. I have created Search Plugins before, so even if you offer something fairly technical, I think I can tackle it. Thanks in advance.

  40. Thomas says:

    Scrollbar images are usually in the /global/scrollbars/ folder with a css file in the /global/ folder. However, different themes setup things differently. 🙂

  41. Ed says:

    I understand that, but its still a bit tricky.

  42. AceofClubs says:

    Hey I was wondering if u could create a tutorial on how to actually edit the images. Like change colors and the look of the theme. Ty in advanced.

  43. Thomas says:

    AceofClubs – For that, you’d need an application like Photoshop or Fireworks or some sort of graphics editor. Just open up the toolbar image, edit it, save it out as a PNG and re-package.

  44. chaz says:

    okay, so i followed your steps as close as possible and i jer’d my files dragged them into the theme section and it installed as an extension. why/how did that happen?

    also, this is an amazing tutorial. very very simple and easy to grasp. i got one straight from the mozilla page awhile back and it confused the hell out of me

    thanks much

  45. Martijn says:

    Please note the website in step 5 has moved to http://www.famkruithof.net/uuid/uuidgen.

  46. Thomas says:

    Thanks Martijn , the URL is updated.

  47. lorddonk says:

    Hey I am about to start following your tutorial here, (this is VERY helpful by the way.)

    In the beginning it says to make sure you have permission to use anyone’s theme as a base, so is it alright to use any of yours??

  48. Thomas says:

    lorddonk – it’s OK as long as you make it your own. Please don’t use my buttons and imagery and try to pass it off as your own. 🙂

  49. Bludjinni says:

    Hello,

    I’ve been trying to edit an existing theme for personal use only. These are the images I have changed:

    – The background image for the Downloads screen;
    – The throbber (the .GIF image when a tab is loading, I think it was called Throbber or something along these lines).

    Also, I must note that I did indeed change the UUIDthingy in the Install.rdf. I changed nothing besides for that in the RDF files.

    I did as you said, zipped the files back, changed the extension into .jar and dragged it into AddOns. However, when it’s done installing, the file disappears out of the AddOn Installation screen, and the Restart Firefox button remains grey, which is not what is supposed to happen after having installed a new theme – firefox should suggest to restart the browser.

    When I restart the browser manually, my theme does not appear in the AddOn list.

    What am I doing wrong?

    Thanks in advance.

  50. Thomas says:

    Bludjinni – Based on that explanation I think it could be that you changed the wrong UUID. There are two; one for the theme and one for Firefox. Check that.

  51. Brian says:

    When i try and open the install.rdf and content files they won’t open, my windows xp doesnt recognize them so i get stuck on step 5 by placing that code into the folder in which i can’t create because of its nonrecognition. I have the folder on my desktop of the all the files in it but the install.rdf and content.rdf wont open and when i change them to .xml it opens in the internet and .pdf won’t open…so is there anyway i can rename the 2 files so i can finish the setup on creating a theme? any help, thanks…very frustrating, Brian

  52. Thomas says:

    Brian – Rename them to .txt. I just open the files in a plain text editor and it works well so hopefully it will for you too.

  53. Josh says:

    I am using your theme iPox as the base theme for a theme I am making (for personal use.) Everything has been going pretty smoothly, but I am having trouble with the tabs. I want to change the tabs to those used by macfox. I have found most of the image files, but I can’t find the CSS that tells the theme which files to use for the tabs. Could you help me out?

  54. blah blah says:

    How do I make custom scrollbars for my theme like you did for iPox?

  55. Thomas says:

    Josh – The files should be inside /global/tabbox.css

    blah blah – I’m going to have to explain that in a separate post as that’s a bit more than I want to add in the comments. What I may suggest is downloading iPox and checking out /global/scrollbars.css and /global/xulscrollbars.css

  56. Thomas says:

    Question to all you Windows uers – what do you use to create .jar files for your theme?

  57. fujifox06 says:

    Hey Twister! I love the tutorial, extremely helpful! But I’ve ran into some confusion I believe. How exactly do I test out my theme? I’m kind of stuck in between steps 9 and 10. I don’t have a program to create .jar files, would it be easier if I did? I just rename the zipped files to .jar, but it doesn’t affect it I don’t think. I suppose it’s something obvious that I’m missing, but could you please point it out, or am I just a lost cost at this? 😛 Thanks much!

  58. Thomas says:

    fujifox06 – You are on a PC and I’m currently trying to figure how how PC users create .jar files. On a Mac, you just rename the extension but that doesn’t seem to work on Windows. If you have FTP access, upload the .zip to the server then rename it to .jar. I know that’ll work.

  59. fujifox06 says:

    Oh, I see…I don’t believe I have FTP access, any idea how I can get that? Certain program, website? But that’s too bad it doesn’t work like that on Windows…If I ever find a way to change files easily on Windows I’ll be sure to let you know. 😉 Thanks again for you help!

  60. fujifox06 says:

    Never mind, I guess I do have FTP access and have for some time now! 😀 I didn’t know that Ripway allows you change file extensions. It seems like it would work, and it starts to install and everything, but then a little box popups and says that “This file is not compatible with FireFox.”
    I’m starting to believe it’s a sign…xD

  61. Thomas says:

    Sounds like you modified the UUID that makes extensions work in Firefox. Email me (twistermc/gmail) your theme and I’ll fix that up. Or wait until next week and I should have a better tutorial up.

  62. blah blah says:

    Next week? Cool, I can’t wait for that tutorial.

    Keep them iPox themes coming! 🙂

  63. Thomas says:

    blah blah – I won’t get to scrollbars next week, but some time. 🙂

  64. Thomas says:

    Everyone! Check out the iPox Remix theming project I’m starting up.

  65. Steven Moncivais says:

    Wow!
    This is cool!
    I’ve tried my hand in this.
    I’m already getting the idea that is gonna a good size eater of my time. 😀
    One thing I may have to do a little differently is change the preview image.
    (Read: I’ll need to make one from scratch. D: )

  66. alex says:

    im not sure what u mean when u say To do this, right click and save link as in Firefox, or use a browser like Safari or IE that doesn’t know what to do with a .jar file except download it.

  67. Thomas says:

    Alex, if you want to actually download a Firefox theme from Mozilla’s Addon site, you must right click on the install link and save it. Simply clicking on the link will make it install, not download.

  68. Joseph says:

    Does this work for making a 1.5 compatible theme compatible for 2.0? My favorite FF1.5 theme is not being updated and i am sure that can play around with it and make it work in 2.0. Thanks!!

  69. Thomas says:

    Joseph – There are lots of differences between Firefox 1.5 and 2.0. Digging though the files and troubleshooting is the best you can do. My tutorials are just for one specific version of Firefox, not for a theme that works in all.

  70. Chris says:

    can someone help me please, i made the theme but don’t understand how to make it in jar, i can send me the files (map) and my email is: [email protected]

    thanx

  71. Thomas says:

    Chris – See this post. Hopefully it’ll help.

  72. Justin says:

    Great tutorial! I’ve just been having a few problems with actually installing my theme. I noticed someone else was having the same problem as I, more specifically Bludjinni. You told Bludjinni to check if he had replaced Firefox’s UUID instead of the template theme’s UUID. I have the right UUID in the right place, but I still have the same problem!

    Also- I noticed that in an earlier post you asked what program Windows users use the JAR their files. I use WinAce and 7-zip.

  73. Piesto says:

    Thank you very much for this tutorial. It’s a nice tuto

  74. Thomas says:

    Justin – Send me your file and I’ll see if I can find the issue. twistermc/gmail Thanks.

  75. Chip says:

    Thanks for the tutorial! I’ve got a couple questions though. On the contents.rdf file, do we just replace all of the names of the old skin with the name of the new skin? Or the internal name of the new skin? And also on the contents.rdf file, is there anything else we have to change?

  76. Thomas says:

    Chip. Everything you need to change should be listed here. Thanks

  77. Chip says:

    Thanks! One more questions… Do you know of anything that is sort of like this: http://www.duggyd.co.uk/css/ipb1_2_0/ , except for it’s for firefox? (It tells you what the different codes in the CSS changes on the screen).

    Thanks!

    Also as for your question before about what Windows users use for making jar files, I use 7-Zip File Manager. 🙂

  78. Thomas says:

    Chip, are you looking for an item to tell you want parts of the actual browser are what? If so, check out the DOM inspector. It should be in the tools menu.

  79. Merlish says:

    Great guide! =)
    With a basic knowledge of CSS and a Illustrating-program, I can suddenly do what I never though possible.
    Quick question: If you edit everything; every picture, all colour in CSS and so on, will it be okay to keep the programming CSS, and other non-skin-related stuff without asking the author of the .jar-file you start off with?

  80. Thomas says:

    Merlish – Probably. Images and CSS are what make up most of a theme. The rest is just basic Mozilla code. Unless you are modifying a really custom theme like myFireFox where they moved all sorts of items around. 😉

  81. Braden says:

    I’m having a problem… I downloaded Qute 3.3.1, and I did everything you said… I drag the .jar into the themes section, install it, and “use it” but when I restart Firefox, the original Firefox theme is back on…. any suggestions?

  82. Thomas says:

    Braden – Does the theme show up in the themes window? It sounds like issues with the install files. Check out the theme identity post and see if that helps any.

  83. Braden says:

    Thanks for the tut… it turns out I did everything you said… but the install files were a bit different, so that thew me off. I tried it again with your theme starting off, and it worked perfectly. You might want to put a note on there somewhere that Qute won’t work with this tut. Thanks for the help!!!

  84. Thomas says:

    I think you just did make a note. 🙂 Ohh and I’d love to see everyones creations!!

  85. Scottie says:

    In the theme I downloaded the instal.rdf file is a netscape text file. So when i open it, it opens in netscape which is not editable. What do I do?

  86. Thomas says:

    Scottie – Open your text editor and then use File -> Open to open the install.rdf file.

  87. Jason says:

    hey can someone edit the redsift them v2 and make it blue for me?

    please email me…

    iv had a go but cant do it

    wb

  88. Yuki says:

    I did what you wrote, but I’m already stuck on the unzipping part. Like what you wrote I rename the file and unzip it to my Desktop. But once I went to that folder I see everything except the CONTENTS & INSTALL . rdf file.

    Where can I find those ??? Thank you.

  89. Robo says:

    I have gotten as far as step 6. I do not fully understand this step, and would like you to describe it for me… other than that, I believe I will have no problems. Thanks!

  90. Robo says:

    Terribly sorry, I now understand what you meant. Thanks!

  91. Robo says:

    ‘okay, so i followed your steps as close as possible and i jer’d my files dragged them into the theme section and it installed as an extension. why/how did that happen?

    also, this is an amazing tutorial. very very simple and easy to grasp. i got one straight from the mozilla page awhile back and it confused the hell out of me

    thanks much’ Quoted from Chaz
    I too am having the same difficulty. Anyone know how to correct this?

  92. madBOX20 says:

    well i made my first theme following your tut. i love it. if you want to check it out let me know ill email it to you. its an indianapolis colts firefox theme.

  93. Thomas says:

    Yuki – That depends on what theme you started with. Not all themes are packaged the same.

    Robo – Have you checked out the iPox Remix tutorials where it goes into a bit more detail. When it installs as an extension, it usually means a UUID or other ID is incorrect.

    MadBOX20 – I’d love to see it. twistermc GMAIL

  94. Thomas says:

    If your theme is installing as an extension, that’s a sign that either the install.rdf or contents.rdf has bad code in it. I’m not sure the exact line, but try removing anything that isn’t vital to find the source. Things like author, description and homepage. Something is causing an issue.

  95. Eric says:

    Looking all over for an Auburn tiger theme, and have had no luck. So, here I am trying to create my own. My issue is the pictures that i want to use as my menu buttons when i scale them down are very pixelated. I know they have to be small and all, but I’d like them to be a little cleaner. I also have no idea how to take the sheet of existing icons in the browser template I’m using and put mine in its place. It’s cool to be able to do this, but it takes time to learn it. Thanks for helping with this tutorial.

  96. madBOX20 says:

    ok. i made the colts theme and i have it all good and ready. but im having trouble submitting it. i don’t quite understand the way mozilla puts it. i can compress all the files in to a .zip file and then do i change it to a .jar? that is how firefox can read it. im really confused. can someone who has submitted one help?

  97. madBOX20 says:

    sorry. i posted prematurely. i found what i needed in your archives. thanks though

  98. waderiver says:

    Hi,
    I have just stated to build a theme using your instructions, unfortunately when i go to open the install.rdf file window says “cannot open this file”
    am i missing something?
    Cheers.

  99. madBOX20 says:

    sounds like you don’t have a HTML editing software. try “right clicking” on the file and choose MS word or something like that.

  100. madBOX20 says:

    well im in the sandbox. if you guys could, please DL my theme and rate me. thanks

    https://addons.mozilla.org/en-US/firefox/addon/6659

  101. Dennis says:

    How do i change the toolbar BG color?

  102. madBOX20 says:

    well, i could use some help. i want to redo my colts theme so its compatible for firefox 3. i think the best way would be to use the firefox default theme and work from there. but i can’t find how to DL it to my computer. any suggestions?

  103. Thomas says:

    madBOX20, I took the default Proto theme for Mac and customized it. It’s the best starter theme I came across.

  104. Murph says:

    Can you create a Iowa Hawkeyes Firefox theme?

  105. Thomas says:

    I’ll keep an Iowa Hawkeyes theme in mind for the future. But what about the Cyclones? 😉

  106. Greg Smith says:

    My hats off ta ya man. I’m sure I COULD do this, but I don’t have the patience for a few hours of manually editing several dozen small image files. You have my respect.

  107. Slayer324 says:

    can someone give me a css file with the default firefox 3 theme in black please? all i need is the css, i have icons and everything

  108. Thomas says:

    Slayer324, there is not 1 CSS file but many. And I don’t have any tutorial for Firefox 3 yet.

  109. paul says:

    i thought i did everything right,
    but somehow my theme ends up being
    installed as an extension.
    any ideas?

  110. NiteOwl says:

    Fantastic basic tutorial. Thank You.
    Worked first time. I used FF Classic as my base. Looked at Aluminium Kai 2 for Ideas. Change my backgrounds in the download, addons, clear private data and statusbar. My problem for now is the background for the top of firefox. The toolbars. The unused free space, i will do the buttons and button bacgrounds later. Can you help?

  111. NiteOwl says:

    Paul, when you drag the JAR file to the add-ons dialog, make sure the “Themes” tab is focused and not the “Extensions” tab.

  112. Thomas says:

    It has something to do with the install files. Did you read: https://www.twistermc.com/blog/2007/04/30/theme-identity

  113. Thomas says:

    NiteOwl, have you red this for menu bar customization? https://www.twistermc.com/blog/2007/10/15/general-theme-answers

  114. NiteOwl says:

    Found my answer in you remix files. Fantastic. Thank you for your hard work.

  115. paul says:

    thanks
    4
    in the install.rdf
    makes it recognize it as a theme.
    perhaps a firefox3 thing
    but now i found out that the changes i made in Toolbar.png and Toolbar-rtl.png are nowhere to be seen.
    i guess i will leave it to someone else to make a good old firefox2theme for 3.
    it’s bound to happen.

  116. paul says:

    em:type 4, that is

  117. Fischfix says:

    hi,
    thanks for the tutorial. how do i create a .jar file.
    whenever i do as you’ve said and rename a compressed zip (made with winrar or 7z) firefox is not able to import the file.

    even when i did not change anything in the skin and just decompress it, and recompress it, firefox is not able to do anything with it afterwards.

    is there a tool to create proper jar files?

  118. clairdelune371 says:

    Hi,

    I’m a Windows XP user, and I tried renaming the rar file to jar, I also tried doing it on a ftp server. In both cases, when I try to install the jar file, Firefox gives this error: “Not a valid install package – 207”. The folder structure is exactly the same as the original, I only edited the rdf files and a few css files. And idea about what could be wrong?

  119. Thomas says:

    The issue may be the rar file. Zip up the file instead and see if that works.

  120. clairdelune371 says:

    Yup, making a zip instead of rar solved it! Thanks =)

  121. Fischfix says:

    it did not work for me

  122. madBOX20 says:

    are you working on a FF3 tut? im asking because im trying to make one and ive run into a few problems. one being the scroll bars. i haven’t even touched them yet and for some reason they are gone. i have just got the toolbar done and wanted to see how it looked and when i installed the theme the scroll bars on both the top and bottom are gone. also i have OS X and for some reason it gives me a “recent pages” down arrow after the back and forward images and im not sure why. it was in the theme i’m using as a template. i can show you a screenshot if you want but its a major pain. ive searched around and can’t find a solution but i have seen that its not just me with the problem. any advise would be helpful. thanks

  123. peterk731 says:

    so, i made the same mistake as Anton. Wrong UUID. Problem solved. Very nice article. Thanks a bunch!

  124. peterk731 says:

    any info on changing the background of the tab bar?

  125. peterk731 says:

    also, i cant figure out how to change the background of the bookmarks tab and any other personal tabs that are made. Do you have coding for that?

  126. Alex says:

    thanks! really helpful! only just had a quick look at one of the themes contents in a zip folder and wondered what some of the images are actually for!? if there was a list for each file name and what the logo is for would be amazing! great tut though! thanks alot! cant wait to make one!

    just found this:

    http://developer.mozilla.org/en/docs/Creating_a_Skin_for_Firefox:Getting_Started

    official on how to make them from firefox.

    thanks again! 🙂

    Alex!

  127. Tim says:

    Hi Twister. I’m having an issue getting the .jar file to be renamed so I can unarchive it. I downloaded squiggles_kids-2 and tried renaming a copy of the classic file, but neither worked. And neither has the .jar extension so I can see it. It just says it is an executable jar file in the description. I’m working in Firefox 3.0. Thanks in advance for the assistance. 🙂

  128. phurtive says:

    Great tutorial. Very helpful. I recently made a post on my website for beginners, but your tutorial deals with a lot more than mine does. Mine is for very very beginner skinners. http://www.phurtive.com/2008/07/edit-default-firefox-3-classic-theme.html

  129. Vince says:

    I did al of it, but if I want to install it, he says that it isn’t a secure version.

  130. Tim says:

    OK, I got the .jar file to rename and got it opened, but I can’t find an RDF file? Is that a Mac-only tag or is it hidden somewhere.

  131. Zach says:

    I did everything you said, but when I drag and drop the theme.jar file into my themes window I get an error saying “Not a valid install package
    -207”. I tried making it a zip than renaming it as a jar instead of making it a rar and renaming it as a jar but that didn’t work either.

  132. DanG says:

    Heya, i scouted around for some tutorials on themes and read that if you dont plan on uploading you dont need to edit the contents file or the install file, anyway i tried this just editing the icons in toolbar.png and toolbar_small.png. All i did was change the pictures taking care not to go over the allowed squares. Anyway when i drag the .jar file into the themes section it goes to install tab but doesnt install, its blank. Do i need to modify the install.rdf and contents? or what could i be doing wrong

  133. DanG says:

    heya me agen, i fixed the problem with the install nd contents file and it installs great, only problem is now the modified icons wont show, it goes back to the classic buttons >.<

  134. Collin says:

    I have the same problem as DanG, however, I DID change the Contents.rdf and the Install.rdf.

  135. Thomas says:

    At this point, this tutorial was for Firefox 2 and I’m not exactly sure the issues that hare happening with everyone’s theme.

    There is a lot more information over here: https://www.twistermc.com/blog/ipox-remix

    And I hope to resurrect this tutorial someday for Firefox 3.

  136. Quick Tutes says:

    Creating Firefox theme is not a bad option and Thanks for this update.Please post more information regarding installing this theme.

  137. madBOX20 says:

    i have a quick question. the contents and install files are saved as a .rdf and when i try to open it wants to open in firefox. i go to “open with” and the only option i get is microsoft word. which is all good but when i go to save it it says it the file has formatting or password protection that will be lost if i save it. i save it anyway and apparently it was important because the theme goes to the default theme. any suggestions about editing the files and not losing the “formatting” or “passwords”

  138. Thomas says:

    maxBOX20 – Just open Notepade and then go File -> Open and select the rdf file. That might work.

  139. madBOX20 says:

    well, im on a mac and don’t have notepad. but i used textedit and that didn’t seem to work. still went to default FF theme.

  140. Thomas says:

    Sorry about the Windows instructions. After you open TextExit, drag and drop the rdf file onto the TextEdit icon in the dock. It should then open in TextEdit.

  141. madBOX20 says:

    i got it to open in textedit but when i saved it, it seemed to do the same thing. because it cause the theme to go to the FF default theme

  142. fred says:

    hello mr!
    speaking of asking permission before you fiddle, can i fiddle with miint? i’d be able to make a really cool halloween theme…

  143. Thomas says:

    madBOX20 – I guess I’m unsure the issue. If you can get it to open and you can edit and save it, what’s the issue? It’ll always default to a Firefox file as that’s what your systems settings are.

    fred – Go ahead. Just make sure get change the UUID.

  144. madBOX20 says:

    im not sure whats going on either. ive created a firefox 2 theme without a problem. but im trying to do a firefox 3 theme and im running into problems. here is the steps im following.

    1. open install.rdf (either with MS word or textedit)
    2. edit the file to suit my theme
    3. save the file
    4. get an error saying if i save the file i may lose important information.
    5. save it anyway
    6. zip the files just to test it.
    7. theme opens but instead of the images and settings for the theme i have, the default firefox theme shows.

    some how i lose information when i save the .rdf files that causes firefox not to recognize the file and switch to default.

  145. Thomas says:

    Download TextWrangler for the Mac. It can open and edit most any text file.

  146. madBOX20 says:

    well i finished the colts theme for firefox 3. i want to thank you twister for your tut. and other help. if anyone who reads this could, please DL my theme by clicking my name and write me a review. i would appreciate it. thanks

  147. Curiousity says:

    When I pile ‘em up in a name.rar, change the name to name.jar; and drag it to the themes menu, it asks me to install. Obviously, I click install, but there’s where it goes wrong: “Firefox couldn’t install the file on
    file:///D:/Mijn%20Documenten/Firefox%20Monor%27s%20Themes//name.jar
    because: not a valid installationpacket.”

    I checked the install.rdf and the content.rdf to make sure there wasn’t a problem there (but I might’ve overseen it still…).
    Is there a specific place my .jar should be before I can install the file to Firefox?

    Oh, and it’s not called Name; I just don’t want to give away the name yet 😛

    (My apologies for the double post, I not only forgot the underscore in my e-mail, but also forgot my password… I made a new one.)

  148. Thomas says:

    @ Curiousity send me your file twistermc gmail

  149. Thomas says:

    For files and tutorials that will work with Firefox three. Check out iPox Remix!

  150. Tyler says:

    After you extract the files from the original location (*name.zip) and it you modify the install.rdf and content.rdf just copy paste those 9 files into the original path (*name.zip), instead of trying to compress the new folder. It will not let you because both of those file names would be the same then. After you paste them in, then switch *name.zip to *name.jar, and the 9 files inside will automatically be zipped up.
    Tschmo

  151. Curiousity says:

    Ah, crud…
    I deleted the file I extracted them from.
    I -knew- it wasn’t a good idea, but I figured I wouldn’t need it anymore >.>

  152. wolfflow says:

    Thanks, very simple to follow tutorial. 😉

  153. jarrad says:

    heya i have been trying to get grapple yummy to work with firefox 3 on a win system and it does but i have a few minor problems, is there any chance someone with experience in themes could tell me where to find these issues and fix them ? basically main one is right clicking, the tab opens and has rollover effect but there is no background, where is the .css that relates to that ? i imagine it would be the same as the menu bar, drop list has no background either. ill start with that and see if anyone can help, cheers

  154. Devon says:

    I cant even open the .RDF?? what do i use??

  155. Thomas says:

    Notepad should do it.

  156. cristian says:

    wow!! great tutorial thx so much

  157. Asker says:

    I have made a good theme for Firefox, but I have some problem with compatibility. I cannot finish it. Could you be please help me to finish it ?

    • Thomas says:

      Unfortunately I do not have time to help out. I’d suggest going to Mozilla’s forums and seeing what the users can help out with.

  158. n00b112 says:

    Hi, I used your midnightfox theam to test/tryout making a thea but it won’t install. do you know why not?

  159. Jade says:

    Hiya! I will be trying to do this soon, using this page as well as a bunch of other ones.

    But I’d like to say you are such a nice guy!! :] You made this topic years ago and are still answering peoples’ questions. That’s so great, kudos to you. 😀

  160. bee4 says:

    Hello all, this is my first time trying to create a theme. with at being said, what progam do you need to open the install.rdf file

  161. Yasuta says:

    i’m having trouble converting it back to .jar from .zip, any advice?

  162. aj00200 says:

    Right-Click it and rename it.
    You may need to set your computer NOT to hide file extensions.

    AJ00200

  163. Messy says:

    I want to change the color of the status bar, so how can I do that?

  164. bnd says:

    I know a little CSS, how do I tell what the names of selectors in the interface are by their location?

    Is there an add on like web-developer which will highlight the different selectors when you hover over them and list the relevant stylesheet scripts?

    Colorzilla works somewhat like this in that it will highlight and list the particular selector on the statusbar.

    It would make it much easier to understand if I could visually see what the scripts were doing.

  165. powerpointpro says:

    I’m using Guest and I can’t change it into a .zip. I can’t even download and Install 7zip.

    Help!

  166. Marco says:

    This…is impossible if you don’t know how to use photoshop….

  167. Erica says:

    Hi, ive been making my own firefox themes for quite some time, but all the sudden now, after i modify and repackage them and try to drag them into the add ons window, it gives me the error message:

    Firefox could not install the file at

    file:///C:/Documents%20and%20Settings/Owner/Desktop/Themes/2.jar

    because: Not a valid install package
    -207

    Any help would be greatly appriciated. Thanks!

  168. hypermedium says:

    Hi; okay, I downloaded the FF-addon “Stylish” to edit the theme, but it seems that Stylish can only edit website CSS. How do I edit a theme with Stylish, please? °_°

  169. Ben says:

    (URGENT PLEASE) How exactly do i edit the appearance of the theme? Also do you know of any websites that have NON copyrighted themes? Thanks! 😀 😀

  170. David McReynolds says:

    Has anyone tried this on Linux and FF 3.5+. I did and it rendered FF unusable. It sort of turned FF into a wire frame with all the boxes transparent. That was just the ipox remix straight up.

  171. Abby says:

    Ugggh I can’t even get past the first step. You said to download the theme to my computer. Does this mean to just click on that button that says “Download This theme”?

  172. Dink says:

    I was wanting to edit a firefox theme, but can’t get it to work. I was wanting to use the Gradient iCool theme but have buttons and tabs from the Gradient iBlu theme. Can someone please help!

  173. Matthew says:

    Whatever theme I upload, all it comes up with is ‘random code’, I think that is because it now automaticly opens ‘.jar’ files with notepad. Do you know how to change this so that there is no default? Also, does anyone know any sites where it tells you how to write add-ons from scratch in child’s speak? Thank you.

  174. Aryan says:

    i can’t type or add anything into the install.rdf file?! help!

  175. Kay says:

    Hi! Great tutorial. Everything worked for me so far but there’s one thing I don’t understand:
    The CSS selectors in the .css files I’m modifying have pretty intuitive names and I can guess what I’m going to modify, but there are so many of them that I just cannot tell what each and every one of the selectors do.
    My question is where do I find Firefox’ HTML or whatever markup language it uses that the CSS applies to?
    I’ve seen some talk about the DOM inspector but does that work on the Firefox interface?
    Thank you very much!

  176. aj says:

    I’ve tried and tried to create a theme but am not having any luck. Is there a way to suggest theme ideas to someone who can create them?

  177. nikolakiss says:

    Thnx very much for your notes.

  178. randomguy says:

    I’m having a problem with installing my theme. I try to install it but I get this:

    “Firefox could not install the file at

    file:///C:/Documents%20and%20Settings/Student/My%20Documents/Moz%20Stuff/StrataYellow.jar

    because: Install script not found
    -204”

    I need HELP!

  179. randomguy says:

    it’s ok I got it now i just can’t make an updater

  180. randomguy says:

    I’m having a problem again…

    It’ll install all right but when I restart the classic buttons appear.
    Can you help?

  181. Dennis says:

    I am really surprised people are still making themes with Persona’s becoming so popular

  182. Thomas Calle says:

    no matter what i try, i cannot seem to save, or even see, the .jar file… I’ve tried save link as, save file, and every other option i can think of…
    any idea what i a missing?
    thanks

  183. Jamal Stephens says:

    After using Internet Explorer for so long, I was not interested in switching browsers. But when I finally bit the bullet, I was so pleased to start using Firefox. I love all the plugins, and the opportunity to create a theme. Customizing my web surfing experience is a nice feature.

    • randomguy says:

      wait till you try firefox 4! It’s da bomb! Hint: in firefox 4: to get the firefox button (minefield) right click (control click in osx) in the open tab space and uncheck “Menu Bar”. Now the menus are all scrunched up into a space saving firefox button! Enjoy!

  184. randomguy says:

    can you update this for firefox 4 please???

  185. Tomas Bunkle says:

    This is a great tutorial. I’ve seen a great guide for designing additional browser themes on Speckyboy: http://speckyboy.com/2011/06/07/creating-and-designing-custom-browser-themes-%E2%80%93-how-to/. The author was http://brandthunder.com, which seems to have a grip on creating these things for major companies.

  186. SilentAero says:

    It’s ok i got it now. I’m making a series of themes called fx (firefox).

    SilentAero (was randomguy)

  187. Mykel McFalls says:

    Does the same apply for say making a thunderbird theme? thunderbird themes suck balls.

  188. HelloMyNameIs says:

    i cant find the contents.rdf file wher is it

  189. Seth Sevenyoln says:

    How do you open a .rdf file?

  190. Er. Feitosa says:

    Yeah, thats great.. Great tutorial!! I wannna create a theme by my soccer team..

    • Thomas says:

      You can use an extension to override some of the theme’s CSS, but it’s not that easy. Editing the theme files while the theme is running won’t affect the running theme.

  191. Mitch Menghi says:

    Hello Thomas, sorry im a late commer but i wanted to know is it possible to edit the theme once its been installed via the theme directly i cannot see any css files, i can just see the jar file ? does this mean that firefox loads the jar each time its started and opened ? If that is the case dont you think there should be some sort of temp files located somewhere of the theme files for live editing, i want to be able to make changes and see the updates live if possible ???

  1. 9/22/2006

    […] Crea tu propio theme para Firefox con este manual, con él podrás personalizar el navegador de moda, y hacerlo más a tu gusto. […]

  2. 5/15/2007

    […] Mal auf die Schnelle gepostet: How to create a Firefox Theme

  3. 7/16/2007

    […] [link] to full article at twistermc.com […]

  4. 10/24/2007

    […] How to create a Firefox Theme Blog on a Stick Creating a Skin for Firefox/Getting Started – MDC __________________ X3F Premade Sigs & Avatars […]

  5. 11/12/2007

    […] Bonus Link: How to create a Firefox Theme?. […]

  6. 1/11/2008

    […] Re: Iowa State Firefox Theme? Found a blog which has a few pointers to get started. If we wanted to make something that actually got hosted by Mozilla, though, we’d likely need permission from ISU to use their colors and trademarks. How to create a Firefox Theme | Blog on a Stick […]

  7. 3/9/2008

    […] theme, the history and autocomplete box were unreadable. Nevermind though, after reading an easy tutorial on editing themes, I was able to fix these problems myself. I’m posting it here just in case […]

  8. 12/16/2008

    […] Originally Posted by SirJW 3rd on the Firefox Kings theme…Please. If anyone can direct me to a step by step site, I’d give it a try. This will give you a good start? How to create a Firefox Theme | Blog on a Stick […]

Leave a Reply