Use a custom cursor

Design help Custom code
1

Hiya, I’m trying to work out how to use a custom cursor site wide. I’ve never used custom code before so if someone could help me out i’d really appreciate it; I’ve uploaded the cursor I want to use into my site images, its called mycursor.gif
Thanks for your help!
Romily

Here is my public share link: LINK
(how to access public share link)

1 Like
2

Is it a cursor that is not listed in the cursor panel of Webflow? (just to check you realize this panel exist, at the end of the Style tab)
On what elements do you want the cursor to show? Links?

3

sorry for the slow reply - thanks for your help! I want to cursor to be the default cursor for the sight - its not a webflow cursor- its a silly flashing star cursor!! thanks for your help

4

Ok so:

  1. add your cursor image to Webflow, then add it to a page, anywhere, and publish the site. It has to be a PNG image of maximum 128 x 128 px

  2. browse the published site whre the cursor image is, right click on the cursor image and copy its link

  3. add the following custom code to your sites’ dashboard custom code tab, in the CSS region:

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

(replace “.yourclass” by the name of the element that should catch the cursor)

This should work when published.

If your file is a .ICO file, you have to host it somewhere else than Webflow, for example dropbox or any server.

2 Likes
5

thanks vincent. I’ve published the cursor and amended the URL part of the code but I don’t understand what you mean by the element that should catch the cursor?

also do i just paste the whole thing in here? sorry for being ignorant

1690×1362 58.3 KB

thanks!

6

My father says that as long as you realize that you don’t know, you’re safe :slight_smile: So no need to be sorry, don’t hesitate to ask!

On your site you have an elment that you want the cursor to appear when you hover it, right? And you gave this element a CLASS NAME, or selector:

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

So this class name you have to put in the code. For my example, it would be .square-cont (put dashes in spaces and eliminate all CAPS)

When you have your code srted, you WRAP it between <style> tags and add it exactly like this (so in the HEAD, between style tags):

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

7

Thanks Vincent that’s brilliant! I’ve managed to make it work for a specific element; is there a word to use if I want the cursor to be used for all elements? Thanks!

8

You mean at all time?

Probably body would work. Without a “.” in front of as it’s an HTML element. So like this:

body { ... }

As the cursor is always above the body, I don’t see why it wouldn’t work.

Also, a star would work too, it means “every character chain” ie: every word, or everything.

So like this:

* { ... }

edit: yep use it on the body element, seems to be the good practice.

1 Like
9

@vincent thank you for this. Love the forums to be able to go back and figure out how to do things done before.

1 Like
10

Thank you so much for the detailed advice! You are always so helpful.
this works well.

However, when the cursor hovers on links, it defaults to the hand cursor. To be expected I suppose!
Could you please further explain how to define a custom cursor image for each state of the cursor?

I am trying to have a static custom cursor site wide, which then becomes an animated cursor when it is hovered over a link element.
Could I achieve this by uploading a gif animation as the hover-over state of my cursor?

11

I guess the link element default is superior to what you’ve been declaring so far.

So declare a cursor with custom code, on the link element specifically:

a { ... }

1 Like
12

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:

13

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;
}

14

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.

15

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

17

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>
18

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

19

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.

20

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.