Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Override Cursor with Custom Image


mdrewbrennan

Question

im trying to override all cursors with an egg. yes you read that correctly, i want the cursor to be a tiny fried egg, please dont ask why.

i used this from a previous discussion board but it didnt work: { cursor: e-resize; } or {cursor: url(images/my-cursor.png), auto;}

any ideas?!??!?!?!?!??!?!?!?

oh my site is maggiedrewbrennan.com in case you were curious. an egg would be perfect for it.

Edited by mdrewbrennan
Initial Revision
Link to comment

Recommended Posts

  • 0
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
  • 0

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
  • 0

 

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
  • 0
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
  • 0

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
  • 0

@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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...