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. Addons
  3. SVG mouse cursor for the carousel

SVG mouse cursor for the carousel

Scheduled Pinned Locked Moved Addons
16 Posts 6 Posters 1.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.
  • M Offline
    M Offline
    Marcol
    wrote on last edited by
    #3

    Hi edgrbnz,

    with png files there are no loading problems, (I have already tried) but my client is not very satisfied, he asked me to implement a vector svg file for the cursor

    1 Reply Last reply
    0
    • edgrbnzE Offline
      edgrbnzE Offline
      edgrbnz
      wrote on last edited by edgrbnz
      #4

      🤔I understand…

      The carousel plugin seems to not accept SVGs as images – which looks like a simple issue to me that might be fixable via an update (am I right @mariusjopen, @arminunruh?).

      So long you could also try to overwrite the cursors via custom CSS and embed the SVGs you’d like to use there. Or try to paste the SVG’s path directly into custom CSS.

      It might work with something along these lines:

      /*replace lorem with the paths to your svgs!*/
      
      .lay-carousel.cursor-right {
        cursor: url("lorem") !important; 
        }
      
      .lay-carousel.cursor-left {
        cursor: url("lorem") !important;
        }
      
      

      PS:
      It looks to me you have fixed it by now with a different SVG, right?

      ✦ ✦ ✦

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

        Dear @Marcol
        yes @edgrbnz you are right. It does not support SVG images.

        The best is to have a quick look here:
        https://flickity.metafizzy.co/

        This is the carousel we use.
        You can add a SVG path though.

        I will check with Armin about that.

        Best!

        Marius

        www.mariusjopen.world

        M 1 Reply Last reply
        0
        • M Offline
          M Offline
          Marcol
          wrote on last edited by
          #6

          Yes @edgrbnz, i tried with a simpler arrow cursor. I'll try the custom css you recommended.

          Many thanks

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

            Cool! Hope it will work!

            www.mariusjopen.world

            1 Reply Last reply
            0
            • mariusjopenM mariusjopen

              Dear @Marcol
              yes @edgrbnz you are right. It does not support SVG images.

              The best is to have a quick look here:
              https://flickity.metafizzy.co/

              This is the carousel we use.
              You can add a SVG path though.

              I will check with Armin about that.

              Best!

              Marius

              M Offline
              M Offline
              Marcol
              wrote on last edited by
              #8

              @mariusjopen Many thanks :)

              1 Reply Last reply
              0
              • edgrbnzE edgrbnz

                🤔I understand…

                The carousel plugin seems to not accept SVGs as images – which looks like a simple issue to me that might be fixable via an update (am I right @mariusjopen, @arminunruh?).

                So long you could also try to overwrite the cursors via custom CSS and embed the SVGs you’d like to use there. Or try to paste the SVG’s path directly into custom CSS.

                It might work with something along these lines:

                /*replace lorem with the paths to your svgs!*/
                
                .lay-carousel.cursor-right {
                  cursor: url("lorem") !important; 
                  }
                
                .lay-carousel.cursor-left {
                  cursor: url("lorem") !important;
                  }
                
                

                PS:
                It looks to me you have fixed it by now with a different SVG, right?

                M Offline
                M Offline
                Marcol
                wrote on last edited by
                #9

                @edgrbnz Your code works fine on chrome! Thank you so much again!

                1 Reply Last reply
                1
                • edgrbnzE Offline
                  edgrbnzE Offline
                  edgrbnz
                  wrote on last edited by edgrbnz
                  #10

                  You’re more than welcome!
                  Glad it works.
                  Let’s mark this solved.

                  ✦ ✦ ✦

                  1 Reply Last reply
                  0
                  • 12b1 Offline
                    12b1 Offline
                    12b
                    wrote on last edited by
                    #11

                    Is it possible to use an svg path simply through the CSS or will the SVG still need to be uploaded as an image?

                    1 Reply Last reply
                    0
                    • edgrbnzE Offline
                      edgrbnzE Offline
                      edgrbnz
                      wrote on last edited by
                      #12

                      Good question!

                      Did you try the code above 👆with something along the lines of this. Although I don’t think you need the cached feature for this it’s worth a try to find out if inline SVGs work.

                      Let us know if it works.

                      Cheers!

                      ✦ ✦ ✦

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

                        Dear @12b
                        I think in laytheme it needs to exist as image otherwise you cannot treat it like an image.

                        But as CUSTOM HTML element you can sue SCH Code as well.

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply
                        0
                        • S Offline
                          S Offline
                          Sojoer
                          wrote on last edited by
                          #14

                          @mariusjopen It's been a while – but I wonder if it's possible now to use SVGs as Mouse Coursers for the carousel. I cannot code myself, so I wonder if it's a feature now?

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

                            yes its possible

                            http://laythemeforum.com:4567/topic/5190/svg-cursors-fix/17

                            u can just set a .svg image for any cursors for the addons

                            1 Reply Last reply
                            0
                            • S Offline
                              S Offline
                              Sojoer
                              wrote on last edited by
                              #16

                              thank you :) it worked

                              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