How can I customize my mouse cursor?

Ask the community
,
1

Hi all! I know nothing about coding and designed a custom mouse cursor that I’m trying to put on my wix website. I found this article: https://www.wix.com/velo/forum/community-discussion/custom-mouse-pointer but had no luck in making it work. Anyone able to give me a bit of a tutorial on how to set this up? It’d mean a ton - thanks!

2

I also found this: https://www.wix.com/velo/forum/community-discussion/custom-cursor-with-custom-elements-solved and plugged in the code in the last comment but it didn’t do anything. I may be missing basic steps with coding and am unsure of what to do - thanks in advance!

3

I’m needing this answered too! All the above didn’t work for me ethier!

4

This feature is currently on our roadmap. You can subscribe to the request here to get a notification when it releases: https://www.wix.com/velo/requested-feature/custom-cursor

5

so your saying that its pointless to even try because everyone at wix is too lazy to add this

6

There 4 options:

  1. If this style is for the whole page, you can add the css to the custom code section (Dashboard > settings).
  2. If it’s a text element, you can use the html property like this:
$w.onReady(() => {
$w('#text1').html = `<p style="cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'),auto;font-size:17px";>SOME TEXT</p>`;
})
  1. For other elements - you can create the element in an iframe with CSS.
  2. For other elements you can create the element in a custom element.

Option 1 and 4 are relevant to premium accounts.
Option 2 will work on live sites only.

7

Hello everyone. have managed to do this using code in the header. But I can’t get the pointer to be custom as well. Does anyone know if this can be done via code in the header? Thanks!

8

Yes. But put the code in the masterPage.js file.

9

I dunno how to add it to masterpage lol

10

Hello everyone,

I have tried to roll over the home page of my Wix website but I can’t do it. I have tried to do it with some tricks that have been proposed to me but I have not been able to… I would like to know if someone could explain me how to do it?

11

I created a code which allows you to achieve the solution.

Code Is placed in the custom code section of the website.

Feel free to use it, you can replace the URL with any other you wish. Please note that I used a PNG image with 32x32px size and uploaded it in the media manager of my website

<script>
document.addEventListener('DOMContentLoaded', function() {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = 'body { cursor: url("https://static.wixstatic.com/media/c21d41_e5c64fc444cb423191dd83bc03b9badd~mv2.png"), auto; }';
    document.head.appendChild(style);
});
</script>

image