layout tutorial!! how to make your own layout (update later)

I myself am no coding expert, but I've learned a lot and decided to help others learn how to make their own layouts, or add details/bits of codes to their already existing layouts! I'm gonna be separating each part into sections, beginning with websites I recommend for testing or dividers or images or whatever, to the basic parts of the layout (background colours/images, headers, box colours), to smaller bits of code that'll help "cleanup" your layout or make it look less plain.

I also do recommend that you do this on laptop/PC or whatever as it will probably look better. If you're a mobile user I recommend you go on google or chrome or whatever and click on use desktop mode to view while you're making your layout.

Anyways, this blog will be updated with more code as well (because if I sat here and added everything it would take me all day...) but for now it'll just be the basics. 

UPDATE (AGAIN..): I also have a Telegram channel where I'm gonna be posting extra codes, layouts, and tutorials or whatever else))

__________________________________________________________________________

Spacehey Layout Tester

Glitter Graphics

Hex Colour Picker

Image/Gif Uploader

___________________________________________________________________________

Basic coding (background, colouring, optional banner, etc)

You're going to have to use <style> and </style> tags for most of the codes. I'll also write out the coding so feel free to copy and paste and edit it.

<style>

1) — The background behind your profile

body {

   background-image: url(PUT YOUR LINK INBETWEEN HERE);

} 

OR if you want a colour rather than an image

body {

   background-color: COLORHERE;

} 

2) — The background OF your profile 

main {

  background-color: COLOR CODE GOES HERE;

  color: COLOR CODE GOES HERE(this is for the text);

(If you want an image instead of a colour for the background of your profile, change "background-color" to "background-image: (URL INSIDE);

3) — The root (colours of text, information tables, headers...)

: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);

    }

4) — Banner (goes above your profile)

main:before {

 width: 100%;

 height: 125px ;

 display: block;

 content: "";

 background-image: url('YOUR URL GOES HERE');

 background-position: center center;

 background-size: cover;

}

You can adjust the height to whatever you want in order to fit your image of choice.

5) — Footer (At the bottom of your profile)

footer {

border-radius: 15px; background-image: url(https://files.catbox.moe/adxg6g.jpg);

 color: white;

}

At the end of your code add </style> tags.

___________________________________________________________________

Table sections and Headers

These edit the colours and borders of the headers on the contact headers, blog headers, etc. There are different types of borders such as solid, double, dotted, so put the type of border you want in the (BORDER TYPE HERE). Make sure you remove the brackets when copy and pasting/coding.

1) - Edit the colours + borders (where the spacehey logo is)

div.top {

  background: COLOUR GOES HERE;

  border-top: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  border-left: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  border-right: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  padding: (YOUR NUMBER HERE)px;

  margin-top: (YOUR NUMBER HERE)px;

}

2) - Editing the colours and border to the links (where the "home", "search", "blogs" buttons are

.links  {

  background: YOUR COLOUR HERE;

  border-bottom: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  border-left: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  border-right: (YOUR NUMBER HERE)px (BORDER TYPE HERE) (COLOUR HERE);

  padding: (YOUR NUMBER HERE)px;

}

3) - Placing image behind your profile picture

.general-about .details{

padding: 2px;

background: COLOURCODE;

border: PIXELpx inset COLOURCODE;

background-image: url("LINK");

background-size:cover;

box-shadow: 0px 0px 10px 0px COLOURCODE;

}

4) - Changing the image of contact icons

<style> 

.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 */

     content: url("LINK")

    }

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

     /* add to favorites */

     content: url("LINK")

    }

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

     /* send Message */

     content: url("LINK")

    }

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

     /* forward to friend */

     content: url("LINK")

    }

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

     /* instant message */

     content: url("LINK")

    }

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

     /* block user */

     content: url("LINK")

    }

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

     /* add to group */

     content: url("LINK")

    }

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

     /* report user */

     content: url("LINK")

    } 

</style>