struggling with cursor CSS. please help!

[RNotteLovesOwls]

man, i’m having just the darndest time trying to add a custom cursor to my website or status.cafe page. i don’t know what i’m doing wrong. right now, the CSS code looks like this:

Code

 .cur {
cursor: url(https://files.catbox.moe/wvo0xi.png), auto;
}

but it doesn’t do anything. what else should i add to it? i made a really cute custom cursor and i want everyone to be able to see it

[mrparker]

It seems like the file doesn't exist on catbox's side - are you certain that is the correct URL?

[chilblands]

It seems like the file doesn't exist on catbox's side - are you certain that is the correct URL?

To add on from mrparker, I think it is best to upload your png into your site and link it directly. Catbox sometimes goes down and it is unreliable.

For example, if your cursor.png is in files folder > /files/cursor.png

[RNotteLovesOwls]

It seems like the file doesn't exist on catbox's side - are you certain that is the correct URL?

ooooh, you're right! i'm using this image now, and it loads: https://files.catbox.moe/ds23h1.png

but still nothing from the code. again, i feel like i'm missing a step, but i don't know what it is

Code

 .cur {
	cursor: url(https://files.catbox.moe/ds23h1.png), auto;
	}

i see that your website has a custom cursor, mrparker. what's your code look like?

To add on from mrparker, I think it is best to upload your png into your site and link it directly. Catbox sometimes goes down and it is unreliable.

For example, if your cursor.png is in files folder > /files/cursor.png

the problem is that my site is hosted on bearblog, which doesn't have image file hosting. so i have to rely on catbox for this

[mrparker]

ooooh, you're right! i'm using this image now, and it loads: https://files.catbox.moe/ds23h1.png

but still nothing from the code. again, i feel like i'm missing a step, but i don't know what it is

Code

 .cur {
	cursor: url(https://files.catbox.moe/ds23h1.png), auto;
	}

the problem is that my site is hosted on bearblog, which doesn't have image file hosting. so i have to rely on catbox for this

So the next thing is to check to make sure all of the elements you want to have this cursor have the .cur class applied.

Code

<a href="/" class="cur">Go Home</a>

If you want it to apply to specific elements, you can instead change your CSS to select specific elements by specifying their tags, like so:

Code

a {
    cursor: url(https://files.catbox.moe/ds23h1.png), auto;
}

The above CSS will apply the cursor to every <a> tag on the page. No need to apply a class to every element you want to have it, like you have to currently.

Edit:

Also, apologies I just realized you asked about my website - so my website doesn't do anything too special, the code I gave in this post is very similar, except I apply different cursors like this:

Code

body {
    cursor: url("/images/Cursor.png"), auto;
}

.button, a {
    cursor: url("/images/Pointer.png"), auto;
}

I kept the example simple to make it less confusing, so this isn't an exact example - I use a lot more complex CSS to do the same thing, but at the core of it, it is essentially doing this.

If you're curious, here's the code I use - the code available on the live version is a minified version of what I edit:

Code

:root {
    background-color: black;

    --underline-style: underline white dashed;
    --pointer: url("/static/images/DragCursor.cur"), auto;
    --cursor: url("/static/images/ArrowCursor.cur"), auto;
    --primary-color: rgb(80, 80, 80);

    cursor: var(--cursor);

    color: white;
}

.button {
    filter: invert(100%);

    margin-right: 40px;

    cursor: var(--pointer);

    user-select: none;
}

#welcome a, #welcome area {
    cursor: var(--pointer);
}

[mrparker]

To add on from mrparker, I think it is best to upload your png into your site and link it directly. Catbox sometimes goes down and it is unreliable.

For example, if your cursor.png is in files folder > /files/cursor.png

It would probably be better to use something like imgur, which does allow hotlinking of images uploaded to the site:

https://imgur.com

Also, they are significantly faster, too - as images get served with a CDN.

[chilblands]

hosted on bearblog, which doesn't have image file hosting. so i have to rely on catbox for this

Damn, that sucks. There's https://filegarden.com/
I can not attest to how good FileGarden is, but I do have experience with CatBox not working every few weeks for hours!!

It would probably be better to use something like imgur,

Imgur is banned in some countries, so it is not good either, unfortunately

[mrparker]

Damn, that sucks. There's https://filegarden.com/
I can not attest to how good FileGarden is, but I do have experience with CatBox not working every few weeks for hours!!
Imgur is banned in some countries, so it is not good either, unfortunately

I had no idea that Imgur was banned in some countries, that's a real shame.

It honestly might be in the best interest to keep using what you want to use, these are ultimately suggestions. Eventually if you move to a host that supports image uploading, or even get to a point where you feel comfortable hosting it yourself - you can do that, too.

[RNotteLovesOwls]

Code

body {
    cursor: url("/images/Cursor.png"), auto;
}

.button, a {
    cursor: url("/images/Pointer.png"), auto;
}

this worked! thank you thank you thank you!

[mrparker]

No problem - glad I could help.

If you ever want to read more into this, you can use resources like the Mozilla Developer Network (shortened a lot of the time to "the MDN") or Google's documentation available at https://web.dev - which provides useful tips, tools and guides surrounding designing websites for accessibility and speed.

Have fun developing for the web!

[Dan Q]

I had no idea that Imgur was banned in some countries, that's a real shame.

Yeah, they don't provide service here in the UK, for example. It always saddens me when I go to what is probably an awesome indie website but all I initially see is a wall of placeholder images saying "Imgur is not available in your region".

[RNotteLovesOwls]

Damn, that sucks. There's https://filegarden.com/
I can not attest to how good FileGarden is, but I do have experience with CatBox not working every few weeks for hours!!
Imgur is banned in some countries, so it is not good either, unfortunately

turns out, i was wrong. bearblog DOES have image file hosting. whew! this will make loading my website’s images way faster (including the cursor  )

[mrparker]

I was going to suggest that, but I found out it was a paid addon, I wasn't sure if you wanted to pay for anything.

Great that you found a solution :D