Basics of Styling Your SpaceHey Profile

Hello friends! I wanted to share some tips I learned during my creative journey on Spacehey so far <3

You can put all this code right in the About Me section of your profile!

FIRST THINGS FIRST-

Make sure you put everything in between:

<style>

</style>

From that point on, it's just learning the right identifiers for the sections. Basic css rules apply!

STYLE YOUR BACKGROUND:

For a repeating small image (like mine which is a butterfly gif) you will enter the following code in between the style tags:

background-image:url(https://i.pinimg.com/originals/20/cc/cf/20cccffef772538203fa36bcad3e9485.gif);
 }

IMPORTANT: You need to make sure you are using the Image URL- not the URL of the site the image lives on.

Right click or ctrl-click (mac) and select "Copy Image Address" on the image you want to use.

To change just the background color, use:

body {

background-color: #000000;

}

To change your background to a static image, use:

body{background-image:url("BACKGROUND URL HERE");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center,center;}

STYLE THE MIDDLE WHITE SECTION

To change the middle white section, you need to target "main." Here is the code I used, created from a css gradient generator. You can put a photo here, a repeating image, or a solid color also just like the other background.

main {
background: rgb(245,173,231);
background: linear-gradient(300deg, rgba(245,173,231,1) 10%, rgba(255,255,255,1) 49%, rgba(247,163,232,1) 100%);
}

To edit your navigation bar, here is the code I used to create mine. Remember you want to put this between the style tags with the others:



nav .links {
background-color: #c99fff;
padding: 3.5px 16px 5.5px 16px;
text-transform: lowercase;
letter-spacing: 1x;
}

STYLE YOUR HEADERS

.profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background: rgba(156,56,206,1);
border-radius: 10px;
box-shadow: 2px 2px 7px #000;
color: #fff;
font-family: 'Brush Script MT', cursive;
font-size:35px;
text-transform; uppercase!important;
padding: 2px 7px;
}

You can use my code as a default and go from there.

STYLE TEXT:

<h2 style="color: #9C39CE; font-size:38px; font-family: 'Sacramento', cursive;">Creative Director. TikTok creator. Nostalgia queen. Makeup hoarder. 

</h2

Replace h2 with another text identifier like h1, h3, or p for paragraph text. I used this for my headline that says: "Creative Director. TikTok creator. Nostalgia queen. Makeup hoarder." Keep in mind if you want to use a specific custom font, you will need to make sure you use the @import code from Google Fonts. (See my full profile code for example- Google Fonts will generate it for you!)

ADD AN IMAGE ANYWHERE

<img src="Put your URL here"/>

You can pull images from the hoards of blingees and sparkle gif images from myspace days of yore OR upload your own image to imgur/photobucket and add the URL there.

I hope this helps! I'm still figuring it out as I go and there are some differences between this and myspace. I will create more blogs as I figure them out. <3

IF YOU WANT SOMETHING TO GET STARTED WITH....

Here is the code I put in the "About Me" section of my profile exactly!




