Skip to content
  • 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

  1. Home
  2. Feedback
  3. Custom Cursor Pointer

Custom Cursor Pointer

Scheduled Pinned Locked Moved Feedback
cursorpointerimagecustomarrow
34 Posts 14 Posters 7.3k 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.
  • 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
    • RichardR 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
      L Offline
      L Offline
      Laurence
      wrote 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
        • RichardR 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
          L Offline
          L Offline
          Laurence
          wrote 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
                    • C Offline
                      C Offline
                      carlastreckwall
                      wrote on last edited by
                      #21

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

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

                        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
                        1 Reply Last reply
                        0
                        • F Offline
                          F Offline
                          fabiocs
                          wrote on last edited by
                          #23

                          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;
                          }

                          1 Reply Last reply
                          0
                          • D Offline
                            D Offline
                            djourina
                            wrote on last edited by djourina
                            #24

                            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;
                            }

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

                              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
                              1 Reply Last reply
                              0
                              • K Offline
                                K Offline
                                kylie_g
                                wrote on last edited by
                                #26

                                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 :)

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

                                  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?

                                  1 Reply Last reply
                                  0
                                  • K Offline
                                    K Offline
                                    kylie_g
                                    wrote on last edited by
                                    #28

                                    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?

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

                                      can u use a smaller image, try that please

                                      Screenshot 2023-12-05 at 08.18.20.png

                                      your image is 256 x 256 its too big i think

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

                                        just use the dot as the image. it will be like 10 x 10 pixels

                                        1 Reply Last reply
                                        0
                                        • K Offline
                                          K Offline
                                          kylie_g
                                          wrote on last edited by
                                          #31

                                          On my carousel with linked images it still shows the hand. But everywhere else it works, thank you!

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          I also code custom websites or custom Lay features.
                                          πŸ’Ώ Email me here: πŸ’Ώ
                                          info@laytheme.com

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

                                          This often solves issues you might run into

                                          When you post:
                                          1. Post a link to where the problem is
                                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                          Online Users
                                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                          laytheme.com
                                          • Login

                                          • Don't have an account? Register

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