Jump to content

How do I create custom cursor with png?

Recommended Posts

I want to add a custom cursor to my site, I followed the instructions on previous forums but it doesn't seem to be working for me.

I navigate to: DESIGN>CUSTOM CSS>MANAGE CUSTOM FILES 

<style type="text/css">
  body, html {
        cursor:https://static1.squarespace.com/static/5d794acf629a072d75bbfffd/t/5ff5e3a90486da2d7a89bf21/1609950121967/SHAKERA+ALEXIS+LOGO+copy.png
       }
  </style>

 

is anyone able to clarify what i've done wrong here? I'm new to this so any help would be appreciated

Thank you!

Link to comment
  • Replies 9
  • Views 2.1k
  • Created
  • Last Reply

If using  design custom css the <style> command is not used at either end. 

I created one for one page by putting it in advanced header code injection for that page:

<style>

type="text/css">
a:hover {
        cursor: url (put url here .png),  auto;
      }<
  </style>

For another one, I used a custom cursor for  all pages. I put this in design custom css:

body {
         cursor: url  ( put url here.png), default ;
     }

For both sites (7.0) I uploaded the cursor to  custom css files first of course.  I grabbed the url address from there. FYI the custom cursor will not work with a png file in MS edge. 

Link to comment
33 minutes ago, derricksrandomviews said:

If using  design custom css the <style> command is not used at either end. 

I created one for one page by putting it in advanced header code injection for that page:

<style>

type="text/css">
a:hover {
        cursor: url (put url here .png),  auto;
      }<
  </style>

For another one, I used a custom cursor for  all pages. I put this in design custom css:

body {
         cursor: url  ( put url here.png), default ;
     }

For both sites (7.0) I uploaded the cursor to  custom css files first of course.  I grabbed the url address from there. FYI the custom cursor will not work with a png file in MS edge. 

Ok thanks for this!

I have retried it but still no luck, have I pasted the information in correctly?

Screenshot 2021-01-06 at 17.08.08.png

Link to comment
1 minute ago, shakeraalexis said:

I have compressed it to 2kb and uploaded it. should the cursor change instantly?

My largest is 2.2 kbs in size. Lets start from the beginning. Remove all code you have put in for this and lets use instructions that  I know works: 

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. Make sure spaces all look like the above. 

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

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.