Published by wesker

published 1657892866
updated 1657894251

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

CUSTOM CURSORS - A GUIDE YOU CAN TRUST !

ive been messing around with cursors for a while and struggled insanely, so i'm here to explain how to get your cursor working !

the following explains adding your own cursor, where to get cursors, cursor code, animated cursors & common errors.

the tutorial points are started with "-", if you're here new rather than to fix your cursor!

your cursor input uses a url starting with "http://"

spacehey only works with urls that use https! a popular site many are using is rw-designer; this isn't compatible with spacehey.

- some really good working alternatives include https://www.cursors-4u.com & https://www.totallyfreecursors.com. on cursors-4u use option 1 when copying & put it at the top of your profile code

you want to use an animated cursor

internet explorer supports animated cursors, as it chooses to, but chrome, firefox etc. do not support these and will instead only display the first frame as a workaround.

- HOWEVER there is a way using keyframes! [click here] (credit to sodimel ^_^)

you missed the style tags out

make sure to put <style> ... </style> around your code! 7 times out of 10 it'll fix your problem

you want to add your own cursor

if you haven't made your own already, hop on a pixel art program & get creating! make sure your cursor is saved in .png or .cur format! the resolution can't exceed 128x128.

you can use https://convertio.co/ to convert a file to .cur !

upload it as a publicly accessible file on your preferred cloud/cdn (dropbox, onedrive, etc) and use that link in the cursor tag !

<style>

cursor: url(REPLACE ME WITH A HTTPS:// URL!), auto;

</style>

i believe discord file links will also work,,

alt example code - nyan cat:

source: cursors-4u.com

i give up! just give me a cursor!

well :^) if it's still not working, i think you may enjoy this:

<style>

body{

cursor: crosshair;

}

</style>

comment if there's anything i should add, something here doesn't work or you just need more help!

& perhaps leave kudos if this helped a little :]

201 Kudos

Comments

Displaying 20 of 32 comments ( View all | Add Comment )

★Anaa Carolina!!	1746986765 THANK YOUU <3 Report Comment
39_melodreams	1742786648 thank youuuuuu :P Report Comment
jantoday	1741379703 THANX!! Report Comment
♯ 🍋⸝⸝ @xx.royzz ─ ✿	1739966790 THANK YEUU >.< u saved mah profile xdd Report Comment
corentin	1739438018 Thank you for this tutorial, and thank you for quoting me, I hope you liked the custom cursors on my profile :D Report Comment
Winniethedoggie	1738370516 thank you! Report Comment
Maximyst	1737998735 Tysm this really helped!!! (/◕ヮ◕)/ Report Comment
soph!(wip)	1736184982 does anyone know how to make the cursor change while hovering over something? Report Comment in standard html it'd be something upon these lines: .cursor:hover { cursor: pointer; (or whatever you want to change it too !!!) } by jess; 1738098978; Report
Grechka	1734428126 TYSM!!! Report Comment
myaa ✶⋆.˚	1733456285 omg tysm you save my life! Report Comment
charlii	1732807965 heyy! for anyone using cursors4u.com, you DO NOT have to use the code in the blog post! all you need to do is select the cursor you want, scroll down and then you'll see the "Universal CSS/HTML code" you can copy and paste that code into your bio! it worked for me :) have a great day <3 Report Comment that worked! love you for that by Karim; 1733045403; Report yw! by charlii; 1733144477; Report it worked! by KazuhiraMarius; 1734854027; Report
𝑏𝑟𝑖𝑎𝑛𝑎	1732559850 one thing to note here is i tried to use the codes from cursors4u but when you paste it in your "about me" it doesn't work. instead of placing it there, try it under "who i'd like to meet" then it will work! just figured that out now for myself so try that guys! :3 Report Comment it work! thank you so so muchhhh! by myaa ✶⋆.˚; 1733456312; Report Thanks I was trying to figure out why it wasn't working in the about me section, Kudos friend. by Yvon Castillo; 1745221232; Report
xxbellabloodmoonxx	1730947529 heyyy every1!! if it doesn't work for u then try dis! x3 <style> body { cursor: url("https://cdn.imgchest.com/files/g4z9cpwexb7.png"), auto; } </style> it should work with a .png and if ur lookin for a site to upload it to then imgchest.com works gr8!!! Report Comment thanks!! by dave; 1733170810; Report
jaz	1728722977 It's still not working, I've got everything right I think ?? cursor: url(https://www.dropbox.com/scl/fi/4pgo5g255nyebalu7m9xe/mantis.cur?rlkey=kos54yam6negtyx3mxppfxft4&st=9bpdvr74&dl=0), auto; It's supposed to be a little mantis reaching up towards wherever you're pointing;-; Report Comment cursor: url(https://i.postimg.cc/XJWbL2tf/mantis.png), auto; Tried it as a png and it's still not working ;--; by jaz; 1728723115; Report Yes I included the style but it's not showing up in my comments by jaz; 1728723142; Report
Unknown	1728198318 my custom cursor is way lower than where i have it pointed :( Report Comment
ren	1727640589 bro is literally an angel THANK YOU SO MUCH Report Comment
ren	1727640586 bro is literally an angel THANK YOU SO MUCH Report Comment
Ryan!	1726786799 TYSM USEDDDD :3 Report Comment
Tom	1722469258 totally saved me dude, thx Report Comment
angeLfluff⋆⋆⋆⋆	1722324106 how people make double cursor?? Report Comment help!! by angeLfluff⋆⋆⋆⋆; 1722324116; Report