Custom Sitewide Cursor

Site: https://gracelillianlee.squarespace.com/

My site password is: Tr0pic@l

Hello,

I am trying to create a custom cursor site-wide and a custom hover cursor. I have tried a few different code snippets online but nothing seems to be working. The custom cursor will show up on my page for a second but it doesn't replace the default cursor it just sits next to it and then disappears. This is the code below that I have tried but is not working properly. Any ideas?

body {

margin: 0;

height: 100vh;

cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4ab330577bc8eb047/1701917908121/custom-curser.png), auto !important; 

}

 a:hover {

cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4a70814190f44bef5/1701917908113/custom-curser-hover.png), auto !important; 

}

It seems to be working now, is this resolved?

Hello, No it still does not work on my end, and I have the same problem. See the link to screen record https://www.loom.com/share/9bb7088191b64d8f9f8e515181f3df7b?sid=4e7c08be-4041-4e3c-ba9f-1354492332a1

Thanks in advance

I have had to remove that code altogether as it was breaking my site, it was affecting me when I was in edit mode and would not let me add new blocks to sections, does anyone have any ideas on what might work?

Thank you 🙂

Try this

body {

margin: 0;

height: 100vh;

cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4ab330577bc8eb047/1701917908121/custom-curser.png), auto !important; 

}

body a:hover, body a:hover * {

cursor: url(https://static1.squarespace.com/static/63c8b02c67ac2c30ae9427df/t/657134d4a70814190f44bef5/1701917908113/custom-curser-hover.png), auto !important; 

}

If you can't edit anything in edit mode, you can access safe mode with this link

https://gracelillianlee.squarespace.com/config/safe

Hi Tuan,

Thank you, this did work, I was wondering if there was a way to get it to work SVGs? I uploaded 2, one for each cursor state but they didn't work, only the PNGs. Do I need to alter the code so SVGs work?

Normal: https://gracelillianlee.squarespace.com/s/custom-curser.svg

Hover: https://gracelillianlee.squarespace.com/s/custom-curser-hover.svg

I also had the same issue however, when using this code it breaks the edit mode in fluid engine. I have attached a video as an example. 

Would this mean I would need to use that safe mode link to edit the site when having a custom cursor applied? Thanks again for all your help.

Video here of what it's doing in edit mode, when I add a block it shoots me to the top of the page and will only let me add a new block to top section and none below:

https://www.loom.com/share/490e3a3ad63446298fde1a9e52b06840?sid=a20694c4-f0b4-4d85-8172-000db8290820

Change to correct size