Use a custom cursor

Thank you very much for your reply.

If I am understanding you correctly, I must follow your initial instructions on how to set a custom cursor for a specific element.
However, I want this to happen for all the clickable links in my site, and there is many.
Must I do it individually for each one? That seems counter intuitive. Isn’t there a more ‘catch-all’ way of doing it?
Like somehow overriding the default hover cursor image?

I apologise if I am asking a bothersome question :cold_sweat:

Yes, by doing what I propose above. Links are “a” elements. So if you declare a custom cursor for “a”, all links will be affected.

a {
cursor: url(‘URLOFTHECURSORHERE’), default;
}

oh dear.
I am so sorry, I understand you now. I am a bit clueless still…
I will try this.

Thank you so much, again.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

I’m using it in action on my CMS demo site.

Check http://candyshop.webflow.io/ and hover the album covers.

Note that even if you use the code in a custom code component inside of the page, you will only see the effects (the cursor) on the published site.

Here is the exact code I’m using:

<style>
.mic-cursor {
cursor: url('https://daks2k3a4ib2z.cloudfront.net/myfile.png'), default;
}
</style>

Hi, I feel like I’m doing this to the T, but still not able to get it to work. The cursor image just stays at the bottom of the page, but never activates the cursor code. Also, do we need to set the image to “no display” after it works, or does the code take care of that? Here’s my link:

https://preview.webflow.com/preview/wayside?preview=a13905fa941c39f55b4a3c8b4ef499cc

EDIT: I should note that this is on the “Old Home” page

Where’s your custom code for the custom cursor?

Your image doesn’t need to be in the page, it just need to be hosted somewhere, and you can use Webflow to host it.

  1. You add the image to webflow and you go into the assets manager to retrieve its absolute link, like this:

http://vincent.polenordstudio.fr/snap/t75vi.jpg

(For instance, the address of your image is: https://uploads-ssl.webflow.com/5ab4177da6f2816472ea49ed/5acd2d03731dc228e4da8bab_Cursor.svg )

  1. Then you add a custom code element in the page, and you paste the following code:

    <style> .mic-cursor { cursor: url('https://daks2k3a4ib2z.cloudfront.net/myfile.png'), default; } </style>

  2. And in the code you replace the address (https://daks2k3a4ib2z.cloudfront.net/myfile.png) by the absolute link to your image that you copied before.

Hi, Vincent–

Thanks for the quick response! I had the code in the custom code field on the project settings. I just tried adding the HTML element with the above code and image link and still a no-go. I have it pointing to the .section .hero subclass.

You need to do 2 things:

  1. change in the code to .section.hero, not .section .hero
  2. use a PNG image of maximum 128 x 128 px
1 Like

Yes! Did not realize there was a maximum pixel dimension. Thanks!

1 Like

I can’t seem to make this work either. Does the code go in the HEAD or BODY part of the CUSTOM CODE when you click the setting icon on a page?

Or on the same place on project settings?

Or, do you have to use an embed HTML element ON each page you want it (or in my symbol footer on all pages for instance?)

Edit:

Okay putting in footer worked however two things. Button elements don’t show the cursor (although my links, and image link boxes do)

And the one for the normal cursor with body is not working. here’s the code I am using


<style>
body {
cursor: url('http://uploads.webflow.com/5adac59efcceb93375cf99b9/5ae4e1a90a0d584c14828857_CursorNormal.png'), default;
}
  
a {
cursor: url('http://uploads.webflow.com/5adac59efcceb93375cf99b9/5ae4e1a9e789f44530dc99ff_CursorLink.png'), default;
}
</style>

Edit:

Turns out it is working, but it doesn’t work on my main page for some reason…only my other pages. Any idea why?

https://preview.webflow.com/preview/legends-of-ultima-static?preview=fe6c612a3fef1aa47ecc94a29a451c3f

Hello,

how can a SVG file be used, do you need to define the height and width, if yes, how?
I m using a PNG already, but can t get it to become hidpi, looks to pixelated.

Let me know
pierre.

Hello Vincent,

Thanks for your help.
However after doing it, I get an error 404 in the browser console.

Webflow is rendering the path to my image as such:

http://net-arts.webflow.io/‘https://uploads-ssl.webflow.com/5bc3aab5ca643aaff82ee180/5bc5d6e6ccf666602f0a1042_cursor-xs.png’

What do you suggest ?

what about .cur file?? please let me know…Thanks

As scalable as it is, SVG contains its own viewport dimensions to be used as a base.

Modern methods involve more modern formats but why don’t you test it with .cur?

Hey Vincent - do you know how to “center” a custom cursor? For example, if I implement a small circle as a custom cursor, is there a way to position it in a way that puts the mouse click point in the center of that circle?

Thank you for everything you do here btw!

Thanks :slight_smile:

Click point is top left by default but CSS3 allows you to change it.

https://www.w3.org/TR/css-ui-3/#cursor

You’ll define how many pixels from the left and from the top you want to move the midpoint.

As in cursor: url(mycur.cur) 6 6, auto;

You have to check if IE supports it now. if it doesn’t, define a .cur cursor for IE and use a cur tool to define the midpoint within the .cur file.

Also you NEED to read this :slight_smile: Dram's guide to custom cursors in Webflow