How to have a custom cursor on your Neocities website!

It's a very simple thing to do, but wield this power with great caution. I don't want to be responsible for anyone stumbling upon your website and then getting the most colourful blinking cursor ever that makes their eyes feel bad.

First go find a PNG or something for your cursor. You can use a SVG, but the free Neocities plan doesn't allow for that file time. But PNGs will work fine!

And then, all you do is put this code into your website's style.css under the body style.

So if your cursor's image file was POOP.png, it'd look like this.

And that should work! (I think...)

NOW IF YOU WANT A BUTTON LIKE THIS BELOW WHERE you can change from your default cursor to the custom cursor...

Here is the code, as workshopped by me for a few hours below. It's not the best, because it's kinda weird to check an if statement by the button's text.... But it does the job.

<button type="button" onclick="ENGAGE()" id="demo">change the cursor!</button>

...And then on the bottom of your page, put the script code like this.

      <script>
    function ENGAGE() {
  var x = document.getElementById("demo");
  if (x.innerHTML === "change the cursor!") {
      x.innerHTML = "change the cursor back to normal!";
       document.body.style.cursor = "url(POOP.png), default";
  } else {
    x.innerHTML = "change the cursor!";
    document.body.style.cursor = "default";
}
}
  </script>
      

And hopefully that works. Wield this power well.