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

Override Cursor with Custom Image

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

Share this post


Link to post

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

Share this post


Link to post
  • 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>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

 

Share this post


Link to post
  • 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 :-) 

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post
  • 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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post
  • 0
1 hour ago, Grigoryan said:

Where do you go to insert this ?

 
  •  

Home > Settings > Advanced > Code Injection > Header


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...