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 Mozilla add-on, you can download the Mozilla 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 Mozilla SeaMonkey, refer instead to http://kb.mozillazine.org/Profile_folder_-_SeaMonkey 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 (2 = introduced in 2.0): body Body of the document div#everything The entire contents of the gopher interface, including top bar and content area. (2) 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.) a.plus The inline viewing "icon." (A text + sign, actually.) (2) span.inlineprompt The text of the inline search server prompt. (2) div.inlineprompt The div containing the inline search server form. (2) 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. 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 add-on. Skins made for 1.1 will need to have the extra 2.0 fields added to function correctly. .