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 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
                                        • arminunruhA Offline
                                          arminunruhA Offline
                                          arminunruh
                                          Global Moderator
                                          wrote on last edited by
                                          #32

                                          i see!
                                          try this

                                          body, a, img, .lay-carousel a img {
                                          cursor: url(https://norakeilig.com/wp-content/uploads/2023/11/cursi-1-e1701094228969.png), pointer !important;
                                          }
                                          
                                          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