Override Cursor with Custom Image

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

yaaaaaaaa it works! THANK YOU! is there a code so it overrides every type of cursor (roll-over, hover, etc)?

ALSO i want to do this: http://www.cornify.com/

you see that fancy pants rainbow background that follows your mouse? dang, thats a beauty - any idea?

Hey I am trying to add this as my cursor

https://emojipedia.org/apple/ios-11.3/dog-face/

any idea how to save it and make it a URL for me to use as my cursor?

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

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

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>

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

17 hours ago, AnnaK said:

Thank you so much for answering!!
 

Use this CSS

.sqs-system-button {
    cursor: url(http://test.kleindinst.at/cursor_medium.png),auto !important;
}

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

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.

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?

Hi there, thanks! It's directly pasted from the code above -- thank you for that! -- with my file images loaded in, obviously

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 :-) 

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

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!  

Hey guys! 

I'm having trouble with the code :( getting syntax error on line 2, not sure what the issue is? Thanks! 

1 minute ago, Mayfmachadi said:

Hey guys! 

I'm having trouble with the code :( getting syntax error on line 2, not sure what the issue is? Thanks! 

 

 

Remove [ comment..]

6 minutes ago, tuanphan said:

Remove [ comment..]

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? 

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

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 ?

1 hour ago, Grigoryan said:

Where do you go to insert this ?

 

•  

Home > Settings > Advanced > Code Injection > Header

On 4/12/2020 at 5:16 PM, tuanphan said:

Home > Settings > Advanced > Code Injection > Header

Thank you so much 

On 4/12/2020 at 5:16 PM, tuanphan said:

Home > Settings > Advanced > Code Injection > Header

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.

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?