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

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

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

 

Link to comment
  • 0

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

 

Link to comment
  • 0

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

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

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

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

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

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