Jump to content

Custom mouse cursor

Recommended Posts

Site URL: https://plum-octahedron-jxxd.squarespace.com/

Hi everyone,

I am creating a new website via Squarespace platform. The template is Heights.
https://plum-octahedron-jxxd.squarespace.com/
Password to access is: 1234

I would like to custom the mouse cursor and try for example to make a test the cursor of this site or similar:
https://www.hellodude.it/

 

 


What code should I reuse for that?

Thanks a lot for your kind help!

 

 

Link to comment
  • Replies 8
  • Views 3.3k
  • Created
  • Last Reply

First you upload your cursor image as a png or cur file. You paste the following css code into the page advanced settings for the page you want to use the cursor, but you need to copy  the url of the cursor file into the code string where you see URL of cursor goes here, remove those words of course.  

<style type="text/css">
  body, html {
        cursor:
 url of cursor file goes here      }
  </style>

For Site wide custom cursor, post in design advanced custom css without the <style> head and foot. 

I am doing this for one page on my site here: https://www.myrandomviews.com/views-images 

Does not work with MS edge using png file , has to be a cur file. 

The cusor image, after upload,  that you paste  will be a squarespace static 1 file with a very long id number, just to let you know. 

To upload a file do the following:

 Highlight any text and the editor comes up

In the link editor, click the gear icon in the URL field.

  1. Click the File tab.
  2. upload your cursor file. All files uploaded to your site appear above the Upload File area.
  3. Click the file in the list. A checkmark appears beside the selected file.
  4. Click Save.
  5. go back to the linked text copy the URL
  6. you now have the cursor address to paste into the code I pasted here. I would use wordpad to copy it all before, make sure it looks right,  putting on the site, The cur url will work in an address bar and pull up the image, good way to make sure that part works as well beforehand.

 

Link to comment
  • 7 months later...

Archived

This topic is now archived and is closed to further replies.

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