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

Override Cursor with Custom Image


mdrewbrennan
Go to solution Solved by wwrightiv,

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 post
  • Answers 44
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

YEEESSS!!!!! If anyone is interested, this is the code I used: -------------------------------- html, body {      cursor: url(http://test.kleindinst.at/cursor_medium.png), auto; [Comment:

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 w

Can you share site url? We can check easier

Posted Images

Recommended Posts

  • 0
On 3/23/2020 at 11:26 AM, tuanphan said:

it should be 32 x 32 px

Hello! 

Is there any way around this? When i made me png this small its very blurry and a little too small, is there any way i can make it bigger and less blurry?

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

To change at hover:

<style type="text/css">
  hover, html {
        cursor: url(image link here), auto !important;
      }
  </style>

Put the code in the advanced header of your gallery page. Upload the file to CSS custom files first if the image is stored there. 

Edited by derricksrandomviews
Link to post
  • 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 post
  • 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 post
  • 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 post
  • 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 post
  • 0

This doesn't seem to be working for me on 7.1

Here's my code 

<style type="text/css">
.summary-title {
     cursor: url(https://media2.giphy.com/media/U7h910z9HZAkO4f6Uh/giphy.gif), auto !important;
   }
</style>

thegingedit.squarespace.com Pass: "pearler"

Link to post
  • 0

Hi Tuanphan

I have tried code from numerous posts on the forum. 

I want to change my cursor on the whole site to one cursor image which is small and compressed. 

Here is my site

sponge-tulip-jmtf.squarespace.com

Thank you!

Link to post
  • 0

Can someone help me with the best export settings for my cursor? I've tried everything on Illustrator, both .gif and .png formats. Ideally I could use a .svg, but the cheat to upload one to your Squarespace website hasn't worked for me! I'm just looking for a small circle in #11FD01 but it's so pixelated. 🤯

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

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