[NEW USERS MUST READ] A Comprehensive Guide to Customizing Spacehey

Want to make your Spacehey profile look beautiful and stand out? This is the guide for you! It doesn’t matter if you don’t know how to code; this guide will walk you through everything you need to know. From basic HTML and CSS to adding music, cursors, and layouts, you will be able to create a profile that is truly yours.

Table of Contents

Getting Started
HTML Basics
CSS styling
Invisible Music Player
Custom Cursor
Using Layouts
Blog Customization
Conclusion

Getting Started

Spacehey profile customization can be tricky, especially when you have no experience in coding. But don’t worry, you don’t need to be a web developer to make your profile look awesome. All you need to do is open the edit profile page and place your custom code blocks in the “About Me” or “Code” section, or just about any section you want. Make sure you copy and paste your original profile somewhere else before putting in code, just in case something breaks.

HTML Basics

HTML stands for HyperText Markup Language, and it pretty much sets the structure of your page, kind of like a skeleton. HTML uses “tags”, which all serve different purposes. You will typically put your content in between the opening tag and the closing tag. Below are some useful ones you should know in order to customize your profile.

Basic Text:

<h1> Header </h1> (Note, h2, h3, h4, h5 and h6 will each make the text smaller)

<p> Paragraph </p>

<i> Italic </i>

Containers:

<div> Container </div>

Links and Images:

(Note about images: some image links won’t work, what I found works the most are Pinterest images. To get the link, you would right-click on the image and click open image in a new tab and then copy that link)

Lists:

Unordered lists:

<ul>

</ul>

Ordered List:

<ol>

</ol>

Styling:

<style>

.your_css_class{

}

</style>

If you want to add extra pictures and containers outside of the other profile sections, you could use a <div></div> and specify its location using inline CSS, which we will talk about. If you want to experiment with these, try pasting the code into your profile. I will warn you, though, it will look super ugly, and that is because we need CSS to make it look beautiful

CSS Styling

CSS is what you will be using to give your profile its colors, fonts, animation, and overall style. If HTML is the skeleton, CSS is like the skin, the clothing, and the makeup. You can write CSS in a <style> HTML tag. The way you would style your profile is by editing the CSS Classes that exist within the website, or by creating your own CSS classes. One useful tip is to use Inspect Element on your browser (if you are using Chrome) to customize your profile live as you write code, and then paste the code you write into your “About Me” section once you are done. You can view all of the CSS classes in spacehey visually by viewing this blog: https://blog.spacehey.com/entry?id=1588394

If you want to look at useful CSS properties, I will post a link to a CSS cheatsheet that will help you style your profile as you code: https://web.stanford.edu/group/csp/cs21/csscheatsheet.pdf

You could also do inline CSS in HTML tags, which I find very useful. All you need to do is this:

<htmlTag style=”css_property;> Content </htmlTag>

This is useful if you want to edit the styling of just one HTML tag or an entire container of HTML. You can also use this to specify the position of a container on the screen. Here's an example:

I'm moved 20px down and 30px right

</div>

Invisible Music Player

Have you ever opened a profile and suddenly music plays out of nowhere? Well, here's how you do it. First, go on to YouTube (best option), search for the song you want to play, open the video, click share, and then click embed. Paste the code into your profile, and then you want to do some editing. Make sure you set the width and height to 0 to make it invisible

This is a quick template for you to use:

</iframe>

Custom Cursor

To use a custom cursor, put this in your <style></style> HTML tag:

* {cursor: url(YOUR_CURSOR_LINK), auto;}

You could get plenty of cursors on this website: https://www.cursors-4u.com/

Using Layouts

If you are too lazy to do coding, I get that, which is why you can always steal other people’s code (hehe). If you navigate to the layout section and search for the layout you want, you can copy a pre-made layout code into your own profile. If you look at my profile, I'm using a pre-made Frutiger aero layout with some personal tweaks.

Blog Customization

Did you know that you can customize your blogs too? If you click on the “<>” button (view HTML), you can view the HTML layout for your blog. Then, you can use the <style> tag or inline CSS to customize your blog.

Conclusion

That pretty much wraps up everything. If you made it to the end, congrats! I will be updating this frequently so it's up-to-date and more detailed. Have fun customizing!

15 Kudos