Custom Cursor Pointer

Silviaperez

Hi, how are you?
I would like to know How could I introduce my own custom cursor pointer.
I've try with some plugins as "Cursor Control" but it sees it's no working with Lay Theme.
I would like to upload my own arrow image or apply one in the same text style as the rest of the arrows i´m using for the rest of the website.

arminunruh

Hey you can do that by using css. Just upload an image to your media library (try a small image). Then click on that file in the media library to open the infos. In there you will find a field where you see the URL of that image. Copy the url, then use that url for your css.

body {
  cursor: url(http://yoururltocursor.com/hey.jpg) 4 12, auto;
}

https://developer.mozilla.org/en/docs/Web/CSS/cursor

"4 and 12" are pixel coordinates please read the explanation at the link above. 4 should be half of the width of your cursor image and 12 should be half of the height of your cursor image.

daniel

@arminunruh
hey armin, my custom arrows in fullscreen slider look blurry when I see them on my retina screen: how can I make my custom mouse cursor (up/down) retina ready? in fullscreen slider there is no way to upload a .svg file or a second pixel image with 2x the size.

arminunruh

hey daniel!
At the moment retina cursors are not supported. I wrote it down, going to work on it one day

daniel

thanks armin.

dustin

@arminunruh hey i tried this and its working,
but how can I keep the cursor visible when it hovers over a "active" project thumbnail?
because now it's turning into the standard white glove when it moves over it. i want the cursor to stay permanently as a red dot.

www.dustinthierry.com

cheers

mariusjopen

Hi dustin,

you need to play a bit with the Custom CSS:

This here for example works:

a {
    cursor: url(http://dustinthierry.com/wp-content/uploads/2017/07/red-dot.png) 4 12, auto !important;
}

Then you might look for other classes where the cursor changes and apply the CSS to them.

I hope I could help!

Marius

Jian Haake

Hi there!

I am having some trouble with my custom cursor …

This thread was super helpful to apply both an individual image for the standard cursor (small blue heart) and an other image for the hover effect (bigger blue dot).
When loading the website it works just how I want it, but after a while (and I cannot connect it to any certain thing) it just stops changing. Sometimes it permanently stays as the "standard" blue heart, sometimes as the "hover" blue dot.

This is what my css looks like at the moment:

body {
    cursor:
        url(https://lovebrut.club/wp-content/uploads/2020/10/favicon_blau.png) 4 12, auto;
}

a {
    cursor:
    url(https://lovebrut.club/wp-content/uploads/2020/10/spray_blau-e1602139531341.png) 50 50, auto !important;
}

www.lovebrut.club

Hope you can help!

cheers

PS: I have already tried a smaller image for the hover blue dot since this one is quite big (100 x 100 px). It didn't make a difference.

Richard K

Dear @Jian-Haake

Creative use of the Cursor functions, cool! :)

When trying to recreate the issue, the cursor is always changing back and forth as intended, i cant get it to stay stuck on one or the other.

Is the "!important" necessary for your code?
The use of this is to over-ride other code and at first thought of solutions i would think that this could be the issue.

Let me know and best wishes
Richard