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

Share this post


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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


Link to post
  • 0
Posted (edited)

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

Share this post


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

Share this post


Link to post
  • 0

To change everywhere

* {
     cursor: url(_________________
   }


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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

Share this post


Link to post
  • 0
On 3/21/2020 at 9:51 AM, Nadia_Colombo said:

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!  

Hi, just wondering if you ever found a solution to this?

I have the same problem that for a split second the default cursor appears

Share this post


Link to post
  • 0

You can not change the cursor over an iframe.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

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