Jump to content

Custom Curser on all rollovers including arrows

Recommended Posts

  • Replies 5
  • Views 224
  • Created
  • Last Reply

Top Posters In This Topic

Don't remove any code in your code.

Use this code to Website Tools (under Not Linked) > Custom CSS.

body * {
     cursor: url(https://static1.squarespace.com/static/666aee40f9ad2a6a51704a9e/t/6672efce8f7dfa554ca97ab8/1718808526491/Curser_Pink.png),auto
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)

That has worked for the curser not changing to the hand icon on the accordion, but isn't showing the hover colour change? This is also the case on the social icons and home button logo now too?

Also, how do I add a .svg file as the cursor, as it's looking pixelated when enlarged slightly? I found a tutorial but when I paste the code from the 'Inpect / Elements' section it doesn't work.

Edited by maboli
Link to comment

Hi, when I add the svg code to the curser code it doesn't show? Am I missing something?
 

/* Custon curser */

body {

margin: 0;

height: 100vh;

cursor: url(<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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>), auto;

}

 a:hover{

cursor: url(<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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>), auto;

}

body * {
     cursor: url(<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 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<circle cx="10" cy="10" r="10"/>
</svg>),auto
}


 

Edited by maboli
Link to comment

Because you used incorrect url. SVG in your code is

CODE

NOT

URL.

Access Custom CSS > Click Custom File > Upload your svg file > Then after finished upload >> click on svg >> URL will paste to CSS box >> Cut this URL and paste to code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.