return home

important! this is an older tutorial. it may allow for more customization, however it is not the quickest. see here for an updated tutorial.

welcome to...

wormboy's exclusive tutorial!!!! [OLD!!!]

this page will walk you -- a beloved web on the ring -- through adding a default or configurable widget to your webpage[s].

table of contents

code snippets

before we go into any setup, here is the base code:

the easy way: how to setup

download the javascript file from above, and upload it to your neocities. [keep it with your other .js files!] you may rename this file anything you desire, but for consistency i will call it webringWidget.js.

now open the file.

notice the configuration variables at the top. only 2 are required for easy setup:

please note that your sitename will not be your url, but your listed name on the webring's home page. for example:


const SITENAME = "divorce florida";
const WRAPPER_ID = "webring-wrapper";

pick an id name now, and keep it in mind. it can be anything, it just needs to be unique, webring-wrapper is a good option, i use focbwr personally.

once you have filled in the blanks, open the html file for the page you'd like to show off your webring on.

within your <head> element at the top of your document, add the following script:


<script type="module" src="PATH/TO/webringWidget.js"></script>

be sure to customize the src attribute for your needs.

finally, somewhere on your page, ensure that you have an element with the specified id. for example:


<div id="webring-wrapper">
    <!-- content will be filled in right here -->
</div>

i suggest you use a <div>, but whatever!

now you should be good to go. in case of errors, hit f12 and check the console. contact crane if something is really wrong :]

how to configure

there are three additional configuration variables at the top of your code.

variable name data type description default value
AUTOSTYLE boolean whether to add an additional stylesheet to your webpage for webring styling. true
CSS_PATH string path to the .css file used to style the widget. "https://friends-of-cranebot.pages.dev/assets/css/widget.css"
VERBOSE boolean whether to print additional status messages to console. false

try this: disable AUTOSTYLE, and add the following styles to your own .css file to customize:


/* widget placed inside your wrapper. */
div#focbwr-inner {}

/* link row. */
div#focbwr-inner > div {}

/* link colors. */
div#focbwr-inner div a, div#focbwr-inner div a:visited {}

div#focbwr-inner div a:hover {}

how to customize

if you're interested in complete customization, please see the api docs!