Custom Cursor Pointer

[Richard]

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

[Laurence]

Hello

I followed this thread as well to create a standard custom cursor that stays both when being the arrow and when hovering over an image. Somehow it does not work out that my picture (even though its a small one) appears as the cursor.

I use the following code at the moment:

body {
cursor:
url(http://planktonbasel.ch/wp-content/uploads/2021/04/PLG_Identity_CURSOR_0421_LF03.png) 4 12, auto;
}

www.planktonbasel.ch

Thanks a lot already for any help!
Best
Laurence

[Laurence]

The custom cursor still doesn't work – A tip would be much appreciated, thanks beforehand!

[Richard]

Dear @Laurence

Apologies that there has been delay in answering.

Could you please, so that i may understand better rephrase:

"that stays both when being the arrow and when hovering over an image."

This would be appreciated 🌻

---

Have a wonderful day Laurence & thank you for using Laytheme

Sincerely

Richard

[Laurence]

Dear @Richard

Sorry for my late reply, dove into other projects the last two weeks..
And Thanks for your answer!
Yeah, can understand that this formulation is a bit confusing. What I meant was that the cursor stays always in the same shape (a little plankton), both when moving over a link or an image (where normally the cursor changes from an arrow shape to a little hand with a pointed finger)
Hope that explains it a bit better..

Thanks beforehand for your help!

I enjoy very much to work with LayTheme!
Laurence

[Richard]

Dear Laurence

@Laurence

Thank you for clarifying 🌝

---

If needed, you can specify your custom cursor (little plankton) to work on links <a> and images <img>.

Please apply the following code:

body, a, img {
cursor:
url(http://planktonbasel.ch/wp-content/uploads/2021/04/PLG_Identity_CURSOR_0421_LF03.png) 4 12, auto;
}

To:

Lay Options ➡️ Custom CSS & HTML ➡️ Custom CSS

---

Best wishes Laurence, hope this helps!

Sincerely

Richard

[Laurence]

@Richard said in Custom Cursor Pointer:

body, a, img {
cursor:
url(http://planktonbasel.ch/wp-content/uploads/2021/04/PLG_Identity_CURSOR_0421_LF03.png) 4 12, auto;
}

Thank you @Richard!
Just tried it but strangely enough it doesn't work – the cursor does not change into the image (little plankton) at all. I don't know if I do a basic mistake when applying the code or something is wrong with the picture..

Could I maybe send you a PM with the Wordpress Password so you can have a closer look?

Thanks already!
Have a good day
Laurence

[Richard]

Dear Laurence

@Laurence

Of course ✨
Send me a message via 'chats' and let's take a look! 🌝

---

Best wishes

Richard

[FW]

Hey I do have the same issue.
I tried to have an custom cursor before in lay theme and it did work.
But right now it doesnt work.
Any idea?

[Richard]

Dear @FW

Could you please post a link to the website with the Custom Cursor issue?

---

Talk soon and best wishes 🌝

Richard

[iinnas]

Hi guys
I'm trying to introduce my own custom cursor pointer.
I've try the css from above:

body {
cursor: url(https://werneramann.com/wa2021/wp-content/uploads/2021/06/favicon-werner-amann.png) 4 12, auto;
}

But the cursor doesn't show up. I'm not sure if I make a mistake by uploading the wrong image file. I use the same image as for my favicon.

Website is: https://werneramann.com/wa2021/storiesandportrait/

Hope you can help!

cheers
Annika

[Richard]

Dear Anikka

@iinnas

I believe you are unable to see the cursor because the image size is too big . 🎆
Currently your png is 400px by 400px. I think the requirements are 36px by 36px.

Please reduce the size and test again if possible.

---

Hope this helps and best wishes Anikka 🌝

Richard

[carlastreckwall]

I have the same issue as above and tried a lot of different sizes which doesn't fix the problem. Did you guys succeed?

[Richard]

Dear @carlastreckwall

Are you able to post a link to your website with the custom cursor in question? A closer inspection may bring a solution 🔍

---

Best wishes & have a wonderful day 🌼

Richard

[fabiocs]

I would like to make my custom a cursor bigger that 36px x 36px, I read that is possible using .cur file, but this is not supported on wordpress.

Is there a way for this to work ???

website:
http://www.pazulloa.com/

code used:
body {
cursor: url("http://www.pazulloa.com/wp-content/uploads/2021/08/Estrella-cursor.png"), auto;
}
a { cursor: url("http://www.pazulloa.com/wp-content/uploads/2021/08/Estrella-cursor-hoover.png"), auto;
}

[djourina]

Re: Custom Cursor Pointer - png?

Hi all,
I am trying to create a custom cursor that looks and behaves like a light source. Until now I am straggling to get the image as png working. Any suggestions?

Code I used:

body, a, img {
cursor: url (https:/link and name.png) 4 12, auto;
}

[Richard]

Dear @djourina

Maybe this is it: when calling a cursor source from a URL you must have it within parentheses ' ' :

E.g:

cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg');

https://stackoverflow.com/questions/18551277/using-external-images-for-css-custom-cursors

---

Best wishes

Richard

[kylie_g]

Hey, the solutions in the forum haven't worked for me yet, so i am asking individually:
I want to apply a custom curser, which does not work on linked imaged (the little white hand cursor keeps appearing).
It bothers me most on my landing page with a carousel, all the images have links.

my custom css:

body, a, img {
cursor: url(https://norakeilig.com/wp-content/uploads/2023/11/cursi-1-e1701094228969.png), pointer;
}

Can someone help?
Super happy with laytheme besides that :)

[arminunruh]

body, a, img {
cursor: url(https://norakeilig.com/wp-content/uploads/2023/11/cursi-1-e1701094228969.png), pointer !important;
}

try with !important; does it work?

[kylie_g]

Thank you Armin, unfortunately, it doesn't work at all anymore.
If I set a cursor in Customize or in the CSS - I only see the normal hand now.
Some days ago I had a customized curser at least in some parts of the page. what went wrong?