how to create custom cursor ?

Site URL: https://guppy-pug-x8j4.squarespace.com/

how to create a custom cursor ?

Do you have any custom CSS code for me as a reference?

I can help you with this. 

The cursor is a jpg or png file normally 30px by 30px in size. Stick this file on your desktop where it is easy to find.  You can host the image many places but normally you would upload it to your site's file manager. There are a number of ways to get to that. Easiest for me is  to go to design/ custom css and scroll down to manage custom files and then just above that open add images or fonts. Then navigate to your desktop and choose the png file. Save it. Then open css in a window, scroll down to the bottom of the frame and choose manage custom files again if it closed. Make sure you are at the bottom of the screen and click on the png file. The address and it is a long one with images.squarespace.cdn as its lead will copy to the window. Copy that and you should consider pasting it to a wordpad file or somewhere like that. Do not save the window that is open. Hit cancel. 

Now the question is do you want this cursor to be site wide or just on certain pages, which is the way I use my custom cursor as seen here?

https://myrandomviews.com/blog/lessons 

This may not work with all browsers, however here is the code. For one page or blog post use it in a code block on that page or post. For the whole blog put it in advanced page header injection. You have to change the cursor url to the one you copied or my cursor will show up.  

<p><style type="text/css">
body {
        cursor: url(https://static1.squarespace.com/static/552089d6e4b039659f7ab488/t/5ec460d21065fa53e6c04d5e/1589928146740/MY+RANDOM+VIEWSmouse+%282%29.png),  auto;
      }
  </style>

</p>

If the cursor is for the whole site here is the guide:

1. Create a graphic you’ll use for your cursor. Make sure it’s around 30px by 30px and in JPG or PNG format and put it on your desktop. 

2. Go to Design > Custom CSS 

3. Copy and past one of  the following  code snippets into Custom CSS:

5. Upload your custom cursor files here by either uploading or drag and dropping. 

6. Scroll back up to where you pasted your code and click between the parentheses ( )

7. Then click the custom cursor file you just uploaded under Manage Custom Files. It should automatically copy and paste the link inbetween the parentheses. 

8. Click save

9. Check out your page and see your new custom cursor!

That is it, not much code to make it work but depending on what you want it fo do, the configuration can be a bit tricky. Let us know how it goes. 

On 8/29/2022 at 1:58 PM, derricksrandomviews said:

I can help you with this. 

The cursor is a jpg or png file normally 30px by 30px in size. Stick this file on your desktop where it is easy to find.  You can host the image many places but normally you would upload it to your site's file manager. There are a number of ways to get to that. Easiest for me is  to go to design/ custom css and scroll down to manage custom files and then just above that open add images or fonts. Then navigate to your desktop and choose the png file. Save it. Then open css in a window, scroll down to the bottom of the frame and choose manage custom files again if it closed. Make sure you are at the bottom of the screen and click on the png file. The address and it is a long one with images.squarespace.cdn as its lead will copy to the window. Copy that and you should consider pasting it to a wordpad file or somewhere like that. Do not save the window that is open. Hit cancel. 

Now the question is do you want this cursor to be site wide or just on certain pages, which is the way I use my custom cursor as seen here?

https://myrandomviews.com/blog/lessons 

This may not work with all browsers, however here is the code. For one page or blog post use it in a code block on that page or post. For the whole blog put it in advanced page header injection. You have to change the cursor url to the one you copied or my cursor will show up.  

<p><style type="text/css">
body {
        cursor: url(https://static1.squarespace.com/static/552089d6e4b039659f7ab488/t/5ec460d21065fa53e6c04d5e/1589928146740/MY+RANDOM+VIEWSmouse+%282%29.png),  auto;
      }
  </style>

</p>

If the cursor is for the whole site here is the guide:

1. Create a graphic you’ll use for your cursor. Make sure it’s around 30px by 30px and in JPG or PNG format and put it on your desktop. 

2. Go to Design > Custom CSS 

3. Copy and past one of  the following  code snippets into Custom CSS:

For Cursor:

body {

margin: 0;

height: 100vh;

cursor: url(), auto;

}

For Cursor on Hover:

 a:hover{

cursor: url(), auto;

}

4. Below the Custom CSS section (scroll down a little) select Manage Custom Files

5. Upload your custom cursor files here by either uploading or drag and dropping. 

6. Scroll back up to where you pasted your code and click between the parentheses ( )

7. Then click the custom cursor file you just uploaded under Manage Custom Files. It should automatically copy and paste the link inbetween the parentheses. 

8. Click save

9. Check out your page and see your new custom cursor!

That is it, not much code to make it work but depending on what you want it fo do, the configuration can be a bit tricky. Let us know how it goes. 

this code does not work for me. the cursor flickers as seen in this video: 

here's my code: 

body {

margin: 0;

height: 100vh;

cursor: url(https://static1.squarespace.com/static/64dd43868b01661b82e0063c/t/668c9d1912157d7554d4053e/1720491289840/mouse.png), auto;

}

 a:hover{

cursor: url(https://static1.squarespace.com/static/64dd43868b01661b82e0063c/t/668c9d1908b1a378bc5b7c99/1720491289840/hand.png), auto;

}

That cursor file is too close to a Windows default cursor don't you think?

2 hours ago, derricksrandomviews said:

That cursor file is too close to a Windows default cursor don't you think?

it's supposed to look like windows 98

I don't know why it flickers. This is a good guide to load a custom cursor. 

https://by-crawford.squarespace.com/blog/how-to-add-a-custom-cursor-to-a-squarespace-website

3 minutes ago, derricksrandomviews said:

I don't know why it flickers. This is a good guide to load a custom cursor. 

https://by-crawford.squarespace.com/blog/how-to-add-a-custom-cursor-to-a-squarespace-website

I followed that guide, it results in the same flickering effect

Perhaps a different Win 98 cursor png will work? This is a site for old games and graphics I use quite a bit:

https://archive.org/download/windows-98-icons

11 minutes ago, derricksrandomviews said:

Perhaps a different Win 98 cursor png will work? This is a site for old games and graphics I use quite a bit:

https://archive.org/download/windows-98-icons

 

I made the pngs myself in photoshop. Any png results in the same flickering effect. 

Well, I think you tried your best. I am curious if any correct-sized png has the same effect. 

Here is my custom cursor which works great: I have a code block on a blog page where this cursor is used:

https://www.derricksrandomviews.com/blog/lessons  

15 hours ago, derricksrandomviews said:

Well, I think you tried your best. I am curious if any correct-sized png has the same effect. 

Here is my custom cursor which works great: I have a code block on a blog page where this cursor is used:

https://www.derricksrandomviews.com/blog/lessons  

 

this cursor does not load properly for me on your blog. Flickers in safari and does not load at all in chrome.