Is it possible to have a custom pointer in my website? if yes, how can I achieve that? ty
3 Likes
If you have a premium account, you can add a CSS snippet to the tracing & analytic section and set it from there.
Another approach (which also requires a premium domain-connected site), is to use custom elements. Custom elements give you access to the DOM, which gives you several options on how to manipulate the cursor. Based on your exact need, you could change it for the whole document, or expose some function in the custom element and use your Corvid code to call it whenever you need the cursor to change.
@uval-blumenfeld-wix , and maybe it’s time to implement it as a Corvid element property. (It shouldn’t be too hard to develop. Am I wrong?)
@uval-blumenfeld-wix it would be great to implement this as a Corvid element property 
Is there a way to make this feature free?
Maybe it’ll be implemented into Corvid one day.
But currently the only way to have it for free is by creating a specific element (such as a button) in an htmlComponent (iframe) set the css in the iframe code and post the necessary data from the iframe to the parent page and vice versa.
Anybody that knows how to do this? I’ll be happy to working together for a client’s website!
Hi -
I have a premium account and have read the new update with CORVID and the ability to change attributes on your site, like a custom cursor, using the EMBED section. However, I cannot figure out what code to use / where to put it.
Basically, I am just trying to change my cursor from the arrow to a custom image. I have the image, but I am not sure where to upload to create the URL for the image. Even once I figure that out, I am not sure how to target the cursor correctly and what code I put in to change the cursor.
anyone know how to do this?
-D
You should add more details. For example - where do you want it? Do you want to change it for the entire site? for specific pages? for specific elements on a specific page?
Hi J.D. ,
I would like it to be just my general cursor, on my page. So I guess on the entire website in terms of where.
I just basically want to draw a cartoon (I’m an artist) and have that cartoon become my cursor throughout the website, instead of the typical arrow.
@drewtucker1234 so first you should either load your image to Wix (via the media manager) or get an external URL for this image:
Then go to the site dashboard > settings > custom code > Add Custom Code
And try to add this to the HEAD part and apply to all pages:
<style>
body {
cursor:url(https://my-image-url-address.png), auto !important;
}
</style>
I haven’t tried it and it may not work (it might be overridden by Wix styling). If it does not work, you can try to add the following to the end of the BODY part:
<script>
document.body.style.cursor = "url(https://my-image-url-address.png), auto";
</script>
@jonatandor35 okay SO somewhat success. The code I inserted into the HEAD did work. However, whenever my image cursor scrolls over a link, it changes back to the arrow, and is a bit glitchy.
any thoughts on how to make it just the image cursor all the time?
thanks!
D
@drewtucker1234 Try to add the script (see above) to the end of the body.
Hey @jonatandor35 I have tried this and it doesn’t seem to work for me? Do you know if the image has to be a specific type ie png, jpeg? Thanks xxxx
You can use png and jpg afaik. You can also use svg path.
And you can see an example here:
https://codepen.io/geoffgraham/pen/qZjwGe
@jonatandor35 hay! if I want to change the pointer only at homepage . where do I put the code, and how I input the image in the code?
many thanks!
@hilaccc Create a custom code (dashboard > settings > custom code) and set it to homepage only
@jonatandor35 Thanks! This solution worked for a client of mine. Except for one thing [Edit: now RESOLVED, see below). The cursor is very large, and uploading a lower resolution png doesn’t seem to help.
Any idea why that might be or a suggestion on how to make the cursor smaller?
Edit: I resolved this by converting the png image to a .ico one.
You can also just resize the image.
“…you should limit yourself to the size 32×32 for maximum compatibility”. See:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property