VERY Basic Css Stuff

~Set Image background

body
{
background: url(" your url ");
}

~Puts a box thing around all your stuff on the right side

.topRight {
margin-top: 20px;
background: #000;
border: 2.5px solid #000;
margin-bottom: 20px;
max-width: 550px;
border-radius: 10px;
}

^replace "#000" with whatever color you want the box to be. Look up color picker on google for color codes.
"2.5px" for the border is changable and you can change the color for that aswell

border radius can be deleted if u dont want round edges and border can be set as 0px for no border
add box-shadow: 2px 2px 5px #000; before "}" for a shadow

~Same thing as top right but like, left.

.topLeft {
margin-top: 20px;
background-color: #000;
box-shadow: 2px 2px 5px #000;
}
.topLeft {
float: left;
border: 2.5px solid #ebbbd8;
border-radius: 10px;
width: calc( 40% - 20px );
padding: 6px;
}

^same things as right can be done to customize it

Puts box around friends thing.

div.box.fwiends {
background-color: #000;
border: 2.5px solid #ebbbd8;
border-image-slice: 100%;
border-image-slice: 1;
border-radius: 10px;
padding: 10px 10px;
box-shadow: 2px 2px 5px #ffc0cb;
margin-bottom: 25px;
box-shadow: 2px 2px 5px #000;
}
.box {
border: none;
overflow: hidden;
}

^again same thing can be done to customize this as the ones above

Changes background color for around "y/n blurb"

.rightHead {
text-color:#ffffff;
margin-bottom: 0px;
background: #000;
padding-left: 4px;
text-align: center;
}

Change “text color” to y’know, change text color, same with background just change color code and you can set text-align to “right” “center” or “left” i believe

Name says it all tbh-

.fwiendCount {
Color: #000;
}

Changes font, size, and color of non-header/title text (the stuff in the blurb or whatever)

body {
font-family: Arial;
padding-top: 45px;
font-size: 15px;
color: #000;
}

Changes color of “leave a comment”

.boxHead {
background: #000;
Color: #000;
padding: 3px;
padding-bottom: 4px;
padding-left: 6px;
}

Changes color of “about me”

h4 {
color: #000;
margin-bottom: 0px;
}

h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}

Color ect, of box around mp3 audio

div.player.box {
padding: 4px;
margin-top: 20px;
margin-bottom: 20px;
background: #000;
color: #000;
width: 379.6px;
border: 1.5px solid #000;
box-shadow: 2px 2px 5px #232a5d;
border-radius: 15px;
}

“Edit ur profile” or “in your network” box

h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.extended {
border: 2.5px solid #000;
text-align: center;
margin-bottom: 20px;
margin-top: 15px;
border-radius: 10px;
background-color: #000;
box-shadow: 2px 2px 5px #000;
}

Pfp Border

.avatar {
width: 200px;
margin-right: 20px;
cursor: zoom-in;
image-orientation: from-image;
box-shadow: 2px 2px 5px #232a5d;
border: 2.5px solid #000;
border-radius: 10px;
}

Box around comments

div.box.comments {
background-color: #000;
border: 2.5px solid #000;
border-image-slice: 100%;
border-image-slice: 1;
border-radius: 15px;
padding: 10px 10px;
box-shadow: 2px 2px 5px #121d35;
margin-bottom: 25px;
}

Color and border and stuff of the actual typing comment box

textarea, textarea:focus {
outline: none;
border: 2.5px solid #000;
box-shadow: 2px 2px 5px #000;
border-radius: 10px;
}

border/size of pfp of friends

.fwiendFace img {
border: 2px solid black;
border-radius: 10%;
background-position: center;
display: absolute;
object-fit: cover;
height: 100px;
width: 100px;
}

PArt 2-----