Jump to content

how to create custom cursor ?

Recommended Posts

  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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. 

Edited by derricksrandomviews
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.