How can I add a customized cursor to my Webflow site

Design help Custom code
1

Hello there,

I know that I can easily change the cursor with the cursor panel, but I was wondering if there is an easy way to change it with an icon I created?

Would this code works if I put it in the header section?

 <style>
    body {
       cursor: url(https:studionora.ca/webElts/Cursor-Test.png), pointer;
    }
</style>

Thanks for your advice

2

Hi @Arno,

Based on this example ( Edit fiddle - JSFiddle - Code Playground ), it should work. Just make sure that URL to cursor image is working :slight_smile:

Regards,
Anna

3

Hello @sabanna.

Thanks for your help. Unfortunately, it doesn’t seem to work :frowning:

Best,

4

Try to add this code snippet to Embed code widget on the page

5

Thanks @sabanna.

I added the code to the header section and it works. I might have added wrong the first time. :blush:

So if I’d like to change the cursor for an action, I have to write the code for every action I’d like to modify, but would I need to do it for every class, or can I do it one time for all? ( I hope I’m clear enough :wink:

Thanks for your advice.

6

:slight_smile: I am glad to hear everything works now

If you want to set different cursor when you hover some objects, for example, then I think you will have to point that objects class in the code.

7

Ok. Thank you. I’m gonna try that.

8

Does anyone have extra tips regarding cursor customization?