10billionghosts | code: QUEEN SHIT - a multi-use header code

Y'all. I had a whole ass release post written up and then it just ????disappeared???? and I can't find it. And now I'm rewriting it from scratch. Swear to god, I should be getting technical writing experience for this shit oh my god. Instructions are the worst part of coding.

ANYWAY, QUEEN SHIT (thank you Alex lmao) is a header code with a few different options available to you, the end user.

NAV/SPLASH CODE is just the image header with an optional bit of code to add multiple links beneath each image.

IC/OOC comes with a fake LJ-cut in the header, space for text, and an image footer.

INFO PAGE is just the header and a space for block text.

To keep things tidy, I've put each code under a details tag. Click the header below for the one you want!

NAV/SPLASH HEADER CODE

<lj-raw>
<div style="max-width:610px;width:100%;margin:0 auto;text-align:right;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">code</a></div>

<div style="max-width:650px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;font-family:arial, helvetica, sans serif;font-size:clamp(10px, 1vw, 12px);text-transform:uppercase;color:#000;">
<div style="width:100%;display:grid;grid-template-columns:10px 1fr 1fr 1fr 1fr 10px;grid-template-rows:62px 36px 62px 1fr;gap:5px 10px;">

<div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:4;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:4;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="grid-column-start:4;grid-column-end:5;grid-row-start:1;grid-row-end:4;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>
<div style="grid-column-start:5;grid-column-end:6;grid-row-start:1;grid-row-end:4;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc url('IMG_URL')-30px center;background-size:cover;"></div>

<div style="grid-column-start:1;grid-column-end:7;grid-row-start:2;grid-row-end:3;opacity:.55;border:1px solid #ccc;background:#f2f2f2;"></div>
<div style="grid-column-start:1;grid-column-end:7;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:center;font-size: clamp(23px, 2vw, 25px);font-weight:bold;mix-blend-mode:multiply;opacity:.7;text-shadow: 1px 2px #721416;">HEADER TEXT</div>

<div style="grid-column-start:2;grid-column-end:3;grid-row-start:4;grid-row-end:5;text-align:center;font-weight:bold;">

</lj-raw><a href="#URL_HERE" style="text-decoration:underline dotted;color:#721416">link text</a><lj-raw>

</div>

<div style="grid-column-start:3;grid-column-end:4;grid-row-start:4;grid-row-end:5;text-align:center;font-weight:bold;">

</lj-raw><a href="#URL_HERE" style="text-decoration:underline dotted;color:#721416">link text</a><lj-raw>

</div>

<div style="grid-column-start:4;grid-column-end:5;grid-row-start:4;grid-row-end:5;text-align:center;font-weight:bold;">

</lj-raw><a href="#URL_HERE" style="text-decoration:underline dotted;color:#721416">link text</a><lj-raw>

</div>

<div style="grid-column-start:5;grid-column-end:6;grid-row-start:4;grid-row-end:5;text-align:center;font-weight:bold;">

</lj-raw><a href="#URL_HERE" style="text-decoration:underline dotted;color:#721416">link text</a><lj-raw>

</div>

</div></div></lj-raw>

IC/OOC CODE (with fake LJ-cut)

<lj-raw><div style="max-width:650px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;font-family:arial, helvetica, sans serif;font-size:clamp(10px, 1vw, 12px);text-transform:uppercase;color:#000;">
<div style="width:100%;display:grid;grid-template-columns:10px 1fr 1fr 1fr 1fr 10px;grid-template-rows:62px 36px 62px 1fr 100px;gap:5px 10px;">

<div style="grid-column-start:1;grid-column-end:7;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:center;mix-blend-mode:multiply;opacity:.7;text-align:center;line-height:1;font-size: clamp(18px, 2vw, 25px);font-weight:bold;text-shadow:1px 2px #721416;"><a href="#PAGE_URL" style="text-decoration:none;color:#000;">HEADER TEXT</a></div>

<div style="display:none;"><lj-cut></div>

<div style="grid-column-start:2;grid-column-end:6;grid-row-start:4;grid-row-end:5;padding:10px;font-size:13px;text-align:justify;line-height:1.4;text-transform:none;">

</lj-raw>!! your content here!!<lj-raw>

</div>

<div style="grid-column-start:2;grid-column-end:3;grid-row-start:5;grid-row-end:6;box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;background:#ccc url('IMG_URL')center;background-size:cover;"></div>

</div></div>

<div style="max-width:650px;width:100%;margin:0 auto;text-align:center;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">code</a></div></lj-raw>