<style>* {cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym53.ani), url(https://cur.cursors-4u.net/symbols/sym-1/sym53.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/05/30/sym53.html" target="_blank" title="Yin And Yang"><img src="https://cur.cursors-4u.net/cursor.png" alt="Yin And Yang" style="position:absolute; top: 0px; right: 0px;"/></a>


<img src="https://www.gifs-paradise.com/animations/animated-gifs-dollz-443.gif"/><img src="https://www.gifs-paradise.com/animations/animated-gifs-dollz-435.gif"/><img src="https://www.gif.ovh/hmong-gif/Dollz%20Gif/Dollz%20Gif%20(43).gif"/>

<h1 style="color: rgb(255,0,201); size: 24px;"><marquee>**wElCoMe tO mY sPaCeHey!** </marquee></h1>


<style>
@import url('https://fonts.googleapis.com/css2?family=Bonbon&family=Lato:wght@300&family=Reenie+Beanie&family=Sacramento&family=Sue+Ellen+Francisco&display=swap');


.profile .friends .comments-table td {
  background-image: url (https://i.gifer.com/Z9e1.gif);
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-family: 'Lato', sans-serif;
letter-spacing: 1px;
text-transform: lowercase;
}

.comment-replies {
padding: 0 2px;
border: 2px dotted white;
margin-top: 4px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size:14px;
font-weight:300;
}
.blog-preview p {
font-family: 'Lato';
font-size:25px;
text-transform; uppercase;
letter-spacing: 1px;
}



    .profile-pic {
        border-radius: 500px;
        
    }

nav .links {
background-color: #c99fff;
padding: 3.5px 16px 5.5px 16px;
text-transform: lowercase;
letter-spacing:  1px;
}




body {

background: linear-gradient(196deg, rgba(255,0,201,1) 2%, rgba(200,21,162,1) 16%, rgba(115,120,188,1) 54%, rgba(0,255,224,1) 100%);
background-image:url(https://i.pinimg.com/originals/20/cc/cf/20cccffef772538203fa36bcad3e9485.gif);
 }

.col.w-40.left .profile h1 {
font-family: 'Sacramento', cursive;
font-size:25px;
}

.profile .blurbs .heading, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background: rgba(156,56,206,1);
border-radius: 10px;
box-shadow: 2px 2px 7px #000;
color: #fff;
font-family: 'Sacramento', cursive;
font-size:35px;
text-transform: lowercase!important;
padding: 2px 7px;
}

.details-table td, .details-table td:first-child {
background: none;
}
.profile .blurbs .section h4 {
display:none;
}
.details-table td:first-child {
width: 30%;
}

main {
background: rgb(245,173,231);
background: linear-gradient(300deg, rgba(245,173,231,1) 10%, rgba(255,255,255,1) 49%, rgba(247,163,232,1) 100%);

}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border:0px;
}
.profile-pic img {
border: 8px double rgba(156,56,206,1) !important;
outline: double !important;
}

nav.top {
opacity: .5!important;
}

nav .top {
display: flex !important;
opacity: 1 !important;
border-radius: 20px;
margin-top: 20PX;
margin-bottom: 20px;
}

.top {
background-color: rgb(255,0,201)!important;
background-image: url(https://i.pinimg.com/originals/d3/20/ab/d320ab3633f51832a7f168780a36bf1e.gif);

}

:root {
        
        --lighter-blue: url(https://i.pinimg.com/originals/d3/20/ab/d320ab3633f51832a7f168780a36bf1e.gif);
        --even-lighter-orange: violet;
        --light-orange: url(https://i.pinimg.com/originals/d3/20/ab/d320ab3633f51832a7f168780a36bf1e.gif);
        
      
    }

 .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }

    .profile .friends .person img {
        border-radius: 500px;
    }

    .blog-preview p {
        font-size: 1.4rem;
    }


</style>
<h2 style="color: #9C39CE; font-size:38px; font-family: 'Sacramento', cursive;">Creative Director. TikTok creator. Nostalgia queen. Makeup hoarder. 

</h2><p>I'm technically a trained actor but now I spend my time making <a href="https://www.tiktok.com/@retro.avocado?source=h5_m">90s/00s tiktok videos. </a>I also am a makeup artist, lover of fashion & pop music/pop culture, anything retro and I'm a graphic designer/artist. <br/><br/>
I just love to create and I love nostalgia. So naturally I'm excited to be here!<img src="https://www.picgifs.com/mini-graphics/mini-graphics/butterflies/mini-graphics-butterflies-437015.gif"/> <br/><br/>


<img src="https://hosting.photobucket.com/images/c125/J9isyourstar/ezgif.com-gif-maker_(1).gif"/>
<img src="https://i.imgur.com/E2eFS86.png" width="300px" height="300px"/>



<img src="https://dl5.glitter-graphics.net/pub/584/584005hwwvedrors.gif"/>
<img src="https://i.imgur.com/96qZWIQ.gif" width="300px"" height="300px"/>

180 Kudos

Comments

Displaying 18 of 18 comments ( View all | Add Comment )

alice	1724132441 i dont know why but nothing is working for my background :( Report Comment rty dat maybe.. .profile { background: url(link); } by xeanonicVivisection; 1724242624; Report with tags they're just disappeared by xeanonicVivisection; 1724242719; Report you have to do body { background-image: url("your url here"); } by cas; 1731429820; Report
lovtaste	1716259101 is this outdated .. i cnt get the nav bar 2 work >_< Report Comment
lovtaste	1716258793 is this outdated .. i cnt get the nav bar 2 work >_< Report Comment
Aya	1700209858 can i make the middle white part transparent?? Report Comment just add the same code you added for the main background image, like this: body { background-image: url(insert the image you want); background-attachment:fixed; background-repeat:no-repeat; background-position:center,center;} } and then for the white middle part: main { background-image: url(insert same image from the first part); background-attachment:fixed; background-repeat:no-repeat; background-position:center,center;} } by NASTIA XD; 1725473029; Report
The Smart-Casual Gamer	1698061232 This a very comprehensive piece, but I'm still unable to get a background to appear. I copy the link, insert it exactly where you say, but all I'm getting is a grey screen. Report Comment try copying image adress instead by Ezekiel; 1699056418; Report try copying image adress instead by Ezekiel; 1699056423; Report I'll give that a go. Thanks! by The Smart-Casual Gamer; 1699099144; Report did u find a way to fix it? by mac; 1714394612; Report Sadly not, but I'm giving it another go this afternoon as I've figured out how to do a few other things to my profile page. Thanks for asking though! by The Smart-Casual Gamer; 1714395006; Report
L 🩻	1683332027 ik this is old but tysm!!!!! (；^ω^)(つ≧▽≦)つ Report Comment
ClownGuy835	1634354082 I'm struggling with the color customizing, how can I fix the white middle bit and make it a solid color? Report Comment
KarasuTengu	1621135737 Thank You! Report Comment
LittleByte	1618679387 Thank you for sharing this. It was really easy to understand. I am going to have to keep working at it, but I am excited to see what my creativity will bring. Report Comment
Nikki	1612853057 I love your page and your tik toks! Thanks for sharing! Report Comment
Queen Amber	1610999947 how do you add the music? Report Comment I haven't played with music yet honestly! by ☆janine☆; 1611094004; Report OH - if you mean spotify- just go here: https://developer.spotify.com/documentation/widgets/generate/embed/ by ☆janine☆; 1611094035; Report
Sabrina	1610898403 can i just pay you like $5 to make my page for me lol i suck at coding and understanding it Report Comment awww just let me know what you're having issues with i'm happy to help! by ☆janine☆; 1611094074; Report
✨Marissa_Mediocre✨	1610294386 a lot of these comments are about the same thing I was struggling with. I figured out I was putting the wrong URL in the code. make sure you open the image in a new tab, not the link. I have a Mac so I had to change my mouse setting so I could right click the image and open image (again not link lol ) in new tabard copy and paste that URL from the searcher. hope this helps. Report Comment
✨Marissa_Mediocre✨	1610160508 same here with the image it thought maybe it was me being on Mac but don't see how that would make a difference. then thought maybe it was where im getting my images from but I've tried several. I used to do this all the time now I feel so old. ahhhh Report Comment
elyyy.🥀	1610136010 Thank you for these codes! How do I get an Image url? Report Comment
Christina	1610048472 the background one isn't working for me and i've tried multiple of variations. haaalp! Report Comment
bridgett	1609969859 quick question... probably a dumb one, but the image one its working for me lol Report Comment idk if it may be it but !! you have to do the image url not the link url to said image :) i got confused w that and hopefully im right on this one >~ by c0ntluvr; 1631638366; Report
libra_baby01	1609894599 Amazing, thanks. Report Comment