The Knockout Ring!
Powered by onionring.js
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
<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="/koring/onionring-variables.js"></script>
<script type="text/javascript" src="/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;
}