Custom Cursor Pointer
-
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;
}Thanks a lot already for any help!
Best
Laurence -
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
-
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
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 -
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
-
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
@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 -
-
-
-
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 -
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
-
I have the same issue as above and tried a lot of different sizes which doesn't fix the problem. Did you guys succeed?
-
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
-
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;
} -
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;
} -
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
-
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 :) -
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?
-
-
can u use a smaller image, try that please

your image is 256 x 256 its too big i think
-
just use the dot as the image. it will be like 10 x 10 pixels
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better π
Register Login