code: utility box! a whatever-you-want code (UPDATED 9/27/2021)

[10billionghosts]

ABOUT

BASICS

NAME:
DoB / ZODIAC:
BLOOD TYPE:
PRONOUNS:

PERSONALITY

MBTI:
ENNEAGRAM:
ALIGNMENT:
ELEMENT:
TAROT:

IN ANOTHER LIFE...

PATRONUS:
GREEK MYTH:
SUPER POWER:
D&D CLASS:
ANIMAL CROSSING TYPE:
POKEMON TEAM:

UPDATED 9/27/2021: This is a code originally from June 17, 2020 that I've rewritten from the ground up. It should now scale properly on (hopefully) all devices and resolutions without breaking your browser window! It was revised once in January of 2021, as well, but I figured it was a cute code that deserved proper attention.

Anyway, utility box is a dynamic whatever-you-need-it-to-be code predominantly meant to be used as a biosheet/profile code. With minimal futzing, it also works as a code for playlists, logs, or even mini-moodboards, if you're feeling frisky. This code was originally created for thisismanx, who specifically asked for something that she could use "to post CDJ stuff to her CDJ" while still having a bit of the characters' personalities reflected in each entry.

This code is set to a maximum size, and so if you add a lot of text, rather than stretching long, it will create a scroll bar. You can see a live example of this down at the bottom of this entry. I have provided a blank template for the base code, as well as formatting for the "meme" biosheet pictured above and the playlist code featured below.

HERE'S THE BASE CODE (blank):

<lj-raw><div style="max-width:450px;width:100%;line-height:1.5;margin:10px auto;background:#fff;border:1px solid #eee;"> <div style="max-width:450px;width:100%;display:grid;grid-template-rows:10px repeat(4,50px) 400px 25px 10px;grid-template-columns:repeat(45,1fr);grid-gap:0px;background:#fff;"> <div style="grid-area:left-top;grid-column-start:2;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> <div style="grid-area:label;grid-column-start:2;grid-column-end:15;grid-row-start:2;grid-row-end:6;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;align-content:flex-end;padding-left:4px;color:#fff;font-weight:bold;font-size:30px;line-height:.8;">!!TITLE!!</div> <div style="grid-area:fake-border;grid-column-start:9;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#fff;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"> </div> <div style="grid-area:right-top;grid-column-start:10;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#bbb url('MAIN_IMG_URL')center;background-size:cover;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"></div> <div style="grid-area:body;grid-column-start:2;grid-column-end:45;grid-row-start:6;grid-row-end:7;padding:5px;margin:10px 0;font-family:helvetica,arial,sans-sarif;font-size:11px;text-align:justify;overflow-y:auto;"> </lj-raw><!-- START YOUR TEXT HERE --> <!-- YOUR TEXT GOES ABOVE THIS LINE --><lj-raw> </div> <div style="grid-area:bottom-bar;grid-column-start:2;grid-column-end:45;grid-row-start:7;grid-row-end:8;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> </div> </div></lj-raw>

HERE IS THE BIO CODE:

<lj-raw><div style="max-width:450px;width:100%;line-height:1.5;margin:10px auto;background:#fff;border:1px solid #eee;"> <div style="max-width:450px;width:100%;display:grid;grid-template-rows:10px repeat(4,50px) 400px 25px 10px;grid-template-columns:repeat(45,1fr);grid-gap:0px;background:#fff;"> <div style="grid-area:left-top;grid-column-start:2;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> <div style="grid-area:label;grid-column-start:2;grid-column-end:15;grid-row-start:2;grid-row-end:6;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;align-content:flex-end;padding-left:4px;color:#fff;font-weight:bold;font-size:30px;line-height:.8;">!!TITLE!!</div> <div style="grid-area:fake-border;grid-column-start:9;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#fff;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"> </div> <div style="grid-area:right-top;grid-column-start:10;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#bbb url('MAIN_IMG_URL')center;background-size:cover;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"></div> <div style="grid-area:body;grid-column-start:2;grid-column-end:45;grid-row-start:6;grid-row-end:7;padding:5px;margin:10px 0;font-family:helvetica,arial,sans-sarif;font-size:11px;text-align:justify;overflow-y:auto;"> <!-- START YOUR TEXT HERE --></lj-raw><div style="width:100%;color:#aaa;border-bottom:1px dotted #aaa;margin-bottom:3px;text-align:right;">BASICS</div> <b style="color:#aaa;margin:2px;">NAME:</b> <b style="color:#aaa;margin:2px;">DoB / ZODIAC:</b> <b style="color:#aaa;margin:2px;">BLOOD TYPE:</b> <b style="color:#aaa;margin:2px;">PRONOUNS:</b> <div style="width:100%;color:#aaa;border-bottom:1px dotted #aaa;margin-bottom:3px;text-align:right;">PERSONALITY</div> <b style="color:#aaa;margin:2px;">MBTI:</b> <b style="color:#aaa;margin:2px;">ENNEAGRAM:</b> <b style="color:#aaa;margin:2px;">ALIGNMENT:</b> <b style="color:#aaa;margin:2px;">ELEMENT:</b> <b style="color:#aaa;margin:2px;">TAROT:</b> <div style="width:100%;color:#aaa;border-bottom:1px dotted #aaa;margin-bottom:3px;text-align:right;">IN ANOTHER LIFE...</div> <b style="color:#aaa;margin:2px;">PATRONUS:</b> <b style="color:#aaa;margin:2px;">GREEK MYTH:</b> <b style="color:#aaa;margin:2px;">SUPER POWER:</b> <b style="color:#aaa;margin:2px;">D&D CLASS:</b> <b style="color:#aaa;margin:2px;">ANIMAL CROSSING TYPE:</b> <b style="color:#aaa;margin:2px;">POKEMON TEAM:</b> <lj-raw><!-- YOUR TEXT GOES ABOVE THIS LINE --> </div> <div style="grid-area:bottom-bar;grid-column-start:2;grid-column-end:45;grid-row-start:7;grid-row-end:8;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> </div> </div></lj-raw>

HERE IS THE PLAYLIST CODE:

<lj-raw><div style="max-width:450px;width:100%;line-height:1.5;margin:10px auto;background:#fff;border:1px solid #eee;"> <div style="max-width:450px;width:100%;display:grid;grid-template-rows:10px repeat(4,50px) 400px 25px 10px;grid-template-columns:repeat(45,1fr);grid-gap:0px;background:#fff;"> <div style="grid-area:left-top;grid-column-start:2;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> <div style="grid-area:label;grid-column-start:2;grid-column-end:15;grid-row-start:2;grid-row-end:6;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;align-content:flex-end;padding-left:4px;color:#fff;font-weight:bold;font-size:30px;line-height:.8;">!!TITLE!!</div> <div style="grid-area:fake-border;grid-column-start:9;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#fff;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"> </div> <div style="grid-area:right-top;grid-column-start:10;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#bbb url('MAIN_IMG_URL')center;background-size:cover;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"></div> <div style="grid-area:body;grid-column-start:2;grid-column-end:45;grid-row-start:6;grid-row-end:7;padding:5px;margin:10px 0;font-family:helvetica,arial,sans-sarif;font-size:11px;text-align:justify;overflow-y:auto;"> <!-- START YOUR TEXT HERE --></lj-raw><div style="width:100%;color:#bbb;border-bottom:1px dotted #161917;margin-bottom:3px;text-align:left;font-size:12px;"><b>PLAYLIST NAME:</b> a playlist</div><div style="max-width:400px;width:100%;margin:0 auto;text-align:center;color:#aaa;text-shadow:1px 2px #eee;line-height:3;"><b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST <b>SONG TITLE</b> ••• ARTIST </div> <lj-raw><!-- YOUR TEXT GOES ABOVE THIS LINE --> </div> <div style="grid-area:bottom-bar;grid-column-start:2;grid-column-end:45;grid-row-start:7;grid-row-end:8;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> </div> </div></lj-raw>

HOW TO USE
❣️ Mind the lj-raw tags!!

❣️ This code is mobile friendly and insanejournal friendly!

❣️ There are three spaces for images in this code. Two are marked with TEXTURE_IMG_URL. I recommend replacing these with a simple image, texture, pattern, or just use a solid color. The other, MAIN_IMG_URL is intended to be replaced with something a little larger/more busy, like a gif.

❣️ Replace every instance of #aaa to adjust the color of text, the background color of the left part of the top bar, and the background color of the bottom bar.

❣️ Replace any instances of #bbb to adjust the background color of the right side of the top bar.

❣️ Change the !!TITLE!! to whatever (short) word you want. You may also have luck separating two words with a return.

As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

THIS CODE IS COMPATIBLE WITH INSANEJOURNAL!

MUSIC

PLAYLIST NAME: a playlist

SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST
SONG TITLE ••• ARTIST

SOME
WORDS

Cupcake ipsum dolor sit amet I love carrot cake caramels. Donut sweet roll pie sugar plum cupcake fruitcake. Brownie cake cake dragée jelly beans. Fruitcake I love bonbon dessert shortbread biscuit cake. Gingerbread marzipan dessert chocolate cake donut gummi bears. Danish I love I love croissant wafer I love sweet gingerbread. Croissant apple pie icing sugar plum cake sweet icing. Jelly-o shortbread I love caramels pastry lollipop cupcake. Lemon drops toffee I love dessert marzipan I love donut fruitcake. Jelly-o cake dragée gummies gummi bears I love pie caramels jujubes. Donut sugar plum cheesecake I love macaroon. Bonbon candy canes jelly-o I love lemon drops chocolate cake. Marshmallow pastry jelly-o biscuit candy canes halvah cupcake cake.

Bonbon cake pastry tart tart halvah marzipan. Gingerbread pie chocolate cake biscuit caramels gingerbread sesame snaps candy canes. Carrot cake dragée macaroon lemon drops cotton candy caramels. Marshmallow chupa chups I love I love dessert bonbon. Jelly-o I love macaroon jelly sweet chupa chups gingerbread gummi bears candy canes. Icing gingerbread chocolate bar I love sesame snaps sweet roll. Powder icing gummi bears muffin jelly-o jujubes bonbon. I love oat cake muffin cheesecake tart bonbon bonbon pie tart. Fruitcake sweet tiramisu tiramisu sesame snaps. Shortbread oat cake lemon drops ice cream cake marzipan donut dessert icing. Dragée biscuit pudding chupa chups jelly-o jelly cotton candy marshmallow. Chocolate cake biscuit sesame snaps chocolate bar chocolate bar I love tiramisu.

Sugar plum dessert jelly beans donut dragée chocolate cake. Gummies I love I love jelly-o wafer bear claw powder tootsie roll oat cake. Cake cake fruitcake cake I love sweet roll gummies. Chupa chups dragée I love I love marshmallow I love dragée dessert jujubes. Cake chocolate candy canes jelly beans gummi bears. Wafer candy canes tart dessert dragée gummi bears fruitcake cake gingerbread. Cotton candy marshmallow biscuit icing topping. Lollipop toffee icing carrot cake sugar plum biscuit. Biscuit gingerbread sesame snaps cheesecake sugar plum. Candy cheesecake lemon drops ice cream chocolate cake lemon drops lemon drops. Donut cake croissant pudding cake cotton candy cake candy canes. Wafer halvah liquorice chupa chups jujubes lollipop.

!!TITLE!!

BASICS

NAME:
DoB / ZODIAC:
BLOOD TYPE:
PRONOUNS:

PERSONALITY

MBTI:
ENNEAGRAM:
ALIGNMENT:
ELEMENT:
TAROT:

IN ANOTHER LIFE...

PATRONUS:
GREEK MYTH:
SUPER POWER:
D&D CLASS:
ANIMAL CROSSING TYPE:
POKEMON TEAM:

Comments

[10billionghosts]

Credit for Alia Bhatt gif: dildaar @ tumblr

Other gifs were gleaned from Pinterest.

[thisismanx]

Ahhhhhhh I LOVE IT THANK YOU NOW I NEED TO ACTUALLY FILL OUT CDJ THINGS

[lenabee]

This is great! I'm using it here and a few other places :)

[10billionghosts]

Omggg I love that it's so cute! Esp like the way personality is organized like a tag list.

[lenabee]

Awww thank you! 💜 I really love this as a simple app/bio template!

[knowsknives]

Hi! I am using it as a Drop box here. Is there a way to get rid of the white space on the entry?

[10billionghosts]

Yes! It takes a wee bit of editing within the code, so I went ahead and templated it for you since I think it'd be faster to edit myself than explain lmao:

<lj-raw><div style="max-width:450px;width:100%;line-height:1.5;margin:10px auto;background:#fff;border:1px solid #eee;"> <div style="max-width:450px;width:100%;display:grid;grid-template-rows:10px repeat(4,50px) 10px;grid-template-columns:repeat(45,1fr);grid-gap:0px;background:#fff;"> <div style="grid-area:left-top;grid-column-start:2;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#aaa url('TEXTURE_IMG_URL')center;background-size:cover;"> </div> <div style="grid-area:label;grid-column-start:2;grid-column-end:15;grid-row-start:2;grid-row-end:6;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;align-content:flex-end;padding-left:4px;color:#fff;font-weight:bold;font-size:30px;line-height:.8;">!!TITLE!!</div> <div style="grid-area:fake-border;grid-column-start:9;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#fff;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"> </div> <div style="grid-area:right-top;grid-column-start:10;grid-column-end:45;grid-row-start:2;grid-row-end:6;background:#bbb url('MAIN_IMG_URL')center;background-size:cover;clip-path: polygon(100% 0%, 100% 51%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);"></div> </div> </div></lj-raw>
Just fill in your images, colors, and header as you would normally. c:

[knowsknives]

Thank you so much!!!