Override Cursor with Custom Image

5 hours ago, Grigoryan said:

Thank you. 

For some reason I can't inject the image. 

How do I include the image if i am using the code that was provided.

 

I can't inject the image.

I don't really understand.

Can you clarify this?

On 3/23/2020 at 11:26 AM, tuanphan said:

it should be 32 x 32 px

Hello! 

Is there any way around this? When i made me png this small its very blurry and a little too small, is there any way i can make it bigger and less blurry?

On 2/14/2020 at 3:08 PM, AnnaK said:

YEEESSS!!!!!

If anyone is interested, this is the code I used:

--------------------------------

html, body {
     cursor: url(http://test.kleindinst.at/cursor_medium.png), auto; [Comment: For the standard cursor]
   }

a:hover {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For links in general]
}

input {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important;   [Comment: For the small text fields of the form]
}

textarea {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For the larger text fields of the form]
}

.sqs-system-button {
    cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png),auto !important; [Comment: For all buttons]
}

--------------------------------
Thanks a lot for helping me out!! 🙂

Hello!!! Thank you SO much for this!!! 

I'm realising that it keeps glitching to the image and then back to the normal cursor for no reason? esp when the mouse isnt moving or when i scroll down or up too fast. Is there any way that i can fix this??

I wanted to change my cursor for one page. I uploaded the png file (not a cur file, so the cursor does not change for folks using edge) using manage custom files, the button at the bottom of the custom css window) Then I stuck this code in the advanced code injection of the one page. Then I went and copied the url link for the cursor image and pasted it into the code at the proper point. I suggest you upload your cursor image before you do anything else. 

<style type="text/css">
  body, html {
        cursor: url(image link here), auto;
      }
  </style>

If I had deleted the style command and put the code in custom css it would have changed the cursor for every page. 

https://myrandomviews.com/  click on pictures to see the custom cursor. 

Hi ! I would like to know the code to have a different cursor hover a gallery image ?

Link: https://www.charlestutin.com/architecture-interieure

Thank you !

To change at hover:

<style type="text/css">
  hover, html {
        cursor: url(image link here), auto !important;
      }
  </style>

Put the code in the advanced header of your gallery page. Upload the file to CSS custom files first if the image is stored there. 

On 2/14/2020 at 6:08 AM, AnnaK said:

YEEESSS!!!!!

If anyone is interested, this is the code I used:

--------------------------------

html, body {
     cursor: url(http://test.kleindinst.at/cursor_medium.png), auto; [Comment: For the standard cursor]
   }

a:hover {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For links in general]
}

input {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important;   [Comment: For the small text fields of the form]
}

textarea {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For the larger text fields of the form]
}

.sqs-system-button {
    cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png),auto !important; [Comment: For all buttons]
}

--------------------------------
Thanks a lot for helping me out!! 🙂

So I used the above code with my image pasted in and it works great until you get to my gallery, them the cursor switches back to the regular cursor when clicking through the gallery images. Any help would be appreciated!

for reference my site is https://www.flowersandfloss.com/gallery

To change everywhere

* {
     cursor: url(_________________
   }

Hi all,

I was playing around with this functionality too. I've added the code provided but I have noticed that when hovering the showreel and links the cursor changes. Any ideas on how to overcome this?

https://www.uncommongoods.studio

Thank you!

20 hours ago, joanapaprika said:

Hi all,

I was playing around with this functionality too. I've added the code provided but I have noticed that when hovering the showreel and links the cursor changes. Any ideas on how to overcome this?

Thank you!

Link to your page please.

On 8/7/2020 at 1:12 PM, rwp said:

Link to your page please.

I've just added it above, thanks 🙂

Hi, I've got the code posted working well, thanks all for posting.

The only place I can't seem to get it working is when you hover over a gallery. When you hover over the gallery it goes to a little hand icon again, unless you're hovering over the left/right arrows where it will display the updated cursor as desired.

This can be seen on this page when you hover over the gallery images
https://www.tropicalhotdog.co.uk/red-bull

This is the current code I have in there (XXX replaced with the image location of course)

html, body {cursor: url(XXX), auto;}
a:hover {cursor: url(XXX), auto !important;}
.sqs-system-button {cursor: url(XXX),auto !important;}
* {cursor: url(XXX)}

If anyone could help it would be great

Thanks
Tom

You can not change the cursor over an iframe.

@tuanphan I am using this code in the CSS but I cannot figure out how to generate the link for the image? I have uploaded into the files and copied the link. Not sure what to do? 

html, body {
     cursor: url(http://test.kleindinst.at/cursor_medium.png), auto; [Comment: For the standard cursor]
   }

a:hover {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For links in general]
}

input {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important;   [Comment: For the small text fields of the form]
}

textarea {
cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png), auto !important; [Comment: For the larger text fields of the form]
}

