Jump to content

Override Cursor with Custom Image

Go to solution Solved by wwrightiv,

Recommended Posts

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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??

Link to comment

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. 

 

Edited by derricksrandomviews
Link to comment
  • 1 month later...
  • 1 month later...

 

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

Link to comment
  • 3 weeks later...
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.

Link to comment

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

Link to comment
  • 1 month later...

@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! 

Link to comment
  • 3 weeks later...
  • 3 weeks later...
  • 2 months later...
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!

Screen Shot 2021-01-25 at 12.58.32 PM.png

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...
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/

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
  • 5 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.