• Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

Custom Cursor Pointer

Scheduled Pinned Locked Moved Feedback
cursorpointerimagecustomarrow
26 Posts 14 Posters 5.0k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    Silviaperez
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
  • arminunruhA Offline
    arminunruhA Offline
    arminunruh Global Moderator
    wrote on last edited by arminunruh
    #2

    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.

    D dustinD 2 Replies Last reply
    1
  • D Offline
    D Offline
    daniel
    replied to arminunruh on last edited by
    #3

    @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.

    1 Reply Last reply
    0
  • arminunruhA Offline
    arminunruhA Offline
    arminunruh Global Moderator
    wrote on last edited by
    #4

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

    1 Reply Last reply
    0
  • D Offline
    D Offline
    daniel
    wrote on last edited by
    #5

    thanks armin.

    1 Reply Last reply
    0
  • dustinD Offline
    dustinD Offline
    dustin
    replied to arminunruh on last edited by
    #6

    @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

    1 Reply Last reply
    0
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen Global Moderator
    wrote on last edited by
    #7

    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

    www.mariusjopen.world

    1 Reply Last reply
    0
  • J Offline
    J Offline
    Jian Haake
    wrote on last edited by
    #8

    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.

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by Richard
    #9

    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

    1 Reply Last reply
    0
  • L Offline
    L Offline
    Laurence
    wrote on last edited by
    #10

    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

    L 1 Reply Last reply
    0
  • L Offline
    L Offline
    Laurence
    replied to Laurence on last edited by
    #11

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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by Richard
    #12

    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
    L 1 Reply Last reply
    0
  • L Offline
    L Offline
    Laurence
    replied to Richard on last edited by
    #13

    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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #14

    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
    L 1 Reply Last reply
    0
  • L Offline
    L Offline
    Laurence
    replied to Richard on last edited by
    #15

    @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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #16

    Dear Laurence

    @Laurence

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


    Best wishes
    Richard
    1 Reply Last reply
    0
  • FWF Offline
    FWF Offline
    FW
    wrote on last edited by
    #17

    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?

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #18

    Dear @FW

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


    Talk soon and best wishes 🌝

    Richard
    1 Reply Last reply
    0
  • I Offline
    I Offline
    iinnas
    wrote on last edited by
    #19

    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

    1 Reply Last reply
    0
  • RichardR Offline
    RichardR Offline
    Richard Global Moderator
    wrote on last edited by
    #20

    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
    1 Reply Last reply
    0

Before you post:

Use the Search Feature. Maybe there is already a solution to your issue.

1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.

Now see if your problem solved itself.

Go here, see if your problem is listed here:
Troubleshooting

When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it

Thanks!
Post a link to where the problem is if possible, please <3
I don't answer or check forum DMs, please just post on the forum.
Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
Online Users
M K H panteleyP
laytheme.com
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Recent
  • Tags
  • Popular
  • Users
  • Search
  • Login

  • Don't have an account? Register

  • Login or register to search.