dschna Posted January 24 Share Posted January 24 Site URL: www.schnabel.co.uk Hi all! I have managed to sculpt my site over the years with custom CSS sourced from all over the web and implemented it with very little actual knowledge for how it works - and for the most part it has worked. I'm currently battling to get my custom cursors to work properly. When the site loads, they work perfectly. But somewhat erratically when you leave the tab or just wait a long time, the cursors stop behaving properly. Sometimes the left arrow on the gallery will change to the right arrow (and right arrow to left arrow sometimes) and not change when the cursor is moved to the left hand side of the gallery, sometimes the arrows will change to the custom pointer instead. Custom hover over the navigation links will also stop working. I have to click a link or reload the site for it to work again. Here is the custom CSS that got it (almost) working in the first place: /* Custom Cursors */ body { cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png?content-type=image%2Fpng), auto; } a:hover{ cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/5753ec6e-59fb-4856-9cab-7da618a35e00/CursorCrosshairGreen.png?content-type=image%2Fpng), auto; } .collection-type-gallery .overlay-controls.left-control { cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/fab4ca5b-9950-47d8-9399-53b4eae1fda1/LeftArrowGreen.png?content-type=image%2Fpng), e-resize; } .collection-type-gallery .overlay-controls.right-control { cursor: url(https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/887934a9-adf4-4ba3-979e-767e20ea57b4/RightArrowGreen.png?content-type=image%2Fpng), w-resize; } .collection-type-gallery .meta .gallery-controls#numberControls .number { cursor: crosshair; } /* End of Custom Cursors */ Any assistance with getting this to work properly would be much appreciated! Thanks! David Link to comment
Ziggy Posted January 24 Share Posted January 24 Not really sure what the problem here is, but you can delete the end of each of the source URLs, and add 'apostrophes' around the URL (see bolded): body { cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'?content-type=image%2Fpng), auto; } body { cursor: url('https://images.squarespace-cdn.com/content/56a922cea128e6fdb3882940/3d1d7216-1dd0-4aed-93fc-adf3863c5da2/CursorGreen.png'), auto; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
dschna Posted January 24 Author Share Posted January 24 Thanks Zygmunt. I have now found that there seems to be no issue when viewing the site on Chrome or Firefox, and the problem only seems to occur on Safari. I have made those small changes to the URLs as you suggest, but this doesn't seem to have made any difference. Link to comment
Ziggy Posted January 24 Share Posted January 24 You could try using a different format than .png, .svg or .cur might work better on Safari https://convertio.co/png-cur/ Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment