Hello, I’m trying to create a custom cursor with the new customizable element feature. The code ran smoothly, but the image is not found, and the cursor is replaced only by the secondary mandatory option that I defined in the style. I have already tested the change on the w3schools website and it works normally. t is an image present in the media library, inclusive.
const createStyle = () => {
const styleElement = document.createElement( ‘style’ );
styleElement.innerHTML = #comp-kjh39u74, #comp-kjh39u74 img, #comp-kjh39u74 svg, #comp-kjh39u74 button, #comp-kjh39u74 h2, #comp-kjh39u74 p { cursor: crosshair; // already tested without this line cursor: url(IMAGE_URL) 25 25 , crosshair; // the secondary option after comma is mandatory } ; return styleElement;
};
class customC rosshair extends HTMLElement {
constructor() { super ();
console.log(DEBUG_TEXT); // This text appears on the console (as it should) but right after it appears the warning of the image not found
}
It’s not a good idea to try to apply your own style on Wix element IDs.
First of all, Wix can change it whenever they need and it will break your code.
and second, your style might be overridden by their own style (for example if they used “!important” or if they load some styling dynamically.
What you should do is to create your own button (and other elements) using Custom element and apply your styling to these elements.
Okay, thanks for the tip. About Wix breaking code with changes is nothing new for those who develop on this platform. As for the scope of the style, I will keep it safe with the body tag. About the explicit error in addressing the image, do you have any tips on how to resolve it and are you willing to respond?
@jonatandor35 Do you dedicate your time to reply crudely but don’t even post the link? The time you spent typing “(or weeks)” for example was longer than a CTRL + C and CTRL + V on the link.
Well, I had to give up the constant and write the image address directly in the style code. I also included some tags in addition to the body to overlay the cursor on some clickable elements and it met what I needed.
I’ve tried to apply the code you gave in a different forum (I pasted it below for reference) about the custom cursors but it would not work for me. I saw that you said to add the second code to the end if it didn’t work… I did both.
I got the image I want for my cursor (sparkle emoji) was by adding a new page to my website and making that page private and copying the address directly from the image and adding that to the code you provided. Nada.
Could you help me further? Thank you for taking time out!
For reference and others the code I copied from another forum:
J.D.: "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: