Note: Custom code fully works on the Professional plan or Custom plan with the Code Injection feature. On Free and Creator, you can test this code in the Preview mode but it will be ignored after publishing.
In order to create a custom cursor, create the Code widget. Double-click on it and insert the following code with (your own cursor URL) into its CSS section:
body, html { cursor: url(paste the URL of your cursor file here), auto; }
Click Save & Close, and voila: now an external image is your custom cursor for the whole website. You should be able to see a dummy finger pointer cursor referenced in the code. Let’s proceed to replace it with your custom cursor.
The image you want to use has to be hosted somewhere outside of Readymag and have a URL that can be used in code.
Note: The width and height of your cursor image should be 128px or less.
The easiest way is to upload it to Dropbox. You’ll get a link that looks like this:
https://www.dropbox.com/s/7icrub8ihfftvzr/Rm-icon-square.png?dl=0
Copy it, and replace dl=0
with raw=1
. You’ll get:
https://www.dropbox.com/s/7icrub8ihfftvzr/Rm-icon-square.png?raw=1
Now, a Dropbox image can be used anywhere, let’s replace the image URL in our code:
body, html { cursor: url(https://www.dropbox.com/s/7icrub8ihfftvzr/Rm-icon-square.png?raw=1), auto; }