Shanen's profile picture

Published by

published
updated

Category: SpaceHey

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!


140 Kudos

Comments

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

tranquil45

tranquil45's profile picture

Real question!! (important): Is there a chance to add cursor trails?


Report Comment



I've tried creating cursor trails before but, I think it's not really possible or I haven't figured it out yet, you can use JS for creating cursor trails but Spacehey doesn't support that

by tilapia; ; Report

alri:)

by tranquil45; ; Report

liyah

liyah's profile picture

the base64 version worked! tysm!


Report Comment

beachfrontbae

beachfrontbae's profile picture

where do i put it tho?? where on my prfile do i paste it?


Report Comment



I pasted mine under "HTML/CSS Code:" When you click on "edit your profile." I did mine after my loading page.

by Gl0r!a; ; Report

Akizine

Akizine's profile picture

THANKY OU


Report Comment

Gl0r!a

Gl0r!a's profile picture

TYSMMMM!!!!! I used the last method and it worked oml thank uuuuuuuuuuuu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!;)))))


Report Comment

Ahriadne Midnyte Princess

Ahriadne Midnyte Princess's profile picture

tysm worked beautifully UwU


Report Comment

corpsewaxxx

corpsewaxxx's profile picture

couldn't get it to work, but then again i know jack about css so i've probably messed this up like five times. i already have a theme set up but idk if i should like add it into the theme's css or something like that


Report Comment

sydneyskullz

sydneyskullz's profile picture

guys! If you are having trouble with rw cursors, check to make sure the one you r using is .cur !!!


Report Comment

wesker

wesker's profile picture

if anyone needs help debugging check https://blog.spacehey.com/entry?id=446997 if your problem isnt on there shoot me a comment i can help /g


Report Comment

xXxValentinexXxVenomxXx

xXxValentinexXxVenomxXx's profile picture

I tried to open the file but it said smth abt not having an associated app...how do I fix this?


Report Comment



you dont need to open it you just need to upload it & get the link ^^

by wesker; ; Report

How do I get the link?

by xXxValentinexXxVenomxXx; ; Report

vincent !!

vincent !!'s profile picture

i put in the link for the penguin cursor and it literally broke my entire profile :/ i tried fixing it and got rid of the code but it won't go back to normal


Report Comment



check for missing style tags !

by wesker; ; Report

ssSerenn

ssSerenn 's profile picture

did they remove the ability to make custom cursors? its not working for me and i dont understand??


Report Comment



you have to put the code between two style tags () or insert it before the second style tag in your pre-existing code after a closed bracket

this is the code i'm using. resting -> caret -> hovering/active

/* resting (normal cursor) */
* {
cursor: url(https://images2.imgbox.com/b1/bb/UUTux9sV_o.png), auto;
}
/* i-beam/caret/the little line that shows up when you highlight text */
input {
cursor: url(https://images2.imgbox.com/fc/23/WEObI4Fj_o.png), auto;
}
/* the rest of these are for the pointer (what shows up when you hover over a link) */
a {
cursor: url(https://images2.imgbox.com/ea/0e/wlQIzrmE_o.png), auto;
}
button {
cursor: url(https://images2.imgbox.com/ea/0e/wlQIzrmE_o.png), auto;
}
.logout-btn {
cursor: url(https://images2.imgbox.com/ea/0e/wlQIzrmE_o.png), auto;
}

just replace the image source (the url in parenthesis) with the link for whatever cursor you want to use. the last 3 should all use the same image

by 5ativa vampir3; ; Report

ScarredAngel6

ScarredAngel6's profile picture

My cursor is not aligned with my actual one. Like the tip of the custom one is on the bottom of where it should be and it makes it hard to click anything on my profile. How do I fix this? Thanks in advance


Report Comment

mossfaerie

mossfaerie's profile picture

In case anyone here finds a cursor file (.cur) on another website they want to use, I just found a website called https://convertio.co/ and you can convert basically any file type to another one :)

So, example, I wanted to use this (https://www.cursors-4u.com/cursor/2009/11/23/dogbane-beetle.html) beetle cursor so I downloaded it (theres a download button on each cursor page which, bonus, means you can use it on your pc as a cursor as well), put it on convertio, converted it to a .png, uploaded it to imgur to get the link :)


Report Comment

D4V3 !!!!

D4V3 !!!!'s profile picture

this site workz well !! I uze option 1 when adding the code 2 my profile ^^ https://www.cursors-4u.com/cursor/2011/12/02/cute-onion-club-onion-head.html


Report Comment



where did u paste it? srry im a total noob

by ๐–‰๐–†๐–“๐–Ž; ; Report

I think i pasted it at the start of my profile ??

by D4V3 !!!!; ; Report

hihi! 1've been trying to get the code @ the bottom to work but 1 can't get it :-( it seems uy did so 1 was wondering if uy could help m3 @ all mnhgbfvd x-|

by $HR4PN€L; ; Report

andrew covell

andrew covell's 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 :P

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

you can actually create a gif using animations/keyframes! for example https://spacehey.com/sodimel has achieved this :D i suggest IMโ€™ing him if you want to try doing it yourself!

by ๐•ค๐•ฆ๐•Ÿ๐•ค๐•–๐•ฅ; ; Report

Zvrra

Zvrra's 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Λ

VINΛ's 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! :D

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

this isnt working for me. I followed all the steps and all it did was mess my layout up. but if i find a solution to my problem ill be back!!

by ๐Ÿ’—Miniyagi๐Ÿ’—; ; Report

VINΛ

VINΛ's 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

Dankshire's 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

How do you make your own cursor tho

by lala.luxie; ; Report

your post, worked right away for me. Thank you very much :)

by Starocalypse; ; Report