profile picture

Published by Shanen

published
updated

Category: SpaceHey

View Shanen's Blog

View Shanen's Profile

Report Blog Entry

Custom cursors in Spacehey [Guide]

This cool site is full of old school and new cursors:


And it even shows how to use it in your "MySpace profile" :P
The CSS given on the site may not work, so use the following format instead under your style body tag:

cursor: url(link in cursor code area), auto;

Example:
cursor: url(http://www.rw-designer.com/cursor-extern.php?id=129480), auto;

But as Zsolt said here, using http resources can deter the steps taken to secure the site, so instead you can download the elements you want to use, upload it on a storage service like Dropbox or S3 and use the public links here. I highly suggest mentioning the original link via the alt attribute, or through an html comment.

Alt attribute for image:

<img src="img link" alt="Description + OG unsecure link">

HTML comments:

<!-- Insert comment here, or link as you'd like -->

Edit:
@mercury Your cursor input was:

cursor:url("<http://www.rw-designer.com/cursor-extern.php?id=XXXX>");

This is the format, you must replace the area between quotes with a working link that you get from the site above; this link is present in the page you've to scroll down

Eg: This cute penguin one

cursor:url("http://www.rw-designer.com/cursor-extern.php?id=106302"), auto;

Another Edit:

This comment by VINΛ shows an alternate way to use cursors by turning them into base64

Ok so I have a solution that works but it's a few steps, but worth it if you can only find the cursor you want on rw-designer.com. These steps only work with static cursors though, not animated ones. You might be able to convert .ani cursors to .gif but I haven't tried. Anyway:

1. Download the .cur file from the rw-designer.com page

2. Go to https://convertio.co/cur-png/ and upload the .cur file, then click Convert.

3. Click the Download button to get the .png version

4. Go to https://base64.guru/converter/encode/image

5. Upload the .png cursor image and click "Encode image to Base64"

6. Copy the result. It will be kind of long (like a few hundred characters), but that's ok.

7. Use this template below, replacing REPLACEME part with the Base64 encoded text you just copied:

cursor: url(data:image/png;base64,REPLACEME), auto;


this is what mine looks like:


cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEUAAAAAUv8AQ/8AJP8DAP8aAP8pAP9AAP9PAP9fAP9nAP92AP+VAP+kAP/DAP/aAP/aAP//AP8AUv8AQ/8AJP8DAP8aAP8pAP9AAP9PAP9fAP9nAP92AP+FAP+NAP+VAP+kAP/DAP/aAP/pAP//AP////+Wa+7MAAAAEnRSTlMAh4eHh4eHh4eHh4eFjYiEgIFwiXDeAAAAAWJLR0QlwwHJDwAAAAlwSFlzAAAAyAAAAMgAY/rnrQAAAAd0SU1FB+UBGgYFDhbbGyoAAAABb3JOVAHPoneaAAAAEGNhTnYAAAAgAAAAIAAAAAAAAAAAYrnu+gAAAGlJREFUCNdNzkkSgzAMRNEGwpAwBLATZogN9z9jJGxs3qKr/kYltAE8IUIfUsrIxYc8rviy2EZ3Skz0RnrGYGUc4+VJMTkvYPZyLDdYb7BZBV/7kZKHQylV8dACWr+BWhP3+05cNMfRAH/NHA5YV2v24gAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0yNlQwNjowNToxNCswMDowMDXSS10AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMjZUMDY6MDU6MTMrMDA6MDCBKM1vAAAAAElFTkSuQmCC), auto;
}

It's long af but its a whole image turned into text, so that's expected lol

8. Save your settings and you're done!

Also with it embeddded like this, it means if the rw-designer.com or other cursor servers go down, it won't affect your cursor!


34 Kudos

Comments

Displaying 20 of 23 comments ( View all | Add Comment )

andrew covell

profile picture

so how do i get gif cursors to work? when i paste a gif url in for a cursor it stays static on the first frame instead of animating


Report Comment



You probably got the answer, but I'll add this for anyone else that might try

Browsers don't support animated cursors,at least through traditional methods such as the .gif or .anm formats

The only realistic way to have animated cursors would be through some js and jquery magic, which for good reasons aren't allowed on this site

by Shanen; ; Report

wheatley (inactive)

