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
vincent
(Vincent Bidaux)
July 23, 2016, 12:53pm
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;
}
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.
system
(system)
Closed
September 22, 2016, 10:02am
15
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
vincent
(Vincent Bidaux)
March 16, 2018, 11:02am
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>
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
vincent
(Vincent Bidaux)
April 21, 2018, 11:39am
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.
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
)
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>
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.
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.
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
PierreF
(PierreFort)
July 12, 2018, 2:49pm
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.
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 ?
g2gm
(G2gm)
January 29, 2019, 4:22am
26
what about .cur file?? please let me know…Thanks
vincent
(Vincent Bidaux)
January 29, 2019, 9:52am
27
As scalable as it is, SVG contains its own viewport dimensions to be used as a base.
vincent
(Vincent Bidaux)
January 29, 2019, 9:53am
28
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!
vincent
(Vincent Bidaux)
February 1, 2019, 8:58am
30
Thanks
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.
vincent
(Vincent Bidaux)
February 1, 2019, 8:58am
31