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.
- 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.
- 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.
- 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.
When you open the joeBob folder, you’ll see some files and some folders. This is the real starting point.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
where is the contents.rdf file i cant find it on my pc in any firefox folder 🙁
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.
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?
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?
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
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.
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!)
iPox for Firefox 2 will be here before Christmas. 😉
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
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]
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)
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.
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. -_-
Here is Mozilla’s detailed instructions on creating the install files. See if that helps.
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.
Anton, send the .jar file to me and I’ll see what I can figure out. twistermc/gmail/com
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!
Drop a link back here when you get it done as I’d like to see it. 🙂
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!
Good point Jude. I guess I just assumed that people knew what respect was. 🙂
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.
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.
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…
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.
Thank you for the tutorial.
I adore your Tinseltown Theme for Firefox.
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
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.
what program do i use to open the *.rdf files?
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.
ok i figured out the other thing but all i can make is ZIP files how do i change them to JAR files?
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.
ok i figured that out butnow when i go to test it it says”
[IMG]http://img104.imageshack.us/img104/4612/helpsk1.png[/IMG]
sorry bout that last post but here is the link to my screenshot: http://img104.imageshack.us/img104/4612/helpsk1.png
The install file should be called install.rdf not install-Obj..rdf. If you have more questions, please email twistermc/gmail/com Thanks
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!
I’ve send you an email to continue this issue.
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 😀
Awesometastic tutorialness ! Wish I would have found your guide before trying other how-to’s.
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.
Scrollbar images are usually in the /global/scrollbars/ folder with a css file in the /global/ folder. However, different themes setup things differently. 🙂
I understand that, but its still a bit tricky.
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.
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.
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
Please note the website in step 5 has moved to http://www.famkruithof.net/uuid/uuidgen.
Thanks Martijn , the URL is updated.
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??
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. 🙂
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.
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.
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
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.
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?
How do I make custom scrollbars for my theme like you did for iPox?
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
Question to all you Windows uers – what do you use to create .jar files for your theme?
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!
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.
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!
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
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.
Next week? Cool, I can’t wait for that tutorial.
Keep them iPox themes coming! 🙂
blah blah – I won’t get to scrollbars next week, but some time. 🙂
Everyone! Check out the iPox Remix theming project I’m starting up.
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: )
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.
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.
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!!
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.
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
Chris – See this post. Hopefully it’ll help.
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.
Thank you very much for this tutorial. It’s a nice tuto
Justin – Send me your file and I’ll see if I can find the issue. twistermc/gmail Thanks.
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?
Chip. Everything you need to change should be listed here. Thanks
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. 🙂
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.
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?
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. 😉
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?
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.
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!!!
I think you just did make a note. 🙂 Ohh and I’d love to see everyones creations!!
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?
Scottie – Open your text editor and then use File -> Open to open the install.rdf file.
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
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.
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!
Terribly sorry, I now understand what you meant. Thanks!
‘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?
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.
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
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.
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.
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?
sorry. i posted prematurely. i found what i needed in your archives. thanks though
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.
sounds like you don’t have a HTML editing software. try “right clicking” on the file and choose MS word or something like that.
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
How do i change the toolbar BG color?
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?
madBOX20, I took the default Proto theme for Mac and customized it. It’s the best starter theme I came across.
Can you create a Iowa Hawkeyes Firefox theme?
I’ll keep an Iowa Hawkeyes theme in mind for the future. But what about the Cyclones? 😉
I would really like an Iowa Hawkeyes theme too. Go Hawks Orangebowl Bound
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.
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
Slayer324, there is not 1 CSS file but many. And I don’t have any tutorial for Firefox 3 yet.
i thought i did everything right,
but somehow my theme ends up being
installed as an extension.
any ideas?
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?
Paul, when you drag the JAR file to the add-ons dialog, make sure the “Themes” tab is focused and not the “Extensions” tab.
It has something to do with the install files. Did you read: https://www.twistermc.com/blog/2007/04/30/theme-identity
NiteOwl, have you red this for menu bar customization? https://www.twistermc.com/blog/2007/10/15/general-theme-answers
Found my answer in you remix files. Fantastic. Thank you for your hard work.
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.
em:type 4, that is
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?
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?
The issue may be the rar file. Zip up the file instead and see if that works.
Yup, making a zip instead of rar solved it! Thanks =)
it did not work for me
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
so, i made the same mistake as Anton. Wrong UUID. Problem solved. Very nice article. Thanks a bunch!
any info on changing the background of the tab bar?
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?
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!
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. 🙂
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
I did al of it, but if I want to install it, he says that it isn’t a secure version.
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.
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.
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
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 >.<
I have the same problem as DanG, however, I DID change the Contents.rdf and the Install.rdf.
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.
Creating Firefox theme is not a bad option and Thanks for this update.Please post more information regarding installing this theme.
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”
maxBOX20 – Just open Notepade and then go File -> Open and select the rdf file. That might work.
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.
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.
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
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…
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.
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.
Download TextWrangler for the Mac. It can open and edit most any text file.
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
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.)
@ Curiousity send me your file twistermc gmail
For files and tutorials that will work with Firefox three. Check out iPox Remix!
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
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 >.>
Thanks, very simple to follow tutorial. 😉
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
I cant even open the .RDF?? what do i use??
Notepad should do it.
wow!! great tutorial thx so much
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 ?
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.
Hi, I used your midnightfox theam to test/tryout making a thea but it won’t install. do you know why not?
That could be lots of things. Are you getting an error?
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. 😀
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
you can use notepad
i’m having trouble converting it back to .jar from .zip, any advice?
Right-Click it and rename it.
You may need to set your computer NOT to hide file extensions.
AJ00200
I want to change the color of the status bar, so how can I do that?
#status-bar {
color: /* your color here */;
}
or you could use a background image.
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.
Yes, that would be the DOM Inspector. However I haven’t had time to put a post together on it.
I’m using Guest and I can’t change it into a .zip. I can’t even download and Install 7zip.
Help!
This…is impossible if you don’t know how to use photoshop….
Unfortunately you do need to know some type of graphics program. Not necessarily Photoshop, but something.
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!
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? °_°
(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! 😀 😀
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.
That’s an issue with the install files. I’ll fix right away. Re-download and try on the 29th.
On second thought, those files should be OK. I don’t have Linux so I can’t test. Can you tell me if iPox has the same issues?
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”?
Start here and grab the starter theme.
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!
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.
i can’t type or add anything into the install.rdf file?! help!
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!
Yes the DOM inspector can work on the Firefox interface. It’s a bit tricky but is possible.
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?
Thnx very much for your notes.
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!
It’s an packaging issue. Make sure you’re packing it as a ZIP not RAR and not packing the entire folder. See https://www.twistermc.com/1163/packaging-firefox-themes/
it’s ok I got it now i just can’t make an updater
I’m having a problem again…
It’ll install all right but when I restart the classic buttons appear.
Can you help?
I am really surprised people are still making themes with Persona’s becoming so popular
Oh I make personas too.
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
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.
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!
can you update this for firefox 4 please???
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.
It’s ok i got it now. I’m making a series of themes called fx (firefox).
—
SilentAero (was randomguy)
Does the same apply for say making a thunderbird theme? thunderbird themes suck balls.
It should be simular, but I once tried to make a Thunderbird theme and it wasn’t very easy.
i cant find the contents.rdf file wher is it
How do you open a .rdf file?
Notepad or TextEdit should do it.
Yeah, thats great.. Great tutorial!! I wannna create a theme by my soccer team..
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.
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 ???