profile picture

for the people struggling with their urls being http

set up a discord server
download the gif/png of the cursor
post it in the server
open the image from discord
copy the link

boom


Report Comment

Zvrra

profile picture

Everyone REMEMBER you have to use a site that uses https. RW is http so you cant use it from what I'm seeing and trying. You'll have to use something like totallyfreecursors . com etc etc and then copy the ops code replace the re-designer link.


remember you cannot use this site http://www.rw-designer.com because its HTTP.


hope I save y'all an hour or so.


Report Comment



Welp, this must be a site update. Http resources did work fine a month ago, just your browser lets you know when a page has them. I guess An pushed an update which obliterate usage of http resources or something.

I did suggest uploading it to your own instance above, but I REALLY like the base64 tip in the comments

by Shanen; ; Report

VINΛ

profile picture

Ok so I have a solution that works but it's a few steps, but worth it if you can only find the cursor you want on rw-designer.com. These steps only work with static cursors though, not animated ones. You might be able to convert .ani cursors to .gif but I haven't tried. Anyway:

1. Download the .cur file from the rw-designer.com page

2. Go to https://convertio.co/cur-png/ and upload the .cur file, then click Convert.

3. Click the Download button to get the .png version

4. Go to https://base64.guru/converter/encode/image

5. Upload the .png cursor image and click "Encode image to Base64"

6. Copy the result. It will be kind of long (like a few hundred characters), but that's ok.

7. Use this template below, replacing REPLACEME part with the Base64 encoded text you just copied:


cursor: url(data:image/png;base64,REPLACEME), auto;


this is what mine looks like:


cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAclBMVEUAAAAAUv8AQ/8AJP8DAP8aAP8pAP9AAP9PAP9fAP9nAP92AP+VAP+kAP/DAP/aAP/aAP//AP8AUv8AQ/8AJP8DAP8aAP8pAP9AAP9PAP9fAP9nAP92AP+FAP+NAP+VAP+kAP/DAP/aAP/pAP//AP////+Wa+7MAAAAEnRSTlMAh4eHh4eHh4eHh4eFjYiEgIFwiXDeAAAAAWJLR0QlwwHJDwAAAAlwSFlzAAAAyAAAAMgAY/rnrQAAAAd0SU1FB+UBGgYFDhbbGyoAAAABb3JOVAHPoneaAAAAEGNhTnYAAAAgAAAAIAAAAAAAAAAAYrnu+gAAAGlJREFUCNdNzkkSgzAMRNEGwpAwBLATZogN9z9jJGxs3qKr/kYltAE8IUIfUsrIxYc8rviy2EZ3Skz0RnrGYGUc4+VJMTkvYPZyLDdYb7BZBV/7kZKHQylV8dACWr+BWhP3+05cNMfRAH/NHA5YV2v24gAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0yNlQwNjowNToxNCswMDowMDXSS10AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMjZUMDY6MDU6MTMrMDA6MDCBKM1vAAAAAElFTkSuQmCC), auto;
}


It's long af but its a whole image turned into text, so that's expected lol

8. Save your settings and you're done!

Also with it embeddded like this, it means if the rw-designer.com or other cursor servers go down, it won't affect your cursor!

I hope this helps people!!


Report Comment



This is a REALLY great solution. Hope you don't mind if I add it as an edit in the blog

by Shanen; ; Report

Definitely, spread it around all you want!

by VINΛ; ; Report

You might need to edit the sample in your post, making it code text, because it seems the Spacehey blog CSS doesn't show anything that scrolls off the edge D:

by VINΛ; ; Report

thats exacly what this blog entry was about wtf?????

by anomaly; ; Report

VINΛ

profile picture

The ones from rw-designer won't work for most people because they are http and this site is https, which means that anything else you are referencing from other sites also has to be https. They don't seem to have https for their site


Report Comment

Dankshire

profile picture

no matter where i insert the cursor code, it won't work...


Report Comment



i'm using:

body{
background: content-box radial-gradient(yellow, red);
cursor: url("http://www.rw-designer.com/cursor-extern.php?id=55498"), auto;
}

by Dankshire; ; Report

