Jump to content

Override Cursor with Custom Image

Go to solution Solved by wwrightiv,

Recommended Posts

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

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

Edited by wwrightiv
Link to comment
  • 1 year later...
  • 1 month later...
  • 1 year later...
21 minutes ago, AnnaK said:

This works very well - thanks a lot!

But
1. The cursor over a link is jumping back to the standard hand symbol.
2. The cursor over a Text-field does the same and jumps back to the standard text cursor icon.

You can check this out on www.kleindinst.at (All buttons open as form).

Can anyone suggest a solution?

Best,
Anna

Replace above code with

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

 

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

Thank you so much for answering!!

It is perfect in the lightbox form now. (If you click "Say Hello!" in the bottom right corner.) No text arrow anymore – great!

But if you watch the website now you can see that there is still a pointer if you put the cursor over the "Say Hello" button.

And what is gone too is the changing cursor over the Menu area (Work, About,...) - Which worked before I used the current code.

 Current code:
--------------------------------
* {
cursor: url(http://test.kleindinst.at/cursor.png), auto;
[Comment: If I write "!important" here and delete it in the a:hover section my custom cursor is all over but there is no hover effect at all]
}

a:hover {
cursor: url(http://test.kleindinst.at/cursor_overlay.png), auto !important;
}
--------------------------------

All I want to have is the same cursor everywhere that changes just over any kind of link.
I feel like there are different categories for links. (Sometimes it works over an image but not in the menu, sometimes it works on buttons, but not over a gallery, etc.)

Flores is the template I use.

Thank you so much for reading til the end! :-)

Anna

Link to comment

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

Link to comment
  • 3 weeks later...

Hi there, Ty for the code! For some reason I'm getting an error message at line two -- I'm guessing my template does not like the term cursor? Is there any alternative code-name for it? I've been trying to suss out the nomenclature but at a loss.

Link to comment
19 hours ago, SRW said:

Hi there, Ty for the code! For some reason I'm getting an error message at line two -- I'm guessing my template does not like the term cursor? Is there any alternative code-name for it? I've been trying to suss out the nomenclature but at a loss.

Can you take screenshot error message? and post all code here?

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 weeks later...
On 2/14/2020 at 11: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!! 🙂

Hey! I'm currently trying to figure this out, I'm a graphic designer but new to coding so I apologise if my questions seem silly.

Where do I upload the image I would like to use for the curser? Just on a hidden page on my site?

Also where do I write the code, I have gone into advanced settings and copy and pasted into the advanced settings>code injection>header injection but it just shows the code as text on the page.

Thanks so much in advance!

And again sorry if the questions seem dumb, we all have to start somewhere right :-) 

Link to comment
10 minutes ago, Sassypants said:

Hey! I'm currently trying to figure this out, I'm a graphic designer but new to coding so I apologise if my questions seem silly.

Where do I upload the image I would like to use for the curser? Just on a hidden page on my site?

Also where do I write the code, I have gone into advanced settings and copy and pasted into the advanced settings>code injection>header injection but it just shows the code as text on the page.

Thanks so much in advance!

And again sorry if the questions seem dumb, we all have to start somewhere right :-) 

Where do upload images: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Where do insert code (above is CSS): https://beaverhero.com/squarespace-how-to/#How_to_Insert_Custom_CSS

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

Hi all!

The code works great but when I hover around on my website I can still see the little hand cursor for a split second (or pointer cursor I can't tell exactly). It happens when you hover over buttons / active links and back again. Anyone know if this can be solved?

www.urbanemotions.com

Thanks!  

Edited by Nadia_Colombo
Link to comment
1 hour ago, Mayfmachadi said:

Gosh that was silly of me!

Syntax error message seems to be gone (thanks!) but the new cursors are still not showing, could it be an issue with my images? Is there a max size? 

it should be 32 x 32 px

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
  • 3 weeks later...
On 10/12/2016 at 12:52 PM, 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

Where do you go to insert this ?

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.