Report Blog Entry
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"/>
Comments
Displaying 20 of 29 comments ( View all | Add Comment )
vinz
Thank youu!
sirac
thanks1'213'2!!!
BoyKiZZer
thx!1!1
punkrockprince
i cannot for the life of me color my blurbs header... i really like this layout i have but its really bothering me
Roseinkel
for some reason whenever i try to add a pfp it doesn't work, the image is sized correctly, its a png and it still doesn't work! what can i do to fix this?
☆⋆｡𖦹°‧★ Cyberstxr.exe ☆⋆｡𖦹°‧★
THANK YOU SO MUCH im new to coding and this was rlly ez to follow!
NOVA
TYSM FOR THIS!
aspenn
how do you move the images? like making it center,right or left?
(very late reply....... ik)
you use the code align="center" (for center), align="right" (for right), and align="left" (for left)
example:
(align="center")(img src="kitty.jpg")
replace the round brackets with less than signs (idk how they're called......)
by ru1kinuuu; ; Report
angelxnightroad (autoplay)
how do you change the text color?
angelxnightroad (autoplay)
how do you change the text color?
jamie
im confused -- HOW do i make my main/middle whit sec an image????
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 jamie; ; Report
alice
i dont know why but nothing is working for my background :(
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 Castiel; ; Report
lovtaste
is this outdated .. i cnt get the nav bar 2 work >_<
lovtaste
is this outdated .. i cnt get the nav bar 2 work >_<
Aya
can i make the middle white part transparent??
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
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.
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 🩻
ik this is old but tysm!!!!! (；^ω^)(つ≧▽≦)つ
ClownGuy835
I'm struggling with the color customizing, how can I fix the white middle bit and make it a solid color?
KarasuTengu
Thank You!
LittleByte
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.