Web Ring

What is a webring?

A webring (or web ring) is a collection of websites linked together in a circular structure, and usually organized around a specific theme, often educational or social. They were popular in the 1990s and early 2000s, particularly among amateur websites.

To be a part of the webring, each site has a common navigation bar. It contains links to the previous and next site. By selecting next (or previous) repeatedly, the user will eventually reach the site they started at. This is the origin of the term webring. The select-through route around the ring is usually supplemented by a central site with links to all member sites; this prevents the ring from breaking completely if a member site goes offline. The advantage of a webring is that if the user is interested in the topic on one website, they can quickly connect to another website on the same topic. Webrings usually have a moderator who decides which pages to include in the webring. After approval, webmasters add their pages to the ring by 'linking in' to the ring; this requires adding the necessary HTML or JavaScript widget to their site.


Loop Ring

Loop Ring History and Manifesto:

Loop Ring is a webring project started by Gray with the purpose of building a community and connecting with netizens across the world. Everyone is welcome to join the Loop Ring as long as their website is genuine and sincere. We seek members who Design, Create, Educate, and Express themselves. If you think that you fall into any of those categories, you are welcome here.

Sites will not be allowed to participate if they contain any of the following:

How to join:

1: Let us know that you are interested!

Contact Gray on the discord server and send a message in #web-ring. Alternatively, you can add yourself to the webring by making a pull request on github.

2: Add the webring code to your site.

There are two ways to add the webring to your website.

  1. Add the Javascript script to your site.
  2. Add the HTML anchor tags to your site.

The Javascript <script></script> loads and runs the code from https://graycot.com/webring/loop-ring.js. This creates the widget you see below:



The HTML tags direct the user to https://graycot.com/webring/loop-redirect.html which then redirects the user to the next / previous website in the ring. You can see an example of the unstyled anchor tags below:

< ... Loop Ring ? >



Copy & paste the JavaScript or HTML into the body of the webpage you want the loop ring to direct visitors.

1. JavaScript

<div id="LoopRing"><script src="https://graycot.com/webring/loop-ring.js" type="module"></script></div>

2. HTML

<div class="LoopRingWrapper">

<a href="https://graycot.com/webring/loop-redirect.html?action=prev"> < </a>

<a href="https://graycot.com/webring/loop-redirect.html?action=list"> ... </a>

<a href="https://graycot.com/webring/loop-redirect.html?action=home"> Loop Ring </a>

<a href="https://graycot.com/webring/loop-redirect.html?action=rand"> ? </a>

<a href="https://graycot.com/webring/loop-redirect.html?action=next"> > </a>

</div>

3: CSS Style the webring

1. JavaScript

Here is the default styling of the webring.

#LoopRingWrapper {
display: inline-block;
min-width: max-content;
margin: 0.2rem;
color: #e1e1e1;
border: 1px solid #e1e1e1;
padding: 0.1rem 0.4rem;
border-radius: 50px;
font-Size: 1.3rem;
}

#LoopRingWrapper a:hover {
color: #b4b4b4;
}

You can OverRide the default CSS ruleset by including your own CSS. You must append ".OverRide" (case sensative) to the end of "#LoopRingWrapper". An example that would OverRide the default style would be:

#LoopRingWrapper.OverRide {
display: inline-block;
min-width: max-content;
color: darkgreen;
border: 3px dotted rgb(102, 78, 45);
padding: 0.1rem 0.5rem;
border-radius: 10px;
}

#LoopRingWrapper.OverRide a:hover {
color: lightgreen;
}

2. HTML

As for the HTML, there is no default styling built in. The links will take on whatever styling you have applied to your webpage. An example of how you could style the HTML would be:

#LoopRingWrapper {
display: inline-block;
min-width: max-content;
color: darkgreen;
border: 3px dotted rgb(102, 78, 45);
padding: 0.1rem 0.5rem;
border-radius: 10px;
}

#LoopRingWrapper a:hover {
color: lightgreen;
}

Loop Ring Members