.sqs-system-button {
    cursor: url(http://test.kleindinst.at/cursor_medium_stripes2.png),auto !important; [Comment: For all buttons]
}

Site URL https://disc-toucan-grdn.squarespace.com/

Thanks! 

This doesn't seem to be working for me on 7.1

Here's my code 

<style type="text/css">
.summary-title {
     cursor: url(https://media2.giphy.com/media/U7h910z9HZAkO4f6Uh/giphy.gif), auto !important;
   }
</style>

thegingedit.squarespace.com Pass: "pearler"

Hi Tuanphan

I have tried code from numerous posts on the forum. 

I want to change my cursor on the whole site to one cursor image which is small and compressed. 

Here is my site

sponge-tulip-jmtf.squarespace.com

Thank you!

Can someone help me with the best export settings for my cursor? I've tried everything on Illustrator, both .gif and .png formats. Ideally I could use a .svg, but the cheat to upload one to your Squarespace website hasn't worked for me! I'm just looking for a small circle in #11FD01 but it's so pixelated. 🤯

Hello everyone, great thread. Thanks a lot for all the tips and codes. Please how do I upload the png/gif/svg/cur image to use as the custom cursor.

Thank you.

@tuanphan Quick question! We added all of this code but on our gallery slider, it is still showing a hand: https://www.loom.com/share/50d147c8c1284941aac5fa4c19a44ff4. How do we override that?  I attached what we have in our css. Thanks!

On 1/25/2021 at 11:04 AM, studiolinear said:

@tuanphan Quick question! We added all of this code but on our gallery slider, it is still showing a hand: https://www.loom.com/share/50d147c8c1284941aac5fa4c19a44ff4. How do we override that?  I attached what we have in our css. Thanks!

Can you share site url? We can check easier

On 10/13/2016 at 5:52 AM, wwrightiv said:

Hey first off your website looks great. Secondly have you tried:

<style type="text/css">
body, html {
     cursor: url(imagelinkhere.gif), auto;
   }
</style>

 

 

in your header code injection?

Also try to create your cursor image as a small gif. Here's a fiddle: http://jsfiddle.net/q94EV/342/

Auto is the default cursor and was overriding your .png. I don't know exactly why it didn't like your .png file, but I'd stick with small .gif files

Hey there, I've added a custom curser to the site but it's blurry. Is there a way to make it retina? Thanks
https://www.galleryraye.com/

On 8/13/2021 at 7:50 AM, Lou_90_ said:

Hey there, I've added a custom curser to the site but it's blurry. Is there a way to make it retina? Thanks
https://www.galleryraye.com/

Hi. It looks like you removed custom cursor. Do you still need help?

On 6/19/2018 at 12:57 AM, flearound said:

Hi guys! Any idea how can use an emoji code as a cursor instead of a .png or .gif?

https://www.ghostplugins.com/steps/em0gh2sd From ghostplugins

Hi, is there a way to have a custom cursor when hovering on links and stuff on the website? 

Site: https://www.theculturedivision.com

On 4/8/2022 at 11:13 PM, theculturedivision said:

Hi, is there a way to have a custom cursor when hovering on links and stuff on the website? 

Site: https://www.theculturedivision.com

Hi. Which code you use to add cursor?