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.
  • 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
                    • K Offline
                      K Offline
                      kylie_g
                      wrote on last edited by
                      #33

                      still not working :/

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

                        and this?

                        body, a, img, body .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