CSS/HTML Layout Shenanigans Uberthread

@ariadne you can go about this a couple of diff ways tbh

google fonts has a fairly decent selection of fonts you can add into your page

just pick a font on there, then select "embed"

this brings up a few tabs

go to "web" and choose "import"

which'll give you the thing you add into your css stylesheet

e.g. 

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

if you want to then use it

say globally across your whole profile

<style>
body {
font-family:Limelight !important; }
</style>

the alternative route is downloading fonts yourself, hosting them somewhere

and using a similar approach to google fonts

this is an example of a hosted font taken from my profile rn

@font-face { 
font-family: cutepixel; 
src: url("https://file.garden/aMuL0oRhjDKbkUNC/CutePixel.ttf") format("truetype");
}

im using filegarden to host all my fonts btw

with hosting your own fonts, this is something you'll need to know

the file extension itself for the font (e.g. .ttf or .otf - truetype or opentype)

this must mirror the format (see the example above)


tl;dr the google route is the easiest of the two

self hosting fonts has a higher initial learning curve

but you get far more creative freedom

hope all that helps (i'll prob make a post about this in further detail later)

@Kayla⟡ ig we can't edit our posts after a certain period of time has elapsed

i'm writing up a few posts later after work btw

one will be all about using inspect mode to make yr own layouts

:3

.icon {

display: none;

}

@steph stabwound (|\\\|)

hii i idk much about code but i did change mine! i used the code from a video of dollcrds on youtube. hold on im going to figure out a way to put a image to help you

[EDIT SO I DONT FLOOD THE THREAD: add this code too so the sites icons dont appear along the custom ones!]

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

            content: url("IMAGE LINK HERE")

    }

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

            content: url("IMAGE LINK HERE")

    }

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

            content: url("IMAGE LINK HERE")

    }

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

            content: url("IMAGE LINK HERE")

    }

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

            content: url("IMAGE LINK HERE")

    }

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

            content: url("IMAGE LINK HERE")

    }

@steph stabwound (|\\\|

ok so, if you copy the code from her video (or anywhere else) it will look like this ^ , the number on the front (1, 2, 3) is the line they are and number behind it (1, 2) is the position of that specfic contact link. i made this picture to be a little easier

@⌗ !! ꒰ Ariadne ꒱ omg tysm i was trying so hard to figure out what those numbers meant!!!!! eternally grateful ^_^

@steph stabwound (|\\\|)

omg thank you!!! i was worried i wasen't making any sense lol

@⌗ !! ꒰ Ariadne ꒱ no that was awesome :3 ty

.heading {
  background: blue !important;
}

.profile .blurbs {
  border: 1px solid blue;
  background: #122661b5;
}

@furby

remember: right click any part of a profile, click "inspect" and you can view the css for it

@GOAT

thank you once again goat ! you are truly the goat . .