SpaceHey Layout Tutorial - SpaceHey Layouts

🚀 Getting Started

What You'll Need:

A SpaceHey account (create one at spacehey.com)
Basic understanding of copy & paste
One of our layout codes (or your own CSS)
5 minutes of your time

Important Notes:

⚠️ Before You Start: Always test layout codes in a development/test profile first. Some codes may conflict with SpaceHey's default styling.

💡 Pro Tip: Make sure to save any existing "About Me" content before adding layout code!

📖 Step-by-Step Guide

STEP 1

Log into SpaceHey

Go to spacehey.com and log into your account. If you don't have an account yet, create one - it's free!

STEP 2

Go to Profile Edit Page

Click on your profile picture or username, then click the "Edit Profile" button. This will take you to your profile settings.

STEP 3

Find the "About Me" Section

Scroll down until you see the "About Me" text box. This is where you'll add your custom CSS layout code.

💡 Tip: The "About Me" section accepts HTML and CSS, which is what makes custom layouts possible!

STEP 4

Copy Your Layout Code

Browse our layout collection and find a design you like. Click the "Copy Code" button to copy it to your clipboard.

The code will look something like this:

<style>
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 20px;
}
</style>

STEP 5

Paste Code into "About Me"

Click inside the "About Me" text box and paste your layout code. You can use:

Windows/Linux: Ctrl + V
Mac: Cmd + V
Or right-click and select "Paste"

STEP 6

Save Your Changes

Scroll to the bottom of the page and click the "Save Profile" button. Your new layout should now be live!

⚠️ Important: If you see an error message, double-check that you copied the entire code including the opening <style> and closing </style> tags.

STEP 7

View Your Profile

Click on your profile to see your new custom layout in action! You may need to refresh the page (F5 or Ctrl+R) to see the changes.

💡 Pro Tip: If your layout doesn't look right, try clearing your browser cache or testing in an incognito/private window.

🧠 Understanding the Code

CSS Basics

CSS (Cascading Style Sheets) controls how your profile looks. Here's a simple breakdown:

Basic CSS Structure

<style>
/* This is a comment - it doesn't affect the code */

selector {
    property: value;
    another-property: another-value;
}
</style>

Common CSS Properties

background: Sets background colors or images
color: Sets text color
font-family: Changes the font
border: Adds borders around elements
border-radius: Makes corners rounded
padding: Adds space inside an element
margin: Adds space outside an element

💻 Example Layout Codes

Example 1: Simple Color Background

A basic layout with a solid color background:

<style>
body {
    background-color: #FFB6D9;
    font-family: Arial, sans-serif;
}

.profile {
    background-color: white;
    border: 3px solid #FF69B4;
    border-radius: 15px;
    padding: 20px;
}
</style>

Example 2: Gradient Background

A more advanced layout with a gradient background:

<style>
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-attachment: fixed;
}

.profile {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 25px;
}

a {
    color: #667eea;
    text-decoration: none;
}

a:hover {
    color: #764ba2;
    text-decoration: underline;
}
</style>

Example 3: Background Image

Using an image as your background:

<style>
body {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.profile {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
}
</style>

💡 Customization Tips

Changing Colors

Colors in CSS can be defined in several ways:

Hex codes: #FF69B4 (6 digits, letters/numbers)
RGB: rgb(255, 105, 180)
Color names: pink, blue, red (limited options)
RGBA: rgba(255, 105, 180, 0.8) (includes transparency)

💡 Tip: Use HTML Color Codes to find hex codes for any color!

Using Custom Fonts

You can use Google Fonts or system fonts:

Custom Font Example

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}
</style>

🔧 Troubleshooting Common Issues

Code Not Working?

Problem: Layout doesn't appear after saving

Make sure <style> and </style> tags are present
Check for typos in CSS properties
Verify all brackets { } are closed properly
Try clearing your browser cache (Ctrl+F5 or Cmd+Shift+R)

Profile Looks Broken?

Problem: Profile is unreadable or elements are missing

Remove the code and start fresh with a simpler layout
Check if you accidentally deleted required elements
Make sure colors have good contrast (light text on dark background, etc.)
Test code in small sections to find what's causing issues

Images Not Loading?

Problem: Background images or custom images don't appear

Verify the image URL is correct and publicly accessible
Use image hosting sites that allow hotlinking
Check that the URL starts with http:// or https://
Try a different image host if one isn't working

🚀 Advanced Techniques

Combining Multiple Styles

You can combine multiple layout codes into one by placing all the CSS inside a single <style> tag:

Combined Layout Example

<style>
/* Background styling */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Arial', sans-serif;
}

/* Profile box styling */
.profile {
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #9D4EDD;
    border-radius: 15px;
    padding: 20px;
}

/* Link styling */
a {
    color: #FF69B4;
    text-decoration: none;
}

a:hover {
    color: #FFD700;
    text-decoration: underline;
}
</style>

📚 Additional Resources

Helpful Links:

🎨 Browse our layout collection
🌈 HTML Color Codes - Find hex color codes
✍️ Google Fonts - Free fonts to use
📖 W3Schools CSS Tutorial - Learn more CSS
🎯 MDN CSS Reference - Comprehensive CSS guide

Need More Help?

If you're stuck or need assistance, consider:

Checking SpaceHey's official documentation
Joining SpaceHey community groups
Starting with our pre-made layouts and modifying them
Testing code changes one at a time to isolate issues

✨ How to Customize Your SpaceHey Profile