☆janine☆'s profile picture

Published by

published
updated

Category: Art and Photography

View Blog View Profile Report Blog Entry

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"/> 





207 Kudos

—

Comments

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

NOVA

 NOVA's profile picture

TYSM FOR THIS!


Report Comment

aspenn

 aspenn's profile picture

how do you move the images? like making it center,right or left?


Report Comment

angelwingsxx

 angelwingsxx's profile picture

how do you change the text color?


Report Comment

angelwingsxx

 angelwingsxx's profile picture

how do you change the text color?


Report Comment

nico

 nico's profile picture

im confused -- HOW do i make my main/middle whit sec an image????


Report Comment



copy n paste this to your about me section and see if it works, but change the "background: url(...)" part
you'll have to use imgbb to generate a link for your actual image and check that it also works.(use this person's tut for how to use imgbb https://blog.spacehey.com/entry?id=88862)


main {
border-radius: 5px;
border: 10px double transparent;
padding: 15px;
border-image: url(...) 30 stretch;
color: black;
background: url('https://i.ibb.co/Rz1f9Jj/df236gd-6437845c-7c9b-4857-8537-a5cd8222587d.jpg') no-repeat fixed; background-size: cover;
background-color: #2b1c30; }

by madison ♡; ; Report

thank u barbie ^_^ 🖤 /ref

by nico; ; Report

alice

 alice's profile picture

i dont know why but nothing is working for my background :(


Report Comment



rty dat maybe..



.profile {

background:
url(link);

}

by luminopsychonaut; ; Report

with tags they're just disappeared

by luminopsychonaut; ; Report

you have to do
body {
background-image: url("your url here");
}

by Cas; ; Report

lovtaste

 lovtaste's profile picture

is this outdated .. i cnt get the nav bar 2 work >_<


Report Comment

lovtaste

 lovtaste's profile picture

is this outdated .. i cnt get the nav bar 2 work >_<


Report Comment

Aya

 Aya's profile picture

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 >_<; ; Report

The Smart-Casual Gamer

 The Smart-Casual Gamer's profile picture

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



I'll give that a go. Thanks!

by The Smart-Casual Gamer; ; Report

did u find a way to fix it?

by mac; ; 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; ; Report

L 🩻

 L 🩻's profile picture

ik this is old but tysm!!!!! (；^ω^)(つ≧▽≦)つ


Report Comment

ClownGuy835

 ClownGuy835's profile picture

I'm struggling with the color customizing, how can I fix the white middle bit and make it a solid color?


Report Comment

KarasuTengu

 KarasuTengu's profile picture

Thank You!


Report Comment

LittleByte

 LittleByte's profile picture

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

 Nikki's profile picture

I love your page and your tik toks! Thanks for sharing!


Report Comment

Queen Amber

 Queen Amber's profile picture

how do you add the music?


Report Comment



I haven't played with music yet honestly!

by ☆janine☆; ; Report

OH - if you mean spotify- just go here: https://developer.spotify.com/documentation/widgets/generate/embed/

by ☆janine☆; ; Report

Sabrina

 Sabrina 's profile picture

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☆; ; Report

✨Marissa_Mediocre✨

 ✨Marissa_Mediocre✨'s profile picture

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✨

 ✨Marissa_Mediocre✨'s profile picture

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.🥀

 elyyy.🥀's profile picture

Thank you for these codes!
How do I get an Image url?


Report Comment