ULTIMATE LAYOUT TUTORIAL FROM BASICS TO ANIMATIONS!!

!INFO! I have some troubles editing this blog since almost nothing I write will save.. (I hope this saves T-T) i don't know if it's some character limit thing or what but I can't add new stuff on this entry. Because of that I made another entry which is a part 2 kind of! Here's the link to part two: ULTIMATE LAYOUT TUTORIAL PART 2

I thought I'd make a post about the codes I used for my profile since I myself had quite a lot of problems with getting some codes to work or pictures/gifs to show up. Turns out; some codes and websites were just not compatible and didn't work the way they were supposed to..  

I'm not a professional at coding at all yet, but I'll try my best to explain the codes and what they do so maybe profile customizing will be easier to other newbies than it was for me! First thing I'll say is that I highly recommend using this testing site, it will save you a LOT of time.

I'll go trough pretty much everything that's in my profile and if I use new codes I'll try to remember to update them here too!

I've seen many tutorials telling people to use Imgur to copy the picture address but unfortunately Imgur doesn't work too well right now (at least for me) so I recommend not using it to make this easier for you.

I've found my pictures and gifs mostly from Pinterest, Tenor and Glitter-Graphics and all of those seem to be working well!

Last little thing before getting into all the contents: If you want to save time and want to skip to a specific part of this blog without having to scroll all the way I highly recommend using the Ctrl+F shortcut which opens a searchbar!

------------------------------------------------------------------------------------------------

CONTENTS

PART 1: Backgrounds, colors, banner and footer

Step 1: Font size

Step 2: Background images

Step 2.1: Background colors

Step 3: Banner

Step 4: Footer

Step 5: Color codes

Step 5.1: Colors in words

PART 2: Customizing the whole thing (fonts, cursors, borders, images, embeds, music...)

Step 1: Loading screen

Step 2: Borders

Step 2.1: Backgrounds of bordered areas

Step 3: GIF profile picture

Step 4: Contact icons

Step 5: Custom cursor

Step 6: Custom font

Step 7: Falling objects

Step 8: Custom online status

Step 9: Custom heading texts

Step 9.1: Custom details table headings

Step 10: Navigation links' and counting numbers' colors

Step 11: Animations - Floating profile

Step 11.1: Shaking animation

Step 11.2: Color changing username

Step 11.3: Slideshow/marquee animation

Step 11.4: Film grain animation

Step 12: Embeds

Step 13: Dropdown menu

PART 3: Bonus stuff

Image code and images floating outside of your profile body area

------------------------------------------------------------------------------------------------

First things first, you'll start and end the code with style tags! Meaning, you start with <style> and end with </style> and almost everything will be in between those tags. Now let's start customizing your profile!

------------------------------------------------------------------------------------------------

PART 1: Backgrounds, colors, banner and footer

Remember to start your HTML code with the style tag and then copy the following code in the "About me" section of your profile! Almost everything goes in that section!

------------------------------------------------------------------------------------------------

<style>

p{

font-size: 150%;

}

h1,h2,h3,h4,h5{

font-size: 200%;

}

body {

background-image: url(YOUR URL HERE);

background-size: 900px;

}

main { 

background-image: url(YOUR URL HERE);

background-size: 400px;

} 

.profile .blurbs .heading,

.profile .friends .heading{

background-color: rgb(36,36,34);

color: rgb(76,0,19);

}

.profile .contact .heading,

.profile .table-section .heading{

background-color: rgb(76,0,19);

color: rgb(76,0,19);

}

</style>

<style>

