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 Camino, look inside your home directory, under
/Library/Application Support/Camino

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. (Camino does not support XUL.)



.