the website they posted doesnt work with spacehey I've been messing with it for hours its because the RW site is http and spacehey is https so you're not doing anything wrong its just rejecting the custom cursor site location or something. you have to use a site that has https on it like https://www.cursors-4u.com or https://www.totallyfreecursors.com hope this helps. then copy the code.

by Zvrra; ; Report

ah that makes sense! I started making my own cursors and uploading to my imgur account

by Dankshire; ; Report

AbigailEldritch

profile picture

i've made my own cursor! any idea hopw i can add it?


Report Comment



Awesome! Make sure it's of .PNG or .cur format, and the resolution must not exceed 128x128, so stick to 90s to be safe. Upload it as a publicly accessible file on your preferred cloud/CDN(Dropbox, OneDrive, etc) and use that link in the cursor tag

by Shanen; ; Report

πŸ’”ε©γ²Π―πŸ…΄ Ɛ𝓝ιgπŸ…ΌπŸ…°πŸ‘»

profile picture

πŸ†‚πŸ†ƒπŸ†ˆπŸ…»πŸ…΄ πŸ…±πŸ…΄πŸ…΅πŸ…ΎπŸ†πŸ…΄ πŸ…°πŸ…½πŸ…³ πŸ…°πŸ…΅πŸ†ƒπŸ…΄πŸ†


Report Comment

πŸ’”ε©γ²Π―πŸ…΄ Ɛ𝓝ιgπŸ…ΌπŸ…°πŸ‘»

profile picture

πŸ…±πŸ…ΎπŸ…³πŸ†ˆ {, πŸ…°πŸ†„πŸ†ƒπŸ…Ύ;πŸ…²πŸ†„πŸ†πŸ†‚πŸ…ΎπŸ†: πŸ†„πŸ†πŸ…»(πŸ…·πŸ†ƒπŸ†ƒπŸ…Ώ://πŸ††πŸ††πŸ††.πŸ†πŸ††-πŸ…³πŸ…΄πŸ†‚πŸ…ΈπŸ…ΆπŸ…½πŸ…΄πŸ†.πŸ…²πŸ…ΎπŸ…Ό/πŸ…²πŸ†„πŸ†πŸ†‚πŸ…ΎπŸ†-πŸ…΄πŸ†‡πŸ†ƒπŸ…΄πŸ†πŸ…½.πŸ…ΏπŸ…·πŸ…Ώ?πŸ…ΈπŸ…³=2384), πŸ…°πŸ†„πŸ†ƒπŸ…Ύ;}


Report Comment

Amber Whitfield

profile picture

this site works with lots of options.
https://www.cursors-4u.com/cursor/2014/03/25/sexy-pink-lips.html

Use the top code with >style


Report Comment

mona

profile picture

@shanen, it didnt work unfortunately.


Report Comment

Shanen

profile picture

@kari, apologies for the delayed response, glad to see you got it working


Report Comment

Shanen

profile picture

Hey @mona , under the style tag, look around for body{ , and simply paste it within after the background-size property, and before the closing } , lemme know if it works


Report Comment

mona

profile picture

confused about where im supposed to put this text when i have it filled out

cursor: url(http://www.rw-designer.com/cursor-extern.php?id=55063), auto;


Report Comment

x_sAvEsAnOtHeRdAy_x

profile picture

yeah, i can't seem to make this work. i see all these cool-ass profiles and i want one lol.


Report Comment

Kari Weber

profile picture

I can't seem to get it to work at all using the code on the site and the way posted here


Report Comment

Shanen

profile picture

@Roxanna I think putting a ", auto" after the URL part of the cursor should fix it. Let me know if it works!


Report Comment

Roxana Strahler

profile picture

Not sure why I am still having issues I followed all the steps! :-(


Report Comment

β™‘Jenna Voorheesβ™‘

profile picture

I'm trying to get this to work but I don't know what I'm doing wrong?

cursor:url(http://www.rw-designer.com/cursor-extern.php?id=103175),auto;


Report Comment



the website they posted doesnt work with spacehey I've been messing with it for hours its because the RW site is http and spacehey is https so you're not doing anything wrong its just rejecting the custom cursor. you have to use a site that has https on it like https://www.cursors-4u.com or https://www.totallyfreecursors.com hope this helps.

by Zvrra; ; Report

mercury

profile picture

thank you so much for your patience and help!!


Report Comment