Streaming live at 10am (PST)

How can I add a customized cursor to my Webflow site


#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


Different cursors in one page
#2

Hi @Arno,

Based on this example ( http://jsfiddle.net/wNKcU/5/ ), it should work. Just make sure that URL to cursor image is working :slightly_smiling:

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

:slightly_smiling: 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?


#9