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. General Discussion
  3. SVG Cursors Fix

SVG Cursors Fix

Scheduled Pinned Locked Moved General Discussion
29 Posts 13 Posters 4.4k 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.
  • mariusjopenM Offline
    mariusjopenM Offline
    mariusjopen
    Global Moderator
    wrote on last edited by
    #5

    Dear @thomasmaier
    Can you post a link to your website?
    We will then have a look and inspect that!
    Many wishes!
    Marius

    www.mariusjopen.world

    1 Reply Last reply
    0
    • T Offline
      T Offline
      thomasmaier
      wrote on last edited by
      #6

      For some reason the custom cursors are back to normal again. No idea why. It wouldn't have anything to do with rebooting or restarting the browser or emptying the cache or something since I had tried that... So I guess it's at least no issue that is common in any way, just one of those mysterious bugs that appear and disappear.

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

        Dear @thomasmaier
        Can you post a link to your website?
        We will then have a look and inspect that!
        Many wishes!
        Marius

        www.mariusjopen.world

        1 Reply Last reply
        0
        • P Offline
          P Offline
          PC
          wrote on last edited by
          #8
          This post is deleted!
          1 Reply Last reply
          0
          • RichardR Offline
            RichardR Offline
            Richard
            Global Moderator
            wrote on last edited by
            #9

            Dear Pia @PC

            Interesting, sorry to hear this! - could you post a link to your website? :)

            Best
            Richard

            1 Reply Last reply
            0
            • P Offline
              P Offline
              PC
              wrote on last edited by
              #10
              This post is deleted!
              1 Reply Last reply
              0
              • RichardR Offline
                RichardR Offline
                Richard
                Global Moderator
                wrote on last edited by
                #11

                Dear @PC
                Have sent you a message :)

                Best wishes
                Richard

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  fluoroscope
                  wrote on last edited by
                  #12
                  This post is deleted!
                  1 Reply Last reply
                  0
                  • U Offline
                    U Offline
                    user-4'33''
                    wrote on last edited by user-4'33''
                    #13

                    I have a custom svg cursor with widght and height properties specified in mm. The custom cursor is inserted via url. In my custom CSS for this webpage i write this:

                    div.lay-carousel-slide:nth-child(9) > div:nth-child(1) > a:nth-child(1) > img:nth-child(1):hover {
                        filter: blur(6px);
                        cursor: url(https://luiskueffner.com/wp-content/uploads/2023/10/cursorHover.svg) 11.34 11.34, auto; 
                    }
                    

                    (The code is actually a bit longer since I want this behaviour for every carousel element. Here I point only to the first carousel element.)

                    When hovering the corresponding element, I get no cursor change. I get the intended behaviour here but with the same custom CSS.

                    What could I be missing here?

                    1 Reply Last reply
                    0
                    • B Offline
                      B Offline
                      beucccia
                      wrote on last edited by
                      #14

                      Hallo,

                      I created the following website
                      https://leodal4.dreamhosters.com

                      and the custom gif cursor is only shown in movement in Safari, whereas it doesn't work in Chrome or Firefox.

                      Does anybody have an idea how to fix it?

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

                        gifs are not supported as cursors in general. i wonder why it even works in safari!

                        1 Reply Last reply
                        0
                        • arminunruhA arminunruh

                          Hey everybody, we had a few posts about cursors not showing up.

                          This is about custom cursors for your carousel or fullscreen slider.

                          SVG cursors do work, however, you need to specifiy a width and height in the markup of the SVG. Usually, no width and height is set in many svg's so they will never work as cursors.

                          So open your svg file with a texteditor and then specify a width and height like:

                          <svg height="20" width="20">
                            ...
                          </svg>
                          

                          Have a great day

                          W Offline
                          W Offline
                          willowj
                          wrote on last edited by
                          #16

                          @arminunruh

                          As a newbie, where do I past the svg measurements code in text edit?
                          My svg arrow code looks like this:

                          <?xml version="1.0" encoding="utf-8"?>
                          <!-- Generator: Adobe Illustrator 28.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
                          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                          viewBox="0 0 111.9 42.9" style="enable-background:new 0 0 111.9 42.9;" xml:space="preserve">
                          <path d="M111.6,20.6H7.9c8-3.1,13.8-10.9,13.8-20h-1.4c0,11-9,20-20,20v1.4c11,0,20,9,20,20h1.4c0-9.1-5.7-16.9-13.8-20h103.7V20.6z
                          "/>
                          </svg>

                          Thanks!!

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

                            hey!

                            if you use a texteditor and paste that code into it, and then save it as for example:
                            mycursor.svg

                            then upload that file here, in "set image" for example

                            Screenshot 2024-01-25 at 18.46.58.png

                            1 Reply Last reply
                            0
                            • arminunruhA arminunruh referenced this topic on
                            • A Offline
                              A Offline
                              Alice.guarnieri
                              wrote on last edited by
                              #18

                              Hello!

                              I've the same problem, the custom PNG cursor doesn't work. I noticed the same issue on an older website I did, it worked but now the custom arrows disappear when I move the mouse. Any suggestions?

                              Thanks!

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

                                u may need to restart your computer

                                do u have a link?

                                do u mean the custom arrows or the custom mouse cursor?
                                if u update your carousel addon the issue with the custom arrow could be fixed mmh

                                1 Reply Last reply
                                0
                                • arminunruhA arminunruh referenced this topic on
                                • arminunruhA arminunruh referenced this topic on
                                • clara_andreaC Offline
                                  clara_andreaC Offline
                                  clara_andrea
                                  wrote on last edited by
                                  #20

                                  Hello !

                                  Same problem here, the custom PNG doesn't work anymore. It appears when I move the mouse quickly but disappears.
                                  This is the link to a page of my website for an example:
                                  https://www.clara-andrea.com/tipik/

                                  Thanks !

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

                                    can u restart your computer, does it work then?

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

                                      and are you sure the image is not too big? less than 128px width and height

                                      1 Reply Last reply
                                      0
                                      • arminunruhA arminunruh referenced this topic on
                                      • R Offline
                                        R Offline
                                        rospax
                                        wrote on last edited by
                                        #23

                                        Hello @arminunruh , I'm struggling with this also.

                                        I have uploaded custom "prev / next" buttons for my carousel (via the lay theme options). The SVG code looks like this:

                                        <?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><defs><style>.cls-1{fill:#606060;opacity:.5;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:.67px;}</style></defs><rect class="cls-1" width="52" height="52" rx="4" ry="4"/><polyline class="cls-2" points="22.87 17.06 31.81 26 22.87 34.94"/></svg>

                                        The width and height (52px) are included in the code (from illustrator) but the buttons don't show up.

                                        If you can let me know how to fix that would be amazing!

                                        Thank you,

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

                                          @arminunruh I have a completely different problem. I uploaded a svg cursor file. But the cursor does not appear in Firefox and Chrome: www.biografie.art
                                          Only in Safari.

                                          Info: I added the code to the file as suggested: <svg height="20" width="20">
                                          ...
                                          </svg>

                                          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