spacehey codes for easy access in layout design.
how to change the colors of things in your layout: how it works!
only pay attention to the highlighted text in the images below:
any line of text you see in your code that says "color" is what you will need to look for when changing colors.
here, the hashtag # and numbers and letters afterwards, is a HEX code. A HEX code is basically the specific code for a color you want. you can search up "hex code generator" online or use (
html color picker) and copy the code they give you after you find the color you want. then, you can replace the hex code displayed after "background-color:" with your new one!
but, there's actually an easier way to change colors outside of HEX codes.
this website is a list of HTML color code names.
htmlcolorcodes.com the names and hex codes are interchangeable, meaning, you can replace a HEX code with a color name, and vice versa!
if you see a color in your code listed, such as:
the names listed here can be replaced with a hex code, or any of the names listed in the HTML color codes website!
PSA! IMPORTANT! DO NOT SKIP THIS STEP! DO NOT delete the semicolon --> ; that you see after the colors. The purpose of this semicolon basically "completes" the line of code you wrote. so, it's basically like a "done" button for that code. it tells the code to work. the colors will not show up on your layout if you don't add it or keep it there! this applies to pretty much every line of code you'll see, but we'll get there when we get there.
music code for invisible music player:
<iframe width="0" height="0" src="https://www.youtube.com/embed/customurlhere//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
in order for this to work, you copy the whole code, paste it into any section of your profile (needs to be OUTSIDE of the <style> and </style> brackets!) and go find a youtube video with the song you want, click "share", "embed", and copy the series of letters and numbers that you see appear AFTER the https:youtube.com/embed/ section. copy only that part, then come back to spacehey, and paste it into the part of this code that says "customurlhere"
the reason why it appears as invisible is because the "width=" and "height=" is set to 0.
code for adding images and gifs and blinkies.. anywhere!
<img src="image or gif url here" width="20px"/>
this is all you need! you find a gif or image online you like, and then right click to "copy image address". when you paste the link, paste it into the section here in between the quotations. but make sure the link ends in either .jpg, .png, or .gif -- if it ends in anything else, it may not work.
if you found an image or gif online you like that doesn't end in the three file types i listed above, you can simply save it to your computer, and use a website to upload it to. i recommend catbox.moe, you can upload a gif or image and it immediately gives you the url for it!
to adjust the size of the gif/image, simply edit the number in the "20px" section.
how to change your background!!!!
this is pretty much the same as adding an image, and i know this is the first step people go for. sorry for listing it down so low.
to change the background image, the text you want to find within your code is "background-image" pretty simple. replace the url link you see within the parenthesis here, with an image or gif address. it works the same as adding images or gifs anywhere else!
make sure it's within the --> ' little quotations ' you see here. you can adjust background size, listed underneath the highlighted text, by adjusting the numbers to anything else. same as width and height.
how to change the notification bell next to "home"!
<style>
li.active .icon { content:url('url here'); width: 20PX;height: 20px;}
</style>
for this, i recommend a tiny/small image. such as a gif or an icon. if you don't know what a small icon is, theyre these microscopic gifs that are usually found in carrds. i'll link some below so you can check out for yourself!
pixel/icons link -- bright colors/moving colors warning.
it's overwhelming, i know, but basically save whatever one you want, and then upload it to catbox.moe -- the website i mentioned earlier. then, replace "url here" in the code above with that link. it should change the notification bell.
how to change the "online!" section next to your name and picture.
.online{
color: hotpink !important;
text-transform: uppercase;
text-align: left;
}
.online { visibility: always; } .online img { content: url("url here?v=f60cdbcc"); animation-name: none; visibility: visible; height: 60px; width: 96px;
}
you can change the uppercase; section to be lowercase; if you want. text-align is the place in which the text sits. for example, it is set to text-align: left; but can be changed to right; or center; .
again, you can change the size of it by adjusting height and width numbers.
if you want to COMPLETELY change the online section to be an image, there is a list of "online" gifs in this website!
myspacegens
how to change your cursor/mouse pointer.
}
/* cursors */
a:hover{
cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym757.png'), auto;
}
* {
cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym760.png'), auto;
}
simply replace the second link in quotations with the png of a cursor you want to use. the first link is the "hover" cursor, so whatever you want your cursor to change to when it's hovering over a link!
website for downloading cursors is:
cursors4u
or create your own cursor from scratch:
cursor.cc
you may notice when downloading a cursor, it may sometimes save as ".ani" or ".cur" file. you can simply change the .ani/.cur to .png when saving it to your computer.
extra codes / bonus features, from other posts <3
candy text
Report Blog Entry
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
leni c:
super helpful, tysm!!