72 Part I — Basic Hacking Originally, I just wanted to mirror for the Extension Manager the Install button functionality that Bradley had created for the Theme Manager. Version 1.0 was quickly built and released. Since then, File menu, shortcut keys, and international localizations have been added. The basic idea is that you can now choose how you can install local copies of extensions and themes. For extensions, it automatically defaults to an *.xpi file type, and for themes, it defaults to a *.jar file type, making it easier to distinguish those files from others you might have saved in the same directory. You can download the Local Install extension at http://www.mrtech.com/extensions/. Hacking via userChrome.css Earlier in this chapter we introduced the manual steps for creating your own style sheets to change the appearance of the main browser windows and supporting screens.This section dives into how to use customizations already packaged with some very popular themes. Several themes have subskins, style sheet modifications that are wrapped up into a CSS file, which is then bundled within the theme’s JAR file. Doing this makes certain features optional and allows the themes themselves to be hacked from the userChrome.css. A generic example of a userChrome.css entry that uses a subskin looks like this: @import url(“chrome://global/skin/subskin/round.css”); This tells the browser to look for the round.css file in the registry theme’s chrome path of ://global/skin/subskin/. If you switch themes and no round.css file is found, the browser continues without failure. Remember that in your userChrome.css file, all @import lines for subskins or other features need to be put above the @namespace line, if it exists. You have to check each individual theme to see if it has subskins and determine the exact path- and filenames needed to take advantage of the modifications. The following sections cover some of the popular themes and some of the available hacks. Hacking Aaron Spuler’s Themes Aaron Spuler’s collection of themes is by far my most recommended and best-loved collection of themes under one roof.The style and consistency within each theme is something most users will appreciate. That coupled with timely updates makes for a great set of themes to adopt as your primary set. Themes featured on his site include the following: Ⅲ Apollo Ⅲ Atlas Ⅲ Blue Ⅲ iCandy Junior Ⅲ Mars 07_596500 ch04.qxd 6/30/05 3:26 PM Page 72 73 Chapter 4 — Hacking Themes and Icons Ⅲ Neptune Ⅲ Playground Ⅲ Pluto Ⅲ Rain Ⅲ Smoke Two of the several hacks that are available with most of these themes are brushed metal back- ground and Safari-style tabs, as shown in Figure 4-12. F IGURE 4-12: Aaron Spuler’s theme hacks To apply the brushed metal background hack shown in Figure 4-13, just add the following line to your userChrome.css, save, and restart Firefox: @import url(“chrome://global/skin/subskin/brushed.css”); To apply the Safari-style tabs, add the following line: @import url(“chrome://global/skin/subskin/safaritabs.css”); To download or install any of Aaron’s themes, visit http://www.spuler.us/. 07_596500 ch04.qxd 6/30/05 3:26 PM Page 73 74 Part I — Basic Hacking F IGURE 4-13: Aaron Spuler’s Atlas theme with the brushed background subskin applied Hacking the Mostly Crystal Theme Another great theme that can be hacked with subskins is Mostly Crystal. Mostly Crystal is based on Crystal SVG (for Linux) icons created by Everaldo ( http://www.everaldo. com ). Several nice features of Mostly Crystal subskins allow for rounded corners, toolbar tweaks, and using menu icons, as shown in Figure 4-14. Here are just some of the great hacks you can apply that are specific to the Mostly Crystal theme, as shown in Figure 4-15: /* Use SMALL throbber image regardless of toolbar size. */ @import url(“chrome://global/skin/subskin/throbber-sm.css”); /* Change the Plain Dropmarkers for address bar and menulists to images. */ @import url(“chrome://global/skin/subskin/dropmarker.css”); /* Show icons for menuitems (English only). */ @import url(“chrome://global/skin/subskin/menuitems.css”); /* Use stylized address and search bars. */ @import url(“chrome://global/skin/subskin/rounded.css”); 07_596500 ch04.qxd 6/30/05 3:26 PM Page 74 75 Chapter 4 — Hacking Themes and Icons F IGURE 4-14: Mostly Crystal subskins samples F IGURE 4-15: Mostly Crystal with subskin hacks applied 07_596500 ch04.qxd 6/30/05 3:26 PM Page 75 76 Part I — Basic Hacking To download or install the Mostly Crystal theme, visit http://www.tom-cat.com/ mozilla/ firefox.html. Hacking the Phoenity Theme Phoenity has become my theme of choice for several reasons, but mostly because of its small, simple icons. Besides its support for extensions with icon functionality, it boasts support for several other applications and has its own Firefox subskins. These are just some of the multitude of great options that you have with regards to being able to hack the Phoenity skin, as shown in Figure 4-16. Use this snippet to apply Phoenity icons to the menus: @import url(“chrome://browser/skin/subskins/cutermenus.css”); To update the icons used by buttons, add this to the userChrome.css: @import url(“chrome://browser/skin/subskins/cutebuttons.css”); For smooth, rounded corners around the location and search bars, use this line: @import url(“chrome://browser/skin/subskins/roundedbars.css”); To download or install the Phoenity theme, visit http://phoenity.com/firefox.html. F IGURE 4-16: Phoenity theme with subskin hacks applied 07_596500 ch04.qxd 6/30/05 3:26 PM Page 76 77 Chapter 4 — Hacking Themes and Icons Hacking Website Icons A web site icon or favicon is a 16 × 16 pixel icon that is viewable on the location bar of most browsers; Firefox also has the capability of displaying this icon as the bookmark’s icon. This section covers how to make sure that you have favicon support enabled; how to remove it man- ually; and, briefly, how to use the Delete Icons extensions. Enabling Icons for Bookmarks and Websites By default, Firefox tries to load a site’s favicon to display it on the location bar and as the book- mark’s icon. The standard favicon format is an ICO or icon file, but Firefox also supports GIF, JPEG, PNG, MNG, XBM, and BMP formatted icons. The default file that Firefox looks for, if it is not specified in the web page, is favicon.ico on the root of the web server the page is being loaded from. While the default display of icons is 16 × 16 pixels, Firefox resizes icons to display properly in the location bar and bookmarks. Additionally, the maximum size for icons to be saved with bookmarks is 16K. Some tweaking extensions allow you to enable or disable the loading of favicons by modifying the following preferences listed. My preference is to have both entries in my user.js file to make sure they are always set to my preferred setting of true. user_pref(“browser.chrome.favicons”, true); user_pref(“browser.chrome.site_icons”, true); Sites can specify the name and the location for their favicon file with HTML entries such as the following: <link href=”favicon.ico” rel=”SHORTCUT ICON”> <link rel=”icon” href=”favicon.ico” type=”image/x-icon”> <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> In Firefox, favicon.ico can be replaced with any GIF, JPEG, PNG, MNG, XBM, or BMP formatted icon (for example, favicon.gif and so on). For a web service to create favicons from your own pictures, visit http://www.html-kit .com/favicon/. Removing Favicons Manually While this task seems trivial, it does involve some digging into the bookmarks.html file. This file is formatted as a standard HTML file with specific syntax to allow Firefox to parse it prop- erly. This file is loaded once on startup and saved when the browser shuts down. Special atten- tion should be made to close all Firefox windows before editing it, as all changes will be lost if 07_596500 ch04.qxd 6/30/05 3:26 PM Page 77 78 Part I — Basic Hacking Firefox is left open. You can use this to your advantage if sites have malformed or corrupt favi- cons, or if the bookmark file becomes corrupt. Additionally, if sites update their favicon, the favicon will not get updated in the bookmarks.html file. The bookmarks.html file is located in the root of your profile directory and should be backed up before editing. The bookmark file uses a standard HTML link to store the information for each bookmark with special properties, as illustrated in the following: <A HREF=”http://www.spreadfirefox.com/” LAST_CHARSET=”UTF-8” ID=”rdf:#$4wPhC3”> Additional properties that are stored within the link tag, if available, include: Ⅲ LAST_VISIT Ⅲ LAST_MODIFIED Ⅲ SHORTCUTURL Ⅲ ICON or favicon The ICON property holds a base64 or text equivalent of the binary icon file that is downloaded from the site. Because of this conversion, the ICON property’s value is very long. A bookmark that contains an icon image will look similar to the following link: <A HREF=”http://www.mozilla.org/products/firefox/central.html” ICON=”data:image/png;base64,SNIPPED” LAST_CHARSET=”ISO-8859-1” ID=”rdf:#$GvPhC3”> For the sake of keeping the preceding example short, 778 characters were removed where you see SNIPPED in the ICON property of the link. To remove the ICON or favicon, just follow these steps: 1. Close all Firefox windows. 2. Make a backup of bookmarks.html. 3. Load the bookmark file from your profile directory into any text editor, preferably one with HTML syntax highlighted to make it easier to read. 4. Page through or do a search for the offending web address. 5. Scroll over to the ICON property for that site and remove all values within the quotes for the ICON property, including the ICON tag. 07_596500 ch04.qxd 6/30/05 3:26 PM Page 78 79 Chapter 4 — Hacking Themes and Icons The resulting tag should look like this: <A HREF=”http://www.mozilla.org/products/firefox/central.html” LAST_CHARSET=”ISO-8859-1” ID=”rdf:#$GvPhC3”> The next time you visit that link in your bookmarks, the favicon will be fetched again and saved to your bookmarks. Removing Icons with the Delete Icons Extension If you want to facilitate removing bookmark icons, this is the extension you want to try. This extension adds a Delete Icon property to the right-click context menu for bookmarks and a Delete Icons entry to the Tools menu. The bookmark option removes just the individual icon that was right-clicked; the Tools menu option can remove all icons and allow you to start over. As a proponent of housecleaning, I like to do a full sweep every now and then, and this exten- sion makes it very easy. To get Delete Icons, visit http://www.gozer.org/mozilla/extensions/. Recommended Themes I use several criteria used to make theme recommendations, including frequency of updates, extendibility, and version compatibility. Keeping themes updated is critical, considering the multitude of options as well as updates that are made to the underlying rendering code. The following extensions have historically been very good in maintaining compatibility and provid- ing extended features such as subskins and support for popular extensions: Ⅲ Atlas: http://www.spuler.us/atlas/ Ⅲ Doodle Plastik and Doodle Classic: http://home.student.uu.se/dana3949/ doodle/ Ⅲ iCandy Junior: http://www.spuler.us/icandyjr/ Ⅲ Lila: http://www.deviantart.com/deviation/12834861/ Ⅲ Mostly Crystal: http://www.tom-cat.com/mozilla/ Ⅲ Noia 2.0 Lite: http://www.deviantart.com/deviation/5706856/ Ⅲ Noia 2.0 eXtreme: http://www.deviantart.com/deviation/12834861/ Ⅲ Phoenity: http://www.phoenity.com/firefox.html Ⅲ Playground: http://www.spuler.us/playground/ Ⅲ Pluto: http://www.spuler.us/pluto/ Ⅲ Qute: http://quadrone.org/graphics/ Ⅲ Toy Factory: http://www.projectit.com/freestuff.html#toyfactory 07_596500 ch04.qxd 6/30/05 3:26 PM Page 79 80 Part I — Basic Hacking Summary This chapter is a good primer for theme development and understanding some of the funda- mentals of how themes work. The chapter highlights different approaches to hacking the Firefox user interface with colors, background images, and changing the spacing around icons. It also taps into installing themes remotely and locally, then moves right into applying hacks to themes that support subskins or Cascading Style Sheet modifications. Finally, it tackles how to manually hack favicons or website icons, as well as how to hack them with the Delete Icons extensions. 07_596500 ch04.qxd 6/30/05 3:26 PM Page 80 Hacking Performance, Security, and Banner Ads Chapter 5 Performance Tweaks and Hacks Chapter 6 Hacking Security and Privacy Chapter 7 Hacking Banner Ads, Content, Images, and Cookies part in this part 08_596500 pt02.qxd 6/30/05 2:43 PM Page 81 . PM Page 78 79 Chapter 4 — Hacking Themes and Icons The resulting tag should look like this: <A HREF=”http://www.mozilla.org/products /firefox/ central.html” LAST_CHARSET=”ISO -8 8 5 9-1 ” ID=”rdf:#$GvPhC3”> The. HREF=”http://www.mozilla.org/products /firefox/ central.html” ICON=”data:image/png;base64,SNIPPED” LAST_CHARSET=”ISO -8 8 5 9-1 ” ID=”rdf:#$GvPhC3”> For the sake of keeping the preceding example short, 7 78 characters were. http://www.deviantart.com/deviation/1 283 486 1/ Ⅲ Mostly Crystal: http://www.tom-cat.com/mozilla/ Ⅲ Noia 2.0 Lite: http://www.deviantart.com/deviation/570 685 6/ Ⅲ Noia 2.0 eXtreme: http://www.deviantart.com/deviation/1 283 486 1/ Ⅲ