Published by Pidgeon

published 1687528382
updated 1718812711

View Blog View Profile Report Blog Entry

A guide to making your own layout (simplified)

UPDATE:

I'm currently working on an updated version of this guide, and the second guide. I'll do my best to answer common questions. For those who have unanswered questions on this post, most of the answers are in this or my second guide, just read the whole blog post (*^▽^*)

Heyyyy! So, since I created my account I've been messing around with my own HTML stuff for my profile. I'm not an expert, but I would love to share some of the stuff I've learned and give some little templates to help other newer users!

First of all, I can't recommend using the Spacehey test website enough. It's easy to use and lets you see what your code does when you plug it in. It's a lot better than just adding the code to your profile, saving, checking if it worked, troubleshooting, ect.

Start with style tags and end with them too,

<style>

(your stuff)

</style>

these bad boys hold all of the stuff to change the actual layout of your profile. SO things like music and blinkies DON'T go in the style tags.

I didn't realize this when I first started but having your code in a certain order is important, if it isn't in order then the code won't work. So, if you run into an issue with your code I recommend 1st checking if you messed up the actual code, 2nd mess with where you placed the code.

Most of your coding stuff should be in the About Me section of your profile.

Here's some templates of code that I'm currently using on my profile (in the order they appear in code):

1) Loading Screen

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

2) Colors for the details (the colors of the info boxes, ect.) [for this one I make sure I use Spacehey CSS preview, because you can easily see what colors do what, and if they look good together. I also use HTML Color Codes to find all the colors I want!]

:root {

--logo-blue: #(color number);

--darker-blue: #(color number);

--lighter-blue: #(color number);

--even-lighter-blue: #(color number);

--lightest-blue: #(color number);

--dark-orange: #(color number);

--light-orange: #(color number);

--even-lighter-orange: #(color number);

--green: #(color number);

}

3) Background (to the left and right)

body

{background-image: url(YOUR URL GOES HERE); no-repeat fixed; background-size:cover;

}

or, if you want to do a solid color:

body

{background-color: YOUR COLOR CODE GOES HERE; no-repeat fixed; background-size:cover;

}

4) Background behind your pfp

main {

background-color: COLOR CODE GOES HERE;

color: COLOR CODE GOES HERE;

5) The contact symbols (I just use emojis but I'll update if I figure out how to use gifs :p)

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

/* Add to Friends */