Link and Background Colors

When designing your webring's navpanel, it is important to use the style attribute for all Links, and to specify the background color within all <TABLE>, and <TD> tags!!
Link Example: <a target="_top" style="color:#cc00cc; text-decoration: none" href="http://YOUR_DOMAIN/YOUR_SYSTEM/prev[siteid]">Previous</a>
<TD> Example: <td style="background-color: #ff9933; width: 100%"></td>
If you do not do so, the colors you use for your navpanel's links and background colors will be overwitten by all member websites that use style sheets!!

For example:
If you had a webring page, and you wanted all the navpanels displayed on that page (whether JavaScript or HTML generated) to have a black background and lime text, you would enter the following on your style sheet, or within the style section within the head part of your web page:
table {background: #000000; color: #00ff00} td {background: #000000; color: #00ff00}.
All the navpanels would then have a black background and lime text, except those that were using the style attribute within the TD/TABLE tags, and were specifying a background color other than black and a text color other than lime. You could also do the same for the links:
a. { color: #ffff00; text-decoration: underline; background-color: #000000; }
a:active { color: #ff6600; text-decoration: underline; background-color: #000000; }
a:visited { color: #ff0000; text-decoration: underline; background-color: #000000; }
a:hover { color: #00ccff; text-decoration: underline; background-color: #000000; }

Image Maps

Image maps often make the best navpanels, that is if the image used is small, loads fast, and is well designed (design possibilities are limitless). The code for a image map has less code than a HTML fragment, and it is also virtually impossible for a ringmember to screw up the code (unless of course they resize the image). Most if not all Web and HTML editors have a tool for creating a image map. RingSurf apparently does not allow their use (the RingSurf checker does not recognize the image map links).

JavaScript

JavaScript allows the ringmaster to instantly change how the ring's navpanel appears on all member sites. This may get some members upset, members who say do not like the new redesign of the ring's navpanel. It is therefore best that you include a warning on your 'Join' page.

An Example being:
Applicants to this ring agree that the ringmaster may make changes from time to time in the HTML delivered thru the JavaScript request system, and that such changes may result in navpanel differentiation. Applicants affirmatively forsake all rights to whining and moaning in response to such events, and agree to indemnify the ringmaster from all resulting emotional strife any such changes may engender!

Note: You as a ring member can not change the colors/design of a ring's navpanel in a ring using 'JavaScript' to generate the navpanel on your website. However, with WebRing.com if you do not like a ringmaster's choice of colors and/or the design of that ring's navpanel, you can get the HTML code version of that navpanel instead of the JavaScript generated version. To do so just go to the Get Navigation Code page, skip the JavaScript code, and scroll down to the bottom of that page where it says: Members who wish to use the HTML version of this navbar should go here. With the HTML code version you can do anything you want to the navpanel's appearance, of course though you might get the ringmaster/s all pissed off!

Using Examples

To use these HTML examples for your webring's navpanel, just copy the navpanel's code, paste it into your text/html editor, edit the code (colors, image/s used, and...), and then use it in the 'textarea' of the form used for your webring's navpanel code.

These examples can be used with any webring system, all you need to do is when editing the code, enter that system's 'Placeholders' and 'System Urls'.

RingSurf

SiteRing

WebRing

Ringlink

Navpanel Code:

Small Navpanel Code:

Minimal Navpanel Code:

Sally's Navpanel Code:

Image Map Navpanel Code: