chapters:

pt2: fonts

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

hey!! are you bad at CSS but want a cool looking profile? are you trying to figure out what code does what but it feels like every time you google something you get more questions than answers? are you tired of having 700 different tabs open, one for each specific thing you're trying to do on your page? are you basically me when making any profile layout ever? if one or more of those questions apply to you then this blog will (hopefully) help!!

my name is eli and i SUCK at CSS. like i am awful. but ive slowly been learning how layout codes work. and i feel like im at the point where i can explain some things. HOWEVER, i still do not understand CSS. i understand what SPECIFIC lines of code does, so this isnt a CSS tutorial, this is more of a "layout" tutorial to really make your profile feel like YOURS if that makes sense? like i wont explain for the most part HOW the code does (unless its smth you really need to know), but ill explain WHAT it does. 

this will be broken up into chunks, or chapters, or whatever you wanna call it. each chapter will focus on a specific part of your layout, plus a misc category that goes over a bunch of extra fun stuff that i personally think looks cute. you can skip to specific chapters by clicking on links to future blogs that i make above!! ill be updating this and all future CSS-related blogs with links to each other so that its easy reading for everyone.

disclaimer: this is a tutorial for what looks good on pc/laptop/chromebook, idk how well a lot of these would look on phones or tablets or whatever. please take that into consideration as youre reading, thanks :)

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

part 1: your 2 backgrounds

what i mean by "2" backgrounds is the white box in the center of your layout with all the info stuff (i called it the info box in the image but ill be calling it the "main" bg/box in this blog) and your "back" background (the furthest bg, the stuff on the sides, whatever you wanna call it. i called it back bg in the image but ill be calling it the "body" bg in the blog, you'll see why the names changed at the code).

you can customize both of these a lot, using colors, borders, gifs/images with many ways to "lay them" on the profile, etc. ill start with the body bg bc thats the easier one to explain.

1a: "body" background

ill start by showing the full code that i have on my profile, and then go and explain what everything does (if i understand what it does, if not then ill say idk lol)

also im gonna say this here, ALL CODE GOES IN THE ABOUT ME SECTION WHEN YOU EDIT YOUR PROFILE UNLESS SAID OTHERWISE

<style>

body{

background:url("https://64.media.tumblr.com/78d33d6c6811e14ff990244de6e7bc06/tumblr_ob45uffDyK1r9ulu7o1_540.gif") no-repeat fixed; background-size: cover;}

</style>

i color coded this particular line of code so you can see what these codes will typically look like. i will need to go over the <(/)style> tags and the no-repeat stuff, but dont worry, ill only go over the <(/)style> tags here, and you dont really need to know this, but it could help you in the future. im also not gonna be technical bc that helps me understand things better (personally). i could edit this to explain the other tags if ppl want me to but most of it is irrelevant to layout making and its very boring lol.

the <(/)style> tags basically say to the code "all of the code in between these two lines are gonna affect the look of this layout." if the code were not in the style tags, it would just show up as text in your bio.

before explaining the no-repeat stuff, i want to show you what the layout looks like WITHOUT that tag (on a separate acc so i dont mess up my layout lol), so the code for that would just be:

<style>

body{

background:url("https://64.media.tumblr.com/78d33d6c6811e14ff990244de6e7bc06/tumblr_ob45uffDyK1r9ulu7o1_540.gif");}

</style>

this layout would be good if you have an image PATTERN, where the repeats blend into each other and looks like one cohesive image (see this image). ive also seen ppl use the repeat as a part of their aesthetic, such as many scene kid profiles youll find on the layouts tab. however, in this case, we want the image to fit the entire profile. this is where the no-repeat stuff comes in. adding that line of code will make the background image fit the entire screen as opposed to looping. you can see that in effect with the first image in this blog.

you can also make your background a plain color with this code (put a hex code at the 000000, you can get one from an image from this site! you can also just. put the name of a color there but thats not usually recommended bc its most likely not gonna work as well with your layout as handpicking a color from hex is).

<style>

body{

background-color: #000000;}

</style>

now that youve got the body background, lets go to your "main" background (oh boy this one is gonna be fun (im kidding it just took me a long time to fully figure this out its not that bad once youve got it))

2a: "main" background

for some reason its been very hard to find a good tutorial on how the main bg works. it was very annoying while i was working on my layouts. anyways lets look at the code i have for the main background (this can be in the same <(/)style> tags as your body bg, or separate from it, it doesnt matter just as long as its in between style tags. ill be putting them in separate style tags for easier copy-pastability for those who wanna separate it).

<style>

main {

    border-radius: 5px;

    border: 10px solid transparent;

    padding: 15px;

    border-image: url(https://file.garden/ZCTlbRQZY2RSmYXG/deargodjr.png) 30 stretch;

    color: black;

    background: url('...') no-repeat fixed; background-size: cover;

    background-color: white; }

</style>

the ones highlighted in yellow are the ones are basically the same thing as weve went over already. the background itself is pretty much the exact same, so what this is gonna go over is the border of the main background (+ color). this is gonna be a simple explanation for this stuff because looking at it can be really overwhelming at first, so breaking it down will help. this isnt in order of the code shown, its in order of what makes sense to explain first.

border: the border tag basically says everything about the border itself, like how thick or thin you want it, the what color, the type of border, etc.

to change the thickness of the border, change the pixel, or px, count. you can make it whatever you want it to be in order to fit your profile.

the word "solid" refers to what "shape" the border is. there are many ways your border can look, such as dotted, double, inset, etc. etc. below is a diagram (not made by me) to show the different borders. to change the shape, change the word "solid" to any of the below:

to change the color of the border, replace "transparent" with any hex code (#000000). if you want your border to be a image, keep it transparent.

border-radius: changes how rounded the edges of your profile is. the higher the number, the more rounded it'll be until it gets to be a full circle (i think, idk i never really messed with it much). experiment to see what you like!

padding: gonna be honest idk what this does, like at all. but i think it has smth to do with the border-image thing??? idk if you know lmk in the comments so i can add (and credit) you.

border-image: makes your border an image. it can be any image you want, but if you want a border like mine with the lines and stuff you'll have to make it yourself with any drawing program (or find one online that you like). i have no idea what the 30 thing does, but the "stretch" thing basically stretches your border image across the entire thing until it fits. for more information on this topic PLEASE check out this tutorial, it genuinely helped me so much with this information. please note that if you wanna make your border yourself, make the image itself very small. like 30x30px small. or just use the image in the tutorial as a template for how big you want it.

color: NOT the same thing as border color, it changes the color of the TEXT on the main bg profile, thats it.

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

and thats it for backgrounds!!

kinda. you're probably thinking "but what about the backgrounds for specific parts of your layout? like your about me or interests or anything else????" that is a good question. these will be covered in their own tutorial blog thing. for example, the about me background will be in the blog about how to customize the about me section of your profile. the contact box bg will be in the contact box blog. etc. etc. etc. this is to keep everything more organized. and plus, now that youve got the basics down here, looking at that code in the future is gonna be a lot easier!

so yeah! thats the backgrounds! hopefully this was easy to understand, i want to be able to help as many people as i can with these so that ppl dont have to struggle through making pretty layouts. ill hopefully have more blogs out soon going over other stuff! im thinking im either gonna do fonts or the header/nav + footer (probably fonts bc thats gonna be a hell of a lot easier.......) next. anyways hope you enjoyed feel free to push buttons if you like welcome home plz marry me (/j) and yeah see you!!