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.

