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

On 12/11/2023 at 8:59 PM, tuanphan said:

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

 

This does not work for me, I've tried cursors at 22x22, 30x30, and 32x32. They all perform the same with a flickering effect. 

On 7/9/2024 at 5:25 PM, wartortle1999 said:

This does not work for me, I've tried cursors at 22x22, 30x30, and 32x32. They all perform the same with a flickering effect. 

Screen Recording 2024-07-09 at 6.13.17.mov

Can you share your site url?

I am also having trouble with this, @tuanphan. Want to swap in SVGs for my PNGs. Either way, I am experiencing flickering and the cursor is not showing up on my galleries (on Motion/Food & Beverage/Motion). 
 

https://azalea-sturgeon-wjrm.squarespace.com/

pw: nivi2024

regular cursor:
https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b3413a9fd81b050c799560/1723023674395/NiviShaham_tomato_cursor.svg

on hover:

https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b341bf2e561a79137970b8/1723023807429/NiviShaham_cursor_hover.svg

Code I'm using:
I know it seems like a lot, but I've had problems with the cursor showing up on contact forms / gallery blocks / newsletter submission buttons / etc.
 

* {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

html, body {
  margin: 0;
  height: 100vh;
  cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

a:hover, .sqs-block-image-link:hover *, a:hover *, .form-item input:hover, .form-item textarea:hover, button:hover {
  cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

.header-nav-item--active a {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

a:hover, .sqs-block-form .sqs-editable-button:hover {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

.sqs-system-button {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

.sqs-system-button:hover {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

textarea {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

textarea:hover {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

input {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

input:hover {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

a.header-nav-folder-title, a.header-nav-folder-item-content {
   cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

.sqs-block-content {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

On 8/7/2024 at 5:05 PM, zooeythecat said:

I am also having trouble with this, @tuanphan. Want to swap in SVGs for my PNGs. Either way, I am experiencing flickering and the cursor is not showing up on my galleries (on Motion/Food & Beverage/Motion). 
 

https://azalea-sturgeon-wjrm.squarespace.com/

pw: nivi2024

 

regular cursor:
https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b3413a9fd81b050c799560/1723023674395/NiviShaham_tomato_cursor.svg

on hover:

https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b341bf2e561a79137970b8/1723023807429/NiviShaham_cursor_hover.svg

 

Code I'm using:
I know it seems like a lot, but I've had problems with the cursor showing up on contact forms / gallery blocks / newsletter submission buttons / etc.
 

* {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

html, body {
  margin: 0;
  height: 100vh;
  cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

a:hover, .sqs-block-image-link:hover *, a:hover *, .form-item input:hover, .form-item textarea:hover, button:hover {
  cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

.header-nav-item--active a {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

a:hover, .sqs-block-form .sqs-editable-button:hover {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

.sqs-system-button {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

.sqs-system-button:hover {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

textarea {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

textarea:hover {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

input {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

input:hover {
      cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66a92a0403e6dd15a919b66c/1722362372905/NiviShaham_cursor_hover.png), auto !important;
}

a.header-nav-folder-title, a.header-nav-folder-item-content {
   cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

.sqs-block-content {
    cursor: url(https://static1.squarespace.com/static/6686b8d5505f8921d3eee3ba/t/66b093de2a9f552c1235fb00/1722848222986/_cursor.png), auto !important;
}

 

Where is Contact Form/Newsletter/Gallery? I can't find it on Footer or Contact page

22 hours ago, tuanphan said:

Where is Contact Form/Newsletter/Gallery? I can't find it on Footer or Contact page

 

It seems like the flickering and cursor issues might be due to how SVGs are handled by some browsers. You can try converting your SVGs to PNGs to see if that resolves the problem. Additionally, target the specific elements like gallery images and form inputs directly in your CSS to ensure the custom cursor applies correctly:

If you're still having trouble, inspect the elements using the browser's developer tools to check for conflicts or errors. The contact form, newsletter, or gallery blocks might be hidden or located on a different page, so double-check your layout.