Use a custom cursor

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

Dude it worked! Thank you!

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?

Hi Vincent,

Thanks for all the info, very helpful so far. If you don’t mind, I have another question.

After trying a couple of times I managed to get the custom cursor.
But it doesn’t work when I point to a CMS item. I would like to use custom cursors on the left and right arrows of a slider. I have a CMS collection list with portfolio projects, and each item is a slider.

Any idea if this is possible, what I’m doing wrong?

Thanks!

Hi All,

My first ever Webflow forum post - HOW EXCITING!

I’m following everything A-okay after finally finding the right forum post that relates to the issues I’m having!

However, I still have one unanswered question!

I’m currently using the following code within my ‘Custom Code’ tab on project settings…

a, body, {
cursor: url(“https://uploads-ssl.webflow.com/5f86f7ef0cf1d18443505856/5fb562af2c983d4ca6951995_ying%20yang%20cursor%20100px%20X%20100px.png”), default;
}

and it’s working fine for my custom png mouse on all body and link areas of my site however I’m looking for a way to override absolutely everything.

At the moment if you move the mouse between a body section on the left and a collection wrapper on the right (with links) then it flicks between the default cursor and my custom cursor.

My top and bottom question is… What code can I use as well of/instead of ‘a’ and ‘body’ to make the custom cursor stay for the entire site no matter what it’s hovering over!?

PLEASE help if you know how to solve this. I’m not going to send a read-only link for my site because surely it should be the same for everything single scenario.

Thanks in advance!!

@vincent p.s. I really appreciate all your help by the way Vincent, life saver!!!

What code can I use as well of/instead of ‘a’ and ‘body’ to make the custom cursor stay for the entire site no matter what it’s hovering over!?

*

1 Like

@vincent I’m confused? It doesn’t look as though you have replied to my question but just put an ‘*’, is there something I’m missing?

Sorry it wasn’t clear. I just enjoyed providing a 1 character answer :smiley:

The * is the character you need to use.

In computer science, * means “any string of character”.

* { foo:bar } targets everything. It’s the highest target possible in CSS.
Then you have html { foo:bar }, then body { foo:bar }

(foo bar are words used in documentation to replace terms with generic something, it could be “blabla”)

@vincent That makes more sense now! Thanks for getting back to me again, it’s really appreictaed!

For some reason the ‘*’ isn’t working? It’s not turning green when I enter it into the custom code text field.

‘html’ & ‘body’ both turn green/work but for some reason, the ‘*’ isn’t working? Have you any idea why this might be?

The cursor is working a bit better with ‘html’ but still intermittently flickers between certain different elements/ sections?

If anyone could help me it would be a massive help, here is a read-only link to my project just in case there is something I’m really missing - not sure if you can see custom code with this link or not?

https://preview.webflow.com/preview/pawaspeedsports?utm_medium=preview_link&utm_source=designer&utm_content=pawaspeedsports&preview=24810b818f8ffa8d9b873c95dbde3aa9&mode=preview

Thanks again in advance!!

HI vincent, Ihad used your method earlier to change to custom cursor but now I want to remove it and I cant find the custom code in the project settings. How do i remove it or bring it back to normal cursor?