main:before {

width: 100%;

height: 300px;

display: block;

content: "";

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

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

</style>

<style>

footer {

border-radius: 15px;

background-image: url(YOUR URL HERE);

background-size: 800px;

color: white;

}

</style>

<style>

:root {

--logo-blue:black;

--darker-blue:rgb(76,0,19);

--lighter-blue:black;

--even-lighter-blue:;

--lightest-blue:;

--dark-orange: black;

--light-orange:black;

--even-lighter-orange:black;

--green: rgb(76,0,19);

}

</style>

------------------------------------------------------------------------------------------------

Now that you've copied that we can start editing it and making it look like your own profile!

Just a few notes before we continue: when you paste your pictures in the code you need to copy the image address, not just the image. So right click on your image and choose "copy image address". When you put it in your code, paste it between the parentheses!

------------------------------------------------------------------------------------------------

Step 1: Font size

First thing to change is the size of your text! The first two codes are the ones that define the font size. You don't need to change the size if you don't want to but for everyone who wants to, this is how! 

Just to open up the code a little bit: you'll notice that we use lots of brackets and semi-colons and I'll try to explain what they mean since it took me a while to understand them. The brackets are for opening and closing one code. They make it a lot easier to see where your code starts and where it ends! The semi-colons close one part of the code so if your code isn't working, remember to check if you have semi-colons dividing the different parts of the code.

Might seem confusing at first but it doesn't take too long to understand the purpose of them!

So the bolded parts are the ones we're editing when we want to change the size. The first code is to change the size of all the text in your profile except heading text while the second code changes the size of the headings only. Every time you see h1, h2, h3 etc. they mean heading numbers!

------------------------------------------------------------------------------------------------

p{

font-size: 150%;

}

h1,h2,h3,h4,h5{

font-size: 200%;

}

------------------------------------------------------------------------------------------------

Step 2: Background images

Next we're going to change the background of your site and the profile itself. I'll also show the codes for background color if you don't want to have an image as your background!

As you can see we have two codes again. Body background means the area behind your profile and main is the actual profile. Find images that you like, copy the image address and paste your url where it says "YOUR URL HERE".

You can also play with the size of the background image to make it look nice! I've put 900 pixels for the body and 400 pixels for the main but feel free to change them!

------------------------------------------------------------------------------------------------

body {

background-image: url(YOUR URL HERE);

background-size: 900px;

}

main { 

background-image: url(YOUR URL HERE);

background-size: 400px;

}

------------------------------------------------------------------------------------------------

Step 2.1: Background colors

As said before, you don't have to put an image as your background. Here's how you put a solid color as the background!

The idea of the code stays the same so it's very easy! Just replace the background image codes with the ones below. Where it says "black" and "red" you can put the color you want. I'll talk about the colors and color codes later on!

------------------------------------------------------------------------------------------------

body {

background-color: black;

}

main { 

background-color: red;

}

------------------------------------------------------------------------------------------------

Step 3: Banner

Moving on to your banner! You can play around with the size for example if you want to but feel free to use the default code if you want to.

What we're going to edit now is the background image of the banner. Just like before, find a nice image you like and paste the image address where it says "YOUR URL HERE". As easy as that! Now you should have a banner image on your page.

------------------------------------------------------------------------------------------------

<style>

main:before {

width: 100%;

height: 300px;

display: block;

content: "";

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

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

</style>

------------------------------------------------------------------------------------------------

Step 4: Footer

Now let's get you a footer background image! Same thing once again, find a nice picture and paste it to the "YOUR URL HERE" part.

And before we move on let me explain some parts of the code! We have border radius which you can change if you want to. It just makes the corners of the footer rounded. Feel free to try out what works the best for you!

You can also change the size of the background to fit well. For me it's 800 pixels. And lastly the bottom line of the code means the text color of the footer. I used white but try out what looks nice!

------------------------------------------------------------------------------------------------

<style>

footer {

border-radius: 15px;

background-image: url(YOUR URL HERE);

background-size: 800px;

color: white;

}

</style>

------------------------------------------------------------------------------------------------

Step 5: Color codes

These next two codes will change the colors of your blurbs heading, friend space heading, contact heading and table section heading (meaning the part on the left with your interests).

In these codes background color is the box behind your heading and color is just the color of the heading text. I like using rgb colors but you can use other types of colors too, for example, hex codes!

I'll explain this with the rgb colors since I've done all my coding with them when I want a very specific shade. 

If you don't understand rgb colors, I'll explain! Rgb stands for red, green, blue and the number for every letter shows how much of each color the shade uses so the first number is red, second is green and third is blue. The colors go from 0 to 255.

What you'll need to do is find a shade you like (for example you can search "dark green rgb code" on google) and copy the three numbers. After you've done that you can paste the numbers in between the parentheses. I've bolded the parts for you!

------------------------------------------------------------------------------------------------

.profile .blurbs .heading,

.profile .friends .heading{

background-color: rgb(36,36,34);

color: rgb(76,0,19);

}

.profile .contact .heading,

.profile .table-section .heading{

background-color: rgb(36,36,34);

color: rgb(76,0,19);

}

------------------------------------------------------------------------------------------------

Step 5.1: Colors in words

There's also another way to use colors in the code if you don't want to look for a specific shade!

So, if you feel like you just want a solid black or solid red for example you can just write that out to the code! Before we used rgb colors but if you just want to use black, replace "rgb(0,0,0)" with "black". Very easy!

The code below changes some default colors of the page. You can try out what changes if you change the colors in the code!

------------------------------------------------------------------------------------------------

<style>

:root {

--logo-blue:black;

--darker-blue: red;

--lighter-blue:black;

--even-lighter-blue:;

--lightest-blue:;

--dark-orange: black;

--light-orange:black;

--even-lighter-orange:black;

--green:red;

}

</style>

------------------------------------------------------------------------------------------------

And now you've completed the basics of your layout! Next you can start customizing everything else now that the basics are out of the way :P

------------------------------------------------------------------------------------------------

PART 2: Customizing the whole thing (fonts, cursors, borders, images, embeds, music...)

So now comes the fun (and maybe most frustrating..) part! This is the part where you can really start customizing your profile and add music, images and whatever makes your profile look like you! 

I'll go trough loading screen, contact icons, changing your cursor, changing your font, adding falling objects, changing your heading text, adding borders and much more!

This is also the part where I struggled the most since I came across many codes and image websites that just didn't work. That's the main reason I'm making this blog so new users don't have to dive trough every code to find one that works like I did.. I hope these work for others too but let me know if there's a problem with any of the codes!

Now let's get started :P

------------------------------------------------------------------------------------------------

Step 1: Loading screen

Starting with the loading screen! It's an image or a gif that pops up when you or someone else goes to your profile. If you want to see what it looks like, check my profile!

Copy the code below and paste it at the end of your whole code. I haven't really paid attention to the order of my codes and unfortunately I can't tell you the correct order if there even is one. Everything seems to be working fine for me though so that's all that matters to me really!

The code might look confusing but the only part you *need* to edit is "YOUR URL HERE" so find a good image or gif file and paste the address there!

If you want the loading screen to be longer or shorter in time you'll edit the part that says "animation: yourAnimation 3s". That's the duration of the loading screen!

------------------------------------------------------------------------------------------------

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

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

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

animation: yourAnimation 3s ease 0s 1 normal forwards;

pointer-events: none;

}

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

nav, footer {

margin: 1em;

position: relative;

box-shadow: 5px 8px 10px #0006;

}

</style>

------------------------------------------------------------------------------------------------

Step 2: Borders

So, there's quite a lot stuff to this border thing so I'll try my best to make it logical and I'll explain it as much as I can!

The coding in this part isn't too complicated and I think it's pretty simple to understand but there's just many things to add a border to so it might look complicated.

We'll start with friend pfp borders, navigation bar borders, main page borders and page body borders, but first we need to understand a couple things about the code.

Lets take an example:

border: 7px double rgb(76,0,19);

Now let's break that down. 7px means the thickness of the border. You can change it to anything you want but it's best to stay under 10 pixels usually! 

Double is the style of the border. You can look at the different styles from the link below. Change that to the border style you want to use!

Rgb is, again, the color of the border so you can change that to another shade just like we've done before! 

There's also border radius which gives your border rounded corners. Feel free to experiment with that too!

Here's the border styles: CSS Border Styles

------------------------------------------------------------------------------------------------

<style>

.profile .friends .person img:not(.icon){

border: 7px double rgb(76,0,19); border-radius: 10px; !important; 

.general-about .profile-pic img {

</style>

<style>

nav .top {

border: 7px double rgb(76,0,19);

border-radius: 10px

}

nav .links {

border: 7px double rgb(76,0,19);

border-radius: 10px

}

main {

border: 7px double rgb(76,0,19);

border-radius: 10px

}

body {

border: 7px double rgb(76,0,19);

border-radius: 10px

}

</style>

------------------------------------------------------------------------------------------------

Moving on to more borders! These ones will give you borders around the areas that are inside your profile area. For example, your blurbs heading and blurbs text area. 

The codes work exactly the same as the previous ones, the only thing that changed is the border radius. For these ones I put every radius manually and you can use this in the previous ones too! I left one corner off because I wanted that corner to be sharp. If you want all corners to be rounded, just replace the last three lines with "border-radius: 10px;" or however many pixels you want it to be! Hope this made sense T-T

In these codes ".heading" means it affects just the box around the heading and ".inner" means it affects the text box where all your info is!

There's one part that uses "!important" at the end of the line. It's there to override the default coding with our coding since some parts need that to be able to work properly.

These give borders to blurbs heading, blurbs text box, friends heading, friends text box, contact box, url info, table section and all the parts in the table section. Feel free to leave off all parts that you don't want a border to.

------------------------------------------------------------------------------------------------

.profile .blurbs .heading {

border: 7px double rgb(76,0,19);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

}

.profile .blurbs .inner {

border: 7px double rgb(76,0,19);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

.profile .friends .heading {

border: 7px double rgb(76,0,19);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

}

.profile .friends .inner {

border: 7px double rgb(76,0,19);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

div.contact {

border: none !important;

border: 7px double rgb(76,0,19) !important;

border-radius: 10px;

}

.profile .url-info {

border: 7px double rgb(76,0,19);

border-radius: 10px;

}

.profile .table-section {

border: none !important;

border: 7px double rgb(76,0,19) !important;

border-radius: 10px;

}

.profile .table-section td {

border: none !important;

border: 4px double rgb(76,0,19) !important;

border-radius: 7px;

}

</style>

------------------------------------------------------------------------------------------------

And now even more borders! These are the last ones I swear..

I struggled with this one for quite a while but finally got how to do it! I wanted to have borders around my general profile info, mood box and blog preview and here's how to do it!

The idea is the same again; change the border thickness, style and color to your liking. Same with the border radius. Now, you may need to play around with the height so the borders fit your profile well.

You can give these boxes a background color too so your text is easier to read. Just replace the lines that say "background-color" with the color you want. If you want a background image instead, replace the whole line with "background-image: url(YOUR URL HERE);".

The last code in this section is the blog preview heading. There's a part where you can paste a background image for the heading! You can also edit the color of the text in the heading by changing the last line to any color you want :P

------------------------------------------------------------------------------------------------

<style>

:root{

.general-about, .left > h{

border:7px double rgb(76,0,19)!important;

border-radius: 10px;

height: 185px;

}

.mood, .left > h{

border:7px double rgb(76,0,19)!important;

border-radius: 10px;

height 100px;

}

div.contact,div.url-info,.mood,.general-about,div.inner > table  {

background-color:rgb(36,36,34)!important;

}

.profile .blog-preview {

border: 7px double rgb(76,0,19)!important;

background-color: rgb(36,36,34);

border-radius: 10px;

padding: 0px!important;

}

.profile.heading,.blog-preview h4{

margin: 0px!important;

background-image: url(YOUR URL HERE)!important;

background-size: 300px;

color: rgb(76,0,19)!important; 

}

</style>

------------------------------------------------------------------------------------------------

Step 2.1: Background colors for bordered areas

Some of the areas got a background color already but for some of them I used separate codes because it felt easier for myself.

These are pretty much the same as all we've done before. As we know, ".heading" affects the heading backgrounds and ".inner" affects the text box backgrounds!

Paste your background images where they belong and change the background colors and corner radius the way you want to ^^

Feel free to copy the entire code and start experimenting but if you need a bit more info, scroll down! I've broken this code into shorter pieces there.

------------------------------------------------------------------------------------------------

<style>

.profile .blurbs .heading {

background-image: url(YOUR URL HERE);

background-size: 500px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

.profile .blurbs .inner {

background-color: rgb(36,36,34);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

.profile .friends .heading {

background-image: url(YOUR URL HERE);

background-size: 500px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

}

.profile .friends .inner {

background-color: rgb(36,36,34);

border-top-right-radius: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

.comments-table td:first-child {

background-image: url(YOUR URL HERE);

background-size: 200px;

}

.comments-table td:last-child {

background-image: url(YOUR URL HERE );

background-size: 300px;

}

.profile .contact .heading {

background-image: url(YOUR URL HERE);

background-size: 300px;

}

div.contact {

background-color: rgb(36,36,34);

}

.profile .url-info {

background-image: url(YOUR URL HERE);

background-size: 300px;

background-color: rgb(36,36,34);

}

.profile .table-section .heading {

background-image: url(YOUR URL HERE);

background-size: 300px;

}

.details-table td:first-child {

background-image: url(YOUR URL HERE);

background-size: 200px;

}

table.details-table {

background-image: url(YOUR URL HERE);

}

.details-table td {

background: #ffedf745;

}

div.table-section {

background-image: url(YOUR URL HERE);

}

</style>

------------------------------------------------------------------------------------------------

Let's start with these ones. All of these four codes affect your blurbs section and friends section!

The first one changes your blurbs heading's background and second changes the blurbs text box's background.

The third code affects your friends section's heading and the fourth one affects the text box of that section. Pretty easy, right?

------------------------------------------------------------------------------------------------

.profile .blurbs .heading {

background-image: url(YOUR URL HERE);

background-size: 500px;

border-top-left-radius: 10px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

.profile .blurbs .inner {

background-color: rgb(36,36,34);

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

.profile .friends .heading {

background-image: url(YOUR URL HERE);

background-size: 500px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

border-top-left-radius: 10px;

}

.profile .friends .inner {

background-color: rgb(36,36,34);

border-top-right-radius: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

------------------------------------------------------------------------------------------------

Now for these ones! These ones affect your comment section.

The first one gives a background image to the part of your comment section where people's profile pictures are.

The second one gives a background image to the comments themselves!

------------------------------------------------------------------------------------------------

.comments-table td:first-child {

background-image: url(YOUR URL HERE);

background-size: 200px;

}

.comments-table td:last-child {

background-image: url(YOUR URL HERE );

background-size: 300px;

}

------------------------------------------------------------------------------------------------

The next four codes affect the left side of your profile.

The first one changes the background image of your contact heading and the second one changes the background color of the contact box itself.

The third one is the background image of your url box and the fourth is the background image of your table section heading!

------------------------------------------------------------------------------------------------

.profile .contact .heading {

background-image: url(YOUR URL HERE);

background-size: 300px;

}

div.contact {

background-color: rgb(36,36,34);

}

.profile .url-info {

background-image: url(YOUR URL HERE);

background-size: 300px;

background-color: rgb(36,36,34);

}

.profile .table-section .heading {

background-image: url(YOUR URL HERE);

background-size: 300px;

}

------------------------------------------------------------------------------------------------

And now, finally, for the last ones..

These affect your rable section details!

The first one is the background image of the part where your "general", "music", "movies" etc. texts are while the second one is the background of the whole section. The third one just allows us to have a see trough background behind your text so don't edit that code!

------------------------------------------------------------------------------------------------

.details-table td:first-child {

background-image: url(YOUR URL HERE);

background-size: 200px;

}

table.details-table {

background-image: url(YOUR URL HERE);

}

.details-table td {

background: #ffedf745;

}

div.table-section {

background-image: url(YOUR URL HERE);

}

------------------------------------------------------------------------------------------------

Step 3: GIF profile picture

Woah! We're finally (almost) done with borders and stuff! I hope you still want to continue after that.. But now we'll learn how to make your pfp to a gif.

This was a part I struggled with until I realized that the problem was me using Imgur to copy the gif address. Imgur basically broke all my gifs so if you have problems with gifs and have been using Imgur, that might be why.

Anyway! If you want your pfp to be a gif in your profile (doesn't show up in your comments, blog entries etc.) copy the code below. It has a lot of stuff but let's break it down a bit.

So, your gif goes once again to the part with "YOUR URL HERE". That should give you the gif pfp, but if you want to customize it a little bit more I've added a code part which gives you a border to your gif! It works the same as all the borders before.

------------------------------------------------------------------------------------------------

<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL(" YOUR URL HERE "); border: 7px double rgb(76,0,19); border-radius: 10px; display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>

------------------------------------------------------------------------------------------------

Step 4: Contact icons

If you want to change your contact icons, use the code below! 

Just copy the code and paste your image url or your icon to all the parts that say "URL". This works the best with small pixel icons. I haven't used pixels on my profile so I don't have any good sites to recommend unfortunately but there's plenty of them out there!

You can also use a copy and paste text icon like I did since they're small and fit nicely in the contact area.

------------------------------------------------------------------------------------------------

<style>

/* contact icons */ .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" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorite */ content: "URL" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send a message */ content: "URL" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* foward to friend*/ content: "URL" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "URL" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "URL" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add 2 group */ content: "URL" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */ content: "URL" }

</style>

------------------------------------------------------------------------------------------------

Step 5: Custom cursor

Who wouldn't want a custom cursor on their profile?? It's so cool!

This part is very simple; just go to this website, choose the perfect cursor and copy the HTML code it gives you. If you don't find the code, just scroll down a bit and it should be there!

For example my code looks like the one below. Just paste it in your code and it should be working!

------------------------------------------------------------------------------------------------

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol338.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/14/tiny-skull-crossbones.html" target="_blank" title="Tiny Skull Crossbones"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Skull Crossbones" style="position:absolute; top: 0px; right: 0px;"/></a> </style>

------------------------------------------------------------------------------------------------

Step 6: Custom font

Let's get you a custom font now! This is also a pretty easy part.

Go to Google Fonts and find a font you like. Then press "get font" > " get embed code" > "@import" and copy your font link to the bolded part of the first code below.

After that copy the font family from the CSS code (right below the embed code) and paste it to the bolded parts of the last two codes.

Your code should look the same as the one below, just with a different link and font family!

------------------------------------------------------------------------------------------------

<style>

@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');

p{

  font-family: "New Rocker", system-ui;

  font-size: 130%;

}

h1,h2,h3,h4,h5{

  font-family: "New Rocker", system-ui;

  font-size: 200%;

</style>

------------------------------------------------------------------------------------------------

Step 7: Falling objects

Hate to say this but I struggled with this part for HOURS until I made it work.. It was worth it though, I really like the falling objects on the profile!

This seems like a lot of code but the only things you need to edit are the "YOUR URL HERE" parts again! Just paste your image address there! If your images are too big or too small, you can edit the width. I used 30 and 25, but feel free to change those up!

With this code you need to paste the whole thing to your "About me" section like everything else. After that paste the first part (from <div class="snowflakes"> to </div>) to your "general" section so the falling objects reach that part of your profile too.

------------------------------------------------------------------------------------------------

<div class="snowflakes">

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="25"/></div>

<div class="snowflake"><img src="YOUR URL HERE" width="30"/></div>

</div>

<style>

 @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

------------------------------------------------------------------------------------------------

Step 8: Custom online status

Below is the code to change your online status to an image!

First the code hides the original online status and then replaces it with your image. Glitter Graphics has a section with online status images so I recommend checking that out if you want to have a custom one!

------------------------------------------------------------------------------------------------

<style>

.online { visibility: hidden; } .online img { content: url(" YOUR URL HERE "); animation-name: none; visibility: visible; height: 25px; width: 90px; }

</style>

------------------------------------------------------------------------------------------------

Step 9: Custom heading texts

If you don't like the headings you have on your page and feel like they don't fit you vibe, there is a way to change them to whatever you want!

The codes below have a line that tells what they affect (BLURBS, ABOUT ME, BLOG PREVIEW...) so it's easier to understand what you'll edit when you touch those.

So in the "YOUR TEXT HERE" part you can put your own headings! If the font size isn't good for you, you can edit the part that says "1.5rem;"

------------------------------------------------------------------------------------------------

<style>

/* BLURBS */

.blurbs .heading h4 {

font-size: 0;

}

.blurbs .heading h4:before {

font-size: 1.5rem;

content: "YOUR TEXT HERE";

color: rgb(76,0,19);

}

/* ABOUT ME */

.blurbs .section:nth-child(1) h4 {

font-size: 0;

}

.blurbs .section:nth-child(1) h4:before {

font-size: 1.5rem;

content: "YOUR TEXT HERE";

}

/* WHO I'D LIKE TO MEET */

.blurbs .section:nth-child(2) h4 {

font-size: 0;

}

.blurbs .section:nth-child(2) h4:before {

font-size: 1.5rem;

content: "YOUR TEXT HERE";

}

/* BLOG PREVIEW */

.blog-preview h4 {

font-size: 0;

}

.blog-preview h4:before {

font-size: 1.5rem;

content: " YOUR TEXT HERE";

}

/* FRIENDS */

.friends:not(#comments) .heading h4 {

font-size: 0;

}

.friends:not(#comments) .heading h4:before {

font-size: 1.5rem;

content: "YOUR TEXT HERE";

}

</style>

------------------------------------------------------------------------------------------------

Step 9.1: Custom details table headings

These are the codes to change your detail table's headings! That means general, music, movies, television, books and heroes.

The codes are in the same order as the sections I just listed!

Same thing as before; put your text in the "YOUR TEXT HERE" part and play around with the "1.3rem;" until the size looks good!

These ones also allow you to change the color of the text so just insert your color where mine has the rgb code :P

------------------------------------------------------------------------------------------------

<style>

.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child p {

    font-size: 0;

}

.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child p {

    font-size: 0;

}

.table-section:nth-last-child(2) .details-table tr:nth-child(3) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(3) td:first-child p {

    font-size: 0;

}

.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child p {

    font-size: 0;

}

.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child p {

    font-size: 0;

}

.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p::before {

    content: "YOUR TEXT HERE";

    font-size: 1.3rem;

color: rgb(76,0,19);

}

.table-section:nth-last-child(2) .details-table tr:nth-child(6) td:first-child p {

    font-size: 0;

}

</style>

------------------------------------------------------------------------------------------------

Step 10: Navigation links' and counting numbers' colors

If you want to, you can change the colors of your navigation bar links and the numbers that show your comment count and friend count!

The only thing you'll need to change is the shade you want to use!

------------------------------------------------------------------------------------------------

<style>

.count {

color: rgb(76,0,19);

}

nav .links a {

color: rgb(76,0,19);

}

</style>

------------------------------------------------------------------------------------------------

Step 11: Animations - Floating profile

I have some animations on my profile so here's the codes for all of them!

Let's start with this one below. You don't need to edit anything in this one if you don't want to but you can always try what happens!

This animation makes your profile float or bob up and down if that makes sense? You can check it out on my profile! 

------------------------------------------------------------------------------------------------

<style>

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% {

transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}

</style>

------------------------------------------------------------------------------------------------

Step 11.1: Shaking animation

Once again, no need to edit anything! Just copy and paste the code below.

This one makes some parts of your profile shake when you hover over them. You can check this one out on my profile too!

------------------------------------------------------------------------------------------------

<style>

img:hover , .url-info:hover , .online:hover {

animation: shake 1s;

animation-iteration-count: infinite;

}

@keyframes shake {

0% { transform: translate(1px, 1px) rotate(0deg); }

10% { transform: translate(-1px, -2px) rotate(-1deg); }

20% { transform: translate(-3px, 0px) rotate(1deg); }

30% { transform: translate(3px, 2px) rotate(0deg); }

40% { transform: translate(1px, -1px) rotate(1deg); }

50% { transform: translate(-1px, 2px) rotate(-1deg); }

60% { transform: translate(-3px, 1px) rotate(0deg); }

70% { transform: translate(3px, 1px) rotate(-1deg); }

80% { transform: translate(-1px, -1px) rotate(1deg); }

90% { transform: translate(1px, 2px) rotate(0deg); }

100% { transform: translate(1px, -2px) rotate(-1deg); }

}

</style>

------------------------------------------------------------------------------------------------

Step 11.2: Color changing username

This animation makes your username flash with different colors. I only have two colors in mine but you could use more!

This one doesn't really need editing either if you don't want to! Some changes you can make are canging the font size that is currently at 300% or adding more colors.

If you want to add more, just add a line under the root part that says "--third: YOUR COLOR;" and with the same idea you can add even more. Remember to cange the "color: var()" part too so all your colors come in use if you have more than two.

------------------------------------------------------------------------------------------------

<style>

:root{

--first: rgb(36,36,34);

--second: red;

}

@keyframes colors{

0%{

color: var(--first);

}

25%{

color: var(--second);

}

50%{

color: var(--first);

}

75%{

color: var(--second);

}

100%{

color: var(--first);

}

</style>

<style>

h1 {

    animation-duration: 2s; /*Change the time for faster or slower*/

    animation-name: colors;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

font-size: 300%;

}

</style>

------------------------------------------------------------------------------------------------

Step 11.3: Slideshow/marquee animation

This is the code for a marquee animation! It's super simple since it just uses the basic image code within some tags.

Just paste the following code where you want your animation to be and replace "YOUR URL HERE" with your image url. You can also change the size of the images by changing the values of width and height.

If you want more images or less images in your slideshow you can just easily delete code parts or add more parts!

------------------------------------------------------------------------------------------------

<marquee>

<img src="YOUR URL HERE" width="200" height="200"/>

<img src="YOUR URL HERE" width="200" height="200"/>

<img src="YOUR URL HERE" width="200" height="200"/>

<img src="YOUR URL HERE" width="200" height="200"/>

<img src="YOUR URL HERE" width="200" height="200"/>

<img src="YOUR URL HERE" width="200" height="200"/>

</marquee>

------------------------------------------------------------------------------------------------

Step 11.4: Film grain animation

This is a grain animation code for your profile! If you want to see what it looks like, you can check it out on my profile. It doesn't show up too well since my background is pretty dark but you can probably still see what it looks like!

The code below has the grain image in it already but if you want to change it to another grain image or try what it looks like with a completely different image, just replace the url with your own one. feel free to also adjust the opacity to your liking! Right now it's set to ".2" but I, for example, put mine to ".4"

------------------------------------------------------------------------------------------------

<style>

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url(https://i.imgur.com/QpnTsrV.jpghttps://i.pinimg.com/736x/35/e2/6a/35e26ad99a1d4dbb62784028c446d053.jpg);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.2;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

@keyframes grain {

  0%, 100% { transform:translate(0, 0) }

  10% { transform:translate(-5%, -10%) }

  20% { transform:translate(-15%, 5%) }

  30% { transform:translate(7%, -25%) }

  40% { transform:translate(-5%, 25%) }

  50% { transform:translate(-15%, 10%) }

  60% { transform:translate(15%, 0%) }

  70% { transform:translate(0%, 15%) }

  80% { transform:translate(3%, 35%) }

  90% { transform:translate(-10%, 10%) }

}

</style>

------------------------------------------------------------------------------------------------

Step 12: Embeds

Not too much left anymore! Soon your profile will be as good as I can help you make it :P

Now it's finally part for embeds! I'll teach you how to add embeds from Spotify for example and also how to make your profile automatically play music when you enter your profile.

These following ones are codes that I've put in the "who I'd like to meet" part of my profile but you can put them basically anywhere you want them to show up!

The first code below is the one for automatic music. What you'll need to do is go to YouTube, choose your song, click "share" and then "embed" and copy the embed link that's between the quotation marks.

Then replace the "YOUR URL HERE" with your link and if you did it correctly, it should start playing the song whenever you enter your profile!

Now for the second embed thing!

If you want to have a song snippet or a YouTube video on your profile, you need to just copy the embed code and paste it to the section where you want it to be.

For YouTube videos you do the exact same as with the previous one (share > embed > copy the whole code) and if you want a Spotify embed like I have you go to Spotify, choose your song, click the three dots, click "share", click "embed track" and copy the code and then just paste it on your profile!

------------------------------------------------------------------------------------------------

<iframe width="0" height="0" src="YOUR URL HERE//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

------------------------------------------------------------------------------------------------

Step 13: Dropdown menu

Here we have two codes which both are for dropdown menus! The top code is for a dropdon menu with text wen you open it and the bottom one is for a dropdown menu with an image when you open it.

Copy the code where you want your menu to be and replace "YOUR HEADING HERE" with the heading of your menu and "YOUR TEXT HERE" or "YOUR URL HERE" with your menu contents or image!

------------------------------------------------------------------------------------------------

<details><summary style="font-size: 13px;" class="mb8"><u>YOUR HEADING HERE</u> </summary>

<p>

YOUR TEXT HERE

</p>

</details>

<details><summary style="font-size: 13px;" class="mb8"><u>YOUR HEADING HERE</u> </summary>

<p>

<img src="YOUR URL HERE" width=""/>

</p>

</details>

------------------------------------------------------------------------------------------------

PART 3: Bonus stuff

These are just a couple of useful codes to add images on your profile!

The first one is just to add a normal image or a gif and you'll put that code where you want your image to be. So if you want your image to be in the music section, paste the code there and if you want it to be in the about me section, paste it there! Just replace "YOUR URL HERE" with your image url again.

The second one is a code that allows you to place your images outside of your profile. If you want to see what I mean, check my profile out! There should be a cute floating angel outside of my profile borders :P

Just play around with the "right: -120px;" and "bottom: 3000px;" to move your image around!

Lastly, you might've noticed that you can't change rows just by clicking enter. If you want to change rows you need to use a little tag: <br/>

So for example:

"Hi, this is my profile

<br/>

tell me what you think about it!"

------------------------------------------------------------------------------------------------

<img src="YOUR URL HERE"/>

<div style="float:  ; max-height: 400; position: fixed; right: -120px; bottom: 3000px; z-index: 200;"><img src="YOUR URL HERE"/></div>

------------------------------------------------------------------------------------------------

So yeah, this is pretty much everything I've used to customize my profile layout! Some things might be missing but I'll update if there's something to update!

I also hope these codes work for others than myself and that I've written everything correctly.. If something is unclear, just tell me and I'll try to explain better since I'm not the best at explaining or teaching others how to do something T-T

Hopefully this finds the people who struggle to find working codes! And hopefully this finds anyone lol

Took me a while to write this so I really really hope that even one person will see this and maybe even use this T-T

Anyway, have a great day or night!!

------------------------------------------------------------------------------------------------