Streaming live at 10am (PST)

Use a custom cursor


#21

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

#22

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


#23

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


#24

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.


#25

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 ?


#26

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


#27

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


#28

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


#29

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!


#30

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.


#31

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


#32

Dude it worked! Thank you!


#33

Thanks for being so helpful on all this Vincent!

Is there an easy way using, the same method, to have a different custom .png for the hovering link/button ‘pointer’ cursor, site wide?