The Knockout Ring!

How to get in the ring?

Drop me a direct message, or ping me in the Neocities thread with your site and I’ll update the script as soon as I can.

Once added, and when I’ve updated the script here, you’ll need to add this code on your site where you want the widget:

<div id='koring'>
    <script type="text/javascript" src="https://ottr.uk/koring/onionring-variables.js"></script>
    <script type="text/javascript" src="https://ottr.uk/koring/onionring-widget.js"></script>
</div>

You can get some really basic styling , I mean it, it’s fugly, really, by including this in your page too:

<link rel="stylesheet" href="https://ottr.uk/koring/onionring.css">

Or you can manually style it, the whole thing is wrapped in a div with the id #koring; go nuts!

How the HTML looks when inserted (don't copy this, it's an example)

<div id="koring">
<table>
    <tbody><tr>
    <td class="webring-prev"><a href="https://ottr.uk/">← previous</a></td>
    <td class="webring-info">This site is part of the Knockout Ring!<br>
    <span class="webring-links">
        <a href="javascript:void(0)" onclick="randomSite()">random</a> | 
        <a href="https://ottr.uk/koring/index.html">index</a> | 
        <a href="https://garlic.garden/onionring/">what is this?</a></span></td>
    <td class="webring-next"><a href="https://ottr.uk/">next →</a></td>
    </tr>
</tbody></table>

<script type="text/javascript" src="https://ottr.uk/koring/onionring-variables.js"></script>
<script type="text/javascript" src="https://ottr.uk/koring/onionring-widget.js"></script>
</div>

The default stylesheet

#koring {
  max-width: 100ch;
  margin: 0 auto;
}

#koring table {
  background-color: #ffffff; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
}

#koring table tr td {
  padding: 15px; /* creates some space between the links and text inside the widget */
}

#koring .webring-prev {
  text-align:right;
}

#koring .webring-info {
   text-align:center;
}

#koring .webring-next {
  text-align:left;
}

#koring .webring-links {
  font-size:small;
}

Important troubleshooty stuff:

Your HTML needs to have the charset defined as UTF-8 or the arrows will go turbo funky (read broken as fuck)
You can do this by adding <meta charset='utf-8'> in the <head> section of your pages.

If stuff ever looks weird, or the widget isn’t working right - try clearing your cache first, it might be that I’ve updated something with the code!