392 Part VI — Creating Extensions and Themes F IGURE 18-10: Paint Shop Pro, layered overlay Simply repeat the process until you have covered all images from the default theme with the images you want to appear in your theme. If you put each individual image on its own layer, you can easily manipulate them later on to correct alignment issues. When you are finished editing, select the Raster 1 and then press the Delete key on the keyboard to remove the default images. When saving the image, you might be asked if you want to merge all layers. Select Yes to finish saving the file. If you are using separate images for each button, as I choose to do, the process is similar. You can skip the step on deleting the layer containing the default images, but make sure to put each state of the images on a different layer to help with alignment. Most image editors have the capability to display gridlines behind the images to aid with align- ment. In Figures 18-9 and 18-10, the gridlines are shown as the gray and white squares visible on the background of the images. An easy way to create the small toolbar icons is to simply resize the large toolbar icons. If you’ve already completed the large toolbar icons, you can press Shift+S or choose Image ➪ Resize to shrink your image and then save it as a different name than the large toolbar icon. If you don’t use a different name, you will lose the large toolbar icon because the file will be overwritten. Different image editors handle things slightly differently, but all have the ability to display gridlines and resize images. If you are unsure how to perform an action, consult the help file for your image editor for more information. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 392 393 Chapter 18 — Creating Themes Graphics Locations If you are familiar with CSS, you can modify attributes freely.The majority of the buttons that you see while using Firefox are defined within the browser\browser.css file. I would say that about 90 percent of the Firefox interface that you see from day to day is defined in that file. If you are ever unsure of where a button’s image is located, refer to the DOM Inspector example to find which CSS file the button’s code resides in; then you can look at that CSS file to find out the exact location of the image. Main Toolbar The majority of the buttons you see when using Firefox are defined within the browser\ browser.css file. Browsing through this file will give you the location of all the images used, and you can modify attributes for buttons here. Figure 18-11 displays the main toolbar of the Atlas theme. F IGURE 18-11: Main toolbar Extensions Window The Extensions window requires a few graphics of its own, and they are defined in the mozapps\extensions\extensions.css file. If you wish to put icons on the buttons in the lower left, that is possible. I do not provide icons for those buttons in my themes. Figure 18-12 dis- plays the Extensions window of the Mars theme. F IGURE 18-12: Extensions window 26_596500 ch18.qxd 6/30/05 3:16 PM Page 393 394 Part VI — Creating Extensions and Themes Options Window The Options window requires a few icons for the option categories. The code that governs them resides in the browser\pref\pref.css file. Figure 18-13 displays the Options window of the Apollo theme. F IGURE 18-13: Options window In Firefox 1.1, the location of the code that handles the Options window will be changing. The new location is the browser\preferences\preferences.css file. Figure 18-14 displays the new Options window of Firefox 1.1 with the Neptune theme. F IGURE 18-14: Options window, Firefox 1.1 26_596500 ch18.qxd 6/30/05 3:16 PM Page 394 395 Chapter 18 — Creating Themes Bookmarks Manager The Bookmarks Manager has seven buttons to theme. The code defining the buttons is in the browser\bookmarks\bookmarksManager.css file. Figure 18-15 shows the Bookmarks Manager window of the Pluto theme. F IGURE 18-15: Bookmarks Manager Help Window The icons for the Help window are not actually included within the classic.jar file; they are in the Firefox\Chrome\help.jar file. To theme the Help window, I recommend using the DOM Inspector to find out the CSS id of each button and then adding the code to theme the buttons at the bottom of the global\global.css file. Be sure to set the !important flag after defining any styles for the Help window buttons so that your styles will be used instead of the default. Figure 18-16 shows the Help window of the Playground theme. F IGURE 18-16: Help window Icon Conversion I did not draw any of the images in my themes. I am somewhat of a novice when it comes to creating images. The method I used to create the button images in my themes was to find existing icon sets. After receiving permission from the icon creator to use his or her work, I converted the ICO files to PNG files. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 395 396 Part VI — Creating Extensions and Themes To create a PNG image from an ICO file, I use a product from Axialis IconWorkshop (see Figure 18-17). This is not a free program, and it is available for Windows users only. After opening the ICO file with IconWorkshop, you’ll need to select the size that you want to export as PNG from the list on the right. After selecting the image size, press Ctrl+Shift+T, or select File ➪ Export ➪ PNG with Transparency. F IGURE 18-17: IconWorkshop A Linux utility called ImageMagick will convert ICO files to PNG format. You can find more information at http://www.imagemagick.org/. A Mac program called IconBuilder can convert ICO files to PNG format. You can find more information at http://www.iconfactory.com/iconbuilder.asp. Supporting Popular Extension Buttons While not a requirement, supporting the buttons of popular extensions does enhance a theme. Theming the buttons of an extension is handled slightly differently from theming the standard buttons of Firefox. To theme an extension’s button, you need to find out the button’s CSS id. This can be done one of two ways: with the DOM Inspector or by manually opening up the extension’s JAR file and looking at the code. Either way will work, but I prefer to open the JAR file and look in the CSS there for any button ids. That way, I’m certain that I’ll theme all but- tons of the extension. After locating the button ids and creating images, you’ll need to add lines of code to your theme to support the extension’s buttons.The best way to do this is to open global\global.css and insert lines of code at the bottom of this file. Add the code for all of the extension’s buttons to the bottom of global.css and point the button ids to your images. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 396 397 Chapter 18 — Creating Themes To ensure that your image is shown, you must specify the !important flag in the line of code identifying the button image. The !important flag means that once an attribute is defined as !important, it can never be changed, even if the element is redefined in another CSS file. Here is an example of its use: #extension-button { list-style-image: url(“chrome:\\browser\skin\extension_button.png”) !important; } Let’s look at a real-world example. I’ll show you how to support the Basics extension, available at my web site: http://www.spuler.us. The Basics extension does only one thing: adds a button to the left side of the tab bar that opens a new tab when clicked. This emulates the behavior of the New Tab button that resides in the tab bar for Mozilla and Netscape. The Basics extension utilizes a 16 × 16 pixel image — anything taller than 16 pixels would not fix properly on the tab bar. By default, I have the image for the button set to look identical to the small version of the New Tab button, because many users will be using the default theme. Figure 18-18 shows the default theme with the Basics extension installed. F IGURE 18-18: Default theme, Basics extension I support the Basics extension in all my themes. If I had left out the code for the Basics exten- sion, the iCandy Junior theme would have looked like something was not quite right, because the Basics button would display the icon that is bundled with the extension — the icon from the default Firefox theme, as shown in Figure 18-19. F IGURE 18-19: iCandy Junior theme, Basics extension not supported 26_596500 ch18.qxd 6/30/05 3:16 PM Page 397 398 Part VI — Creating Extensions and Themes To add support for the Basics extension, I needed to add some code to the browser\browser.css file. This approach generally works for most extensions, but remember to specify the attributes as !important. If you come across an extension where this method does not work, add the code to the global\global.css file instead. The code that I needed to add to browser\browser.css for the Basics extension is as follows: .tabs-newbutton { list-style-image: url(“chrome://browser/skin/icons/basics.png”) !important; } After you add that code to the browser\browser.css file and supply the necessary image, the button is themed appropriately, as demonstrated in Figure 18-20. F IGURE 18-20: iCandy Junior theme, Basics extension supported By now, you can see how adding support for extensions to your themes can enhance them. However, just because you don’t provide support for an extension doesn’t mean that the exten- sion will not work. The extension will still work, but without support for it, the extension’s but- tons will not be themed to match the rest of the icons used throughout your theme. Listed are a number of popular extensions that I support on my Firefox themes: Ⅲ Basics Ⅲ Calendar Ⅲ Chromedit Ⅲ CuteMenus Ⅲ Download Manager Ⅲ Google Bar Ⅲ JavaScript Debugger Ⅲ Quicknote Ⅲ Search Button Ⅲ Scrollable Tabs Ⅲ Tabbrowser Preferences Ⅲ Toolbar Enhancements 26_596500 ch18.qxd 6/30/05 3:16 PM Page 398 399 Chapter 18 — Creating Themes Ⅲ Translation Panel Ⅲ Web Developer Toolbar Packaging the Files Now that you’ve customized the graphics and modified your code, you can take care of the last remaining tasks before creating the JAR file archive for your theme. The install.rdf file needs to be modified to reflect your theme. Replace the GUID of Smoke ( 3646e22c-5e51-43fb-b8a4-9ebaf7eb11f2) with the custom GUID you created ear- lier.The following also need to be changed: Ⅲ name Ⅲ description Ⅲ creator Ⅲ contributor (optional) Ⅲ homepageUrl (optional) Ⅲ updateURL (optional) Ⅲ internalName Any optional elements can be left blank. The name element is the theme’s name. The internalName element will need to be identical to the theme’s name, but lowercase. Earlier, you used the contents.rdf file from the Smoke theme. The only modification left is to change every instance of smoke to the internalName in your install.rdf file. Creating an Update Definition File If you would like users to be able to automatically update the theme without having to go to your web site and reinstall, you can specify an updateURL in the install.rdf file. I prefer that users know what has changed in my themes, so I don’t utilize this feature. If you wish to use this feature, you will need to create a file, named updade.rdf, and place it on a web site. Specify the URL of the update.rdf file in the updateURL field of the install.rdf file. A sample update.rdf file follows: <RDF:RDF xmlns:RDF=”http://www.w3.org/1999/02/22-rdf-syntax-ns#” xmlns:em=”http://www.mozilla.org/2004/em-rdf#”> <RDF:Description about=”urn:mozilla:extension:{88060a48-addf-4060-87db-c9aec3e5615a}”> <em:version>1.5.1</em:version> <em:updateLink>http://www.website.com/theme.jar</em:updateLink> </RDF:Description> </RDF:RDF> 26_596500 ch18.qxd 6/30/05 3:16 PM Page 399 400 Part VI — Creating Extensions and Themes The GUID listed in the urn:Mozilla:extension field must be the GUID of the theme. The em:version is the version of the theme located online, the most recent version number. When Firefox looks for an update to a theme, it will query the URL of the update.rdf file and compare the version number in the update.rdf file to the version number of the theme currently installed. If the version number in update.rdf is greater than what is currently installed, Firefox will update the theme with the file located in the em:updateLink field. Now that all files are ready, you can create the JAR file for your theme. Using your ZIP-format compression tool, create an archive named theme.jar, replacing “theme” with the name of your new theme. Make sure that you do not select the “Save Path Info” option if it is offered. Testing To install your new theme, open the Themes window from within Firefox by selecting Tools ➪ Themes. You can drag your theme JAR file on the left pane of the Themes window or use the Local Install extension mentioned in Chapter 3. MR Tech’s Local Install extension can be found at http://www.mrtech.com/extensions. If the theme doesn’t install, check to see that the install.rdf and contents.rdf files are formatted properly. Also, verify that the JAR file directory structure matches that previously shown in Figure 18-2. On a Mac, the drag-and-drop functionality is disabled, and the Local Install extension is the only method of installing a theme stored locally. Using the DOM Inspector If your theme installs properly but you still need to make minor adjustments, you can once again use the DOM Inspector. For any element not displaying as expected, you can view its attributes in the DOM Inspector, using the same process that you used earlier to locate button ids and attributes. You can examine the attributes in use and correct any mistakes in your CSS files. After making corrections, repackage the JAR file. Repeat this process as many times as necessary to get the theme exactly as you want it. If you are stuck on something and can’t figure it out, the greatest source of information that I know of for Firefox themes is the MozillaZine Themes forum ( http://forums.mozillazine.org/viewforum.php?f=18). Many theme authors visit this forum regularly to get help and offer advice to others. A quicker way to see your changes without reinstalling the theme is to replace the file manu- ally. Navigate to your profile folder, as described in Chapter 1. Then navigate to the extensions folder and locate the folder that is named after the GUID of your theme. Opening that folder will show the theme file; you can replace this with the newly corrected version. You’ll have to exit Firefox before replacing the file, but afterwards you can open Firefox and see the changes immediately. Another advantage of this method is that when you install the theme multiple times, multiple copies of the jar file are stored in the profile directory. 26_596500 ch18.qxd 6/30/05 3:16 PM Page 400 401 Chapter 18 — Creating Themes Deploying Your Theme Once you feel that the theme is ready for general use, you need to deploy it.There are two ways of deploying a theme: hosting it on your web site or hosting it on the Mozilla Update web site. There are pros and cons to each method. Hosting your theme on the Mozilla Update site means that many people will be able to see it, but you won’t be able to manage your files. One popular complaint is that there can be two ver- sions of your theme available to the public if you host the file on Mozilla Update and on a per- sonal site — the most recently updated copy on your web site and a possibly outdated copy on the Mozilla Update site. The site administrator does all file management on Mozilla Update, and you have to file a bug in Bugzilla ( http://bugzilla.mozilla.org) in order for changes to take place. This process usually takes several weeks. The Mozilla Update site has been known to be out of commission for long periods. Many theme authors like having control over their files and thus don’t post them on the Mozilla Update site.To find out more informa- tion, visit https://addons.update.mozilla.org/about. Hosting your theme on your web site gives you total control over your files, but it may or may not get as much visibility as the Mozilla Update site. I used to host my files on both Mozilla Update and http://www.spuler.us, but now I prefer to manage my own files. (Currently, my site is averaging 2.2 million hits and 45GB of bandwidth traffic per month.) Creating JavaScript Installer Links Hosting the theme on your web site requires some JavaScript to provide a clickable install link for the theme. Otherwise, users will have to download the theme and then use a local install method. The following is a sample install link: <a href = “javascript:void (InstallTrigger.installChrome (InstallTrigger.SKIN,’icandyjr_fb.jar’,’iCandy Junior.’))”>Install</a> You will need to modify the link to match your theme name and filename. That link will pop up a dialog in Firefox like that shown in Figure 18-21. F IGURE 18-21: JavaScript install confirmation Making Your Theme Public After you’ve hosted your theme on a web site, you need to get the word out. A few web sites where you can post your theme release include the following: 26_596500 ch18.qxd 6/30/05 3:16 PM Page 401 . xmlns:RDF=”http://www.w3.org/1999/02/22-rdf-syntax-ns#” xmlns:em=”http://www.mozilla.org/2004/em-rdf#”> <RDF:Description about=”urn:mozilla:extension:{88060a48-addf -4 06 0-8 7db-c9aec3e5615a}”> <em:version>1.5.1</em:version> <em:updateLink>http://www.website.com/theme.jar</em:updateLink> </RDF:Description> </RDF:RDF> 26_596500. modified to reflect your theme. Replace the GUID of Smoke ( 3646e22c-5e5 1-4 3fb-b8a 4-9 ebaf7eb11f2) with the custom GUID you created ear- lier.The following also need to be changed: Ⅲ name Ⅲ description Ⅲ. file. Here is an example of its use: #extension-button { list-style-image: url(“chrome:\browserskinextension_button.png”) !important; } Let’s look at a real-world example. I’ll show you how to support