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 3.6k 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.
  • P Offline
    P Offline
    PC
    wrote on Jan 7, 2021, 1:20 PM last edited by
    #8
    This post is deleted!
    1 Reply Last reply
    0
    • R Offline
      R Offline
      Richard
      Global Moderator
      wrote on Jan 10, 2021, 1:24 AM 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 Jan 17, 2021, 4:15 PM last edited by
        #10
        This post is deleted!
        1 Reply Last reply
        0
        • R Offline
          R Offline
          Richard
          Global Moderator
          wrote on Jan 20, 2021, 9:30 AM 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 Mar 1, 2022, 5:30 PM last edited by
            #12
            This post is deleted!
            1 Reply Last reply
            0
            • U Offline
              U Offline
              user-4'33''
              wrote on Oct 22, 2023, 9:39 AM last edited by user-4'33'' Oct 22, 2023, 5:48 AM
              #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 Jan 19, 2024, 4:17 PM 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
                • A Offline
                  A Offline
                  arminunruh
                  Global Moderator
                  wrote on Jan 20, 2024, 9:36 AM 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
                  • A arminunruh
                    Apr 12, 2020, 2:27 PM

                    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 Jan 25, 2024, 6:30 AM 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
                    • A Offline
                      A Offline
                      arminunruh
                      Global Moderator
                      wrote on Jan 25, 2024, 5:47 PM 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
                      • A arminunruh referenced this topic on Jan 25, 2024, 6:59 PM
                      • A Offline
                        A Offline
                        Alice.guarnieri
                        wrote on Mar 26, 2024, 4:47 PM 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
                        • A Offline
                          arminunruhA Offline
                          arminunruh
                          Global Moderator
                          wrote on Mar 28, 2024, 12:07 PM 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 May 29, 2024, 3:04 PM
                          • arminunruhA arminunruh referenced this topic on Dec 9, 2024, 3:20 PM
                          • clara_andreaC Offline
                            clara_andreaC Offline
                            clara_andrea
                            wrote on Jan 19, 2025, 10:17 PM 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 Jan 29, 2025, 11:10 AM 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 Jan 29, 2025, 11:12 AM 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 30 days ago
                                • R Offline
                                  R Offline
                                  rospax
                                  wrote 28 days ago 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 23 days ago 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
                                    • arminunruhA Offline
                                      arminunruhA Offline
                                      arminunruh
                                      Global Moderator
                                      wrote 21 days ago last edited by
                                      #25

                                      I don't see any custom cursor being used on Safari or any other browser. Where did you set this cursor? There are different places in Laytheme where you can set a custom cursor. @dennisbern

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

                                        @rospax
                                        Hey, if you look at your code, the width and height attributes are not there; only the viewBox attribute is there, but that's not sufficient.

                                        it needs to be like

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

                                        1 Reply Last reply
                                        0
                                        • arminunruhA arminunruh referenced this topic 21 days ago
                                        • R Offline
                                          R Offline
                                          rospax
                                          wrote 10 days ago last edited by
                                          #27

                                          @arminunruh thanks, I tried inserting that but it didn't work - whereabouts would you place it in the string of code? Not sure if there's something I'm missing...

                                          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
                                          M
                                          MWPA
                                          5 minutes ago
                                          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