CODING 101

Tips n' tricks for your web design needs!

HTML

CSS

As the webmaster of your own webbed corner, I'm sure you've already had that desire to "prettify" your own HTML codes and have the ease to style them in any way you wish. If yes, this tutorial aims to help you on your quest, where I'll explain how to style webrings and how to overcome the initial roadblocks you might bump at!

Webrings in Neocities are bringing the early web nostalgia back, but styling them can be a bit harder than just replacing the anchor text with images. Sometimes they're wrapped in with some internal HTML and some scripts (only accessible through Devtools), and in others they already have an internal stylesheet. So, how to proceed?

How to style a webring with internal HTML and scripts

This method applies to all webrings that are part of the onionring.js system (or any other system that uses JS to keep the ring going), so buckle up!

//-//-//

  1. 1- To get things started, you must have the widget already inside your HTML file, so that you can follow its changes. Regular widgets are usually very simple appearance-wise, only having injected CSS that has to deal with structural stuff, such as its table layout.
    2. <--Webring name--> <--?--Webring-->
  2. 2- Next, open up the Devtools (right click, then find the inspect element button), and track down the elements that are associated to the anchors. Pay attention to their class names! They'll be useful once we move on to the CSS.
  3. 3- Now, it's time to head to the stylesheet. Just use the one you're already using for the page the widget is in. First, you must declare the id/class of the webring div, like this:
    4.  #webringId or .webring_class {
font-size: 0;
text-align: center;
}

    The font size was set to 0, to remove the link words that are tied to the anchors' inner HTML, and as you would expect, yes! You can mess with margins to position the div without a problem that way.

  4. 4- In this next step, here's why you should've paid attention- you'll need to declare the parts' classes in the following code structure, so that the text in the anchor gets replaced properly:
    5.   #webringId .arrow-left a {
background-image: url("insert url here");
background-repeat: no-repeat;
width: 15px;
height: 15px;
display: block;
}

#webringId .arrow-right a {
background-image: url("insert url here");
background-repeat: no-repeat;
width: 15px;
height: 15px;
display: block;
}

#webringId .ring-index a {
background-image: url("insert url here");
background-repeat: no-repeat;
width: 88px;
height: 31px;
display: block;
}
  5. 5- If you got this far, ta-daa! You should get a result similar to this, in the most basic format. You definitely can come up with crazier looks to your widget if you feel adventurous enough lol!
    6. Do note that I did set the anchors' display as block, so that their images are displayed correctly (they're inline by default), and the width n' height measures are just examples. I loosely based them off the NeoCreatives' webring icons.

//-//-//

Alrighty, I hope you found this lil' tutorial useful! I was about to get into more detail on how to handle styling the ones with internal CSS, but I think it'll be better to properly address it in a tutorial of its own, since it applies to other things too :1 Until next time!

JavaScript