INFO POST CODE (no footer)

<lj-raw><div style="max-width:650px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;font-family:arial, helvetica, sans serif;font-size:clamp(10px, 1vw, 12px);text-transform: uppercase;color:#000;">
<div style="width:100%;display:grid;grid-template-columns:10px 1fr 1fr 1fr 1fr 10px;grid-template-rows:62px 36px 62px 1fr 100px;gap:5px 10px;">

<div style="grid-column-start:2;grid-column-end:6;grid-row-start:4;grid-row-end:5;padding:10px;font-size:13px;text-align:justify;line-height:1.4;text-transform:none;">

</lj-raw>!! your content here !!<lj-raw>

</div>

</div></div>

<div style="max-width:650px;width:100%;margin:0 auto;text-align:center;"><a href="https://10billionghosts.dreamwidth.org/" style="font-size:8px;text-decoration:none;color:#CBCCDA;">code</a></div></lj-raw>

HOW TO USE:

❣️ Pray I don't fuck this up and have to rewrite my instructions a third time because IDK if I have it in me.

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ This code is almost completely comment compatible! You can see a live preview of what it looks like in the comments below.

❣️ Do you ever just think about how good the original Star Wars trilogy is? Because I do. Also Rogue One is so fucking good and I cry like a baby every time I watch it.

❣️ UH, ANYWAY. There are at least four instances of IMG_URL you'll want to change in this code, depending on which version you use. You can use PNG/JPG/GIF of any size and it'll auto scale!

❣️ If you JUST want the header with no links or any other BS, use the NAV/SPLASH version of the code and remove the "LINKS" section of the code.

❣️ If you want the fake LJ-cut, use the IC/OOC code. If you don't want a footer, use the info post code.

❣️ Here are your default colors/hex codes:

hex code #000 is black, declared at the top of the code, and is the base color for text.

hex code #f2f2f2 is an off-white used for the background of the banner in the header section.

hex code #721416 is the default background color for the text shadow in the header. It's also the default color for links.

❣️ This is the second time I've written these instructions in an hour so I might've missed some stuff or incorrectly explained it. That is 100% my bad!!! Please, if you're confused or if anything feels weirdly wrong, please comment below and let me know and I promise I will correct it once I'm not seething with rage at the fallibility of technology!

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :)

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

Astarion Ancunín

bio

dropbox

open

hmd

THE ACADEMY OF ARCANE SCIENCE

Cake wafer chocolate bar dragée pudding apple pie cookie wafer. Gingerbread lemon drops chocolate cake tootsie roll chupa chups carrot cake. Carrot cake marzipan halvah tiramisu fruitcake jujubes macaroon. Lemon drops lollipop cotton candy topping caramels gummi bears donut cotton candy. Sweet roll oat cake toffee lollipop toffee jelly beans fruitcake dessert muffin. Caramels biscuit cake jelly-o toffee dessert. Donut muffin gummies halvah sesame snaps muffin halvah sweet. Lollipop chocolate bar shortbread candy powder candy jelly muffin. Cake brownie caramels gummi bears cheesecake danish.

Bear claw sweet gummies jelly-o pudding sweet. Sweet tiramisu tootsie roll sesame snaps danish muffin soufflé. Cookie pudding muffin macaroon sesame snaps. Candy canes chocolate powder gingerbread shortbread. Shortbread gummies sweet donut pudding jelly. Tootsie roll oat cake candy canes marshmallow toffee cake topping cupcake sweet roll. Tart jelly danish ice cream donut wafer sweet candy. Sweet roll danish sweet roll macaroon tiramisu.

Flat | Top-Level Comments Only

IT WORKS IN COMMENTS, TOO!

As you can see, the code is also functional in comments! Here is a very slightly tweaked version of the IC/OOC code optimized for being posted as a comment in an entry!

</lj-raw>!! Your Content Here !!<lj-raw>

code

Holy shit, this is beautiful, tysm ♥

Thank you for the compliment!! Glad you like the code. c:

I was looking for an IJ Nav code last night. Thank you!

Aaa glad you like it! Thanks for commenting!

Literally building an Astarion RP journal now & looking at journal layouts when I found yours, I love it so much!

Thank you!! He is a very inspirational dude to make mood boards for. Love your username btw

code: QUEEN SHIT - a multi-use header code

(frozen comment) THE CODE ALSO WORKS IN COMMENTS!

no subject

no subject

no subject

no subject

no subject

no subject