CALLING ALL CURSOR pros! Need help implementing and effect.

Store Design
, , ,
1

So i have a custom cursor on my website. I used an app (Kaching Cursor) to display my custom cursors I designed. Im wanting the inverted effect when hovering any darker and lighter objects throughout my website. Ive tried a few ways and cant get this code to work -

<style>
/* App's existing cursor code */
* {
   cursor: inherit !important;
}

body, label {
   cursor: -webkit-image-set(url("https://d7agjysiompp7.cloudfront.net/wnp49pk4xjgi5fyl6cst2xy48d1e") 3x), auto !important;
   cursor: image-set("https://d7agjysiompp7.cloudfront.net/wnp49pk4xjgi5fyl6cst2xy48d1e" 3x), auto !important;
}

a:hover, textarea, input, select, button, summary {
   cursor: -webkit-image-set(url("https://d7agjysiompp7.cloudfront.net/vuj692geq9l2143vl756lfkk377p") 3x), auto !important;
   cursor: image-set("https://d7agjysiompp7.cloudfront.net/vuj692geq9l2143vl756lfkk377p") 3x), auto !important;
}

/* Automatically detect darker backgrounds and apply inverted cursor */
body, label, a, button, input, select, textarea {
   cursor: url('https://cdn.shopify.com/s/files/1/0564/3046/1030/files/Cursor.png') 64 64, auto !important; /* Default normal cursor */
}

body.dark-bg, .dark-bg, body[data-theme="dark"], .section-dark, .black-bg {
    cursor: url('https://cdn.shopify.com/s/files/1/0564/3046/1030/files/Inverted_Cursor.png') 64 64, auto !important; /* Inverted cursor for dark backgrounds */
}

/* Apply the inverted cursor based on common classes or background detection */
[data-theme="dark"], [class*="dark"], [style*="background-color: #000"], [style*="background-color: #111"], [style*="background-color: #222"], [style*="background-color: #333"] {
   cursor: url('https://cdn.shopify.com/s/files/1/0564/3046/1030/files/Inverted_Cursor.png') 64 64, auto !important; /* Adjust cursor for dark backgrounds */
}
</style>

IS there anyone who knows how to get this code to work?

1 Like
2

Image Size Issue

Ensure that the cursor image size is appropriate. Browser cursors should ideally not exceed 32x32 pixels. If the image is too large, the browser might ignore the cursor change. Try using smaller images, like 32x32.

3

CustomService_0-1728524409271.png
CustomService_0-1728524409271.png727×179 20.8 KB

4

I dont think thats the problem at all. that shopify app I’m using displays it fine on all browsers. You can see here - www.howahoriginals.com. I just cant apply the invert. AI also has tried lol. I know it cant be done(hence the App displays it at 129px no problem), just have to find the right person who knows how to.

5
6

CustomService_0-1728527103914.png
CustomService_0-1728527103914.png1401×252 10.4 KB

This image URL is incorrect; please change it to the correct image URL.

7

What do you mean those 2 urls are wrong? that’s straight from my content files. copied paste. I have no other URLs for the images.