Creating Overbite custom skins and display styles ------------------------------------------------- Don't like the way Overbite renders Gopher menus? Change it! Overbite uses an abstract internal URL to get images and styling information, which you can replace partially or completely to your taste. The "skin" of a gopher menu is made out of CSS (a Cascading Style Sheet) and PNG images for each supported item type. To fetch its CSS, Overbite internally issues a request for this URL: gopher:///internal-gopherchrome.css Note the three slashes. To fetch an individual icon for an item type, Overbite internally issues a request for a specific PNG. For example, for item type I, Overbite uses this URL: gopher:///internal-icnI.png For item types which could be problematic in filenames (i.e., escape(char) in JavaScript yields a URL-encoded character), such as the ; (movie) itemtype, a hex byte is used instead: gopher:///internal-icn3b.png The other special icons are internal-favicon.png, which is the mascot favicon; internal-root.png, which is the "U-turn" icon; internal-icnhURL.png, which is used for URLs; and internal-icn.png, which is the generic icon used for an item type Overbite doesn't recognize. If you are familiar with the structure of a Firefox add-on, you can download the Firefox version and unzip it, and look inside the content/chrome/ folder. The components of the skin are contained there, without the internal- prefix. To selectively replace files with your own versions, you will need to know where your profile directory is. - In Mozilla Firefox, refer to this article (Web): http://support.mozilla.com/en-US/kb/Profiles In this profile directory, create a folder called ``gopherchrome''. Overbite will check this folder first before falling back on the default set for any internal files it requests. For example, if you make a new icn1.png in that folder, then all requests to gopher:///internal-icn1.png are fetched from that folder, and thus you will have redefined how the gopher menu item type icon is displayed, instantly! You can choose to replace some or all of the icons; whatever icons you do not place in your gopherchrome directory are fetched from the default repository within the add-on itself. If you choose to rewrite the style sheet, however, you should account for all classes and IDs that are defined, either by retaining the original definitions or creating new ones consistent with your desired visual result. Here are the classes and IDs defined in the standard gopherchrome.css file, not necessarily in order of appearance: Layout classes and IDs: div#topbar ID for the top bar containing the URL and any buttons, such as the root menu button. div#urlparent ID for the enclosing object of the URL area (currently just the URL itself). div#urlarea ID for the URL displayed on the page. span.purl Style class for the text of the displayed URL. div#buttonarea ID for the enclosing object of the button area (currently just the U-turn root menu icon, when enabled). td.gicon (see below) div#contentarea ID for the enclosing object of the table holding the gopher menu. table.gmenu Style class for the table used to construct the gopher menu. td.gicon Style class for the table cell used for item type icons and the U-turn root menu button. img.gicon Style class for the individual icon images themselves. td.ds Style class for the table cell used for the displayed text. (See item classes below.) Classes of the text of menu items can be individually styled: span.diritem Style class for the span for gopher menu items. span.fileitem Style class for the span for files and documents. span.infoitem Style class for informational text items (non-clickable links). span.erroritem Style class for the span for error text (itemtype 3). span.telnetitem Style class for the span for Telnet and TN3270 host items. span.urlitem Style class for the span for URL items, such as hURLs. span.searchitem Style class for the span for searchable resources. If you select View Source while looking at a Gopher menu, you can see how and where the individual items in the style sheet are used. As you can see by examining the default style sheet, the lines and borders in the default skin are simply done by manipulating CSS and require no image files themselves. However, if you wish to use background images or other pictures and reference them in your CSS, you can do so by placing these files in your gopherchrome directory as well and referencing them with internal- URLs as shown above. They must be .PNG format; other extensions will not be fetched. - TURN IN YOUR SKIN! The Overbite Project is actively soliciting Overbite skins to host for other users to download and enjoy. If you've created a noteworthy skin/layout that you think others would benefit from, please let us know so that we can offer it publicly to other users. The following stipulations do apply: - Although you maintain copyright to your work, you agree to distribute it under the same license terms as the Overbite add-on itself (at this time, the tri-license Mozilla Public License, GPL v2 and LGPL v2.1). - You certify that the work is either entirely your own, or that you are using other items in accordance with their specific licenses, and that neither the Overbite Project, nor Floodgap Systems nor Cameron Kaiser are responsible in the event you commit any copyright infringement, willful or otherwise. - Please make sure that all artwork is appropriate for all ages. - The Overbite Project maintainers reserve the right to reject submissions for any reason in their sole judgment. Now that that's over with, tell us about your skin at gopher@floodgap.com -- please do not send it until we request it. Thank you! :) - What skins can't do Skins cannot: - add additional item types. If you make icons for item types Overbite does not support, they will be ignored. - change the generated HTML for a menu or modify the actual text of what is printed, although elements could be filtered by making them non-visible. - change the XUL characteristics of the browser window; this requires a separate Firefox add-on. .