code: ITTY BITTY BIO - a compact, modular, collapsible bio code

[10billionghosts]

name viktor djt-dvre
age late 30s
pronouns he/they
role healer/all-rounder
classes whm, mch, war, smn; weaver

Cake powder pie gummies soufflé wafer dessert. Candy dessert liquorice pie bear claw jelly beans. Liquorice pudding pie chocolate ice cream cotton candy marzipan cheesecake oat cake.

Fruitcake fruitcake pastry jelly cheesecake topping oat cake marshmallow. Croissant lemon drops pie ice cream lemon drops jujubes cotton candy marshmallow lemon drops. Shortbread lemon drops donut toffee sugar plum. Danish gummi bears tootsie roll ice cream wafer topping cookie cheesecake.

+ history

Pastry biscuit biscuit pastry toffee candy canes jelly chocolate bar. Soufflé sesame snaps marzipan sweet roll shortbread chupa chups tiramisu chocolate bar. Icing halvah oat cake topping topping. Tart candy canes marshmallow jelly dessert bonbon.

Muffin croissant carrot cake macaroon pudding cake. Lemon drops bonbon carrot cake soufflé chocolate bar. Bear claw caramels lollipop caramels macaroon apple pie soufflé muffin.

Cake topping gummi bears bonbon pudding macaroon chocolate macaroon.

+ personality

trait long trait trait trait trait long trait trait long trait trait ???????????? trait medium length trait another trait trait traits

+ wanted lines

• item
• item
• item

+ connections

code

player: name . timezone: time . pb: name

This is ITTY BITTY BIO, a modular bio sheet code featuring collapsible subsections.

ITTY BITTY BIO was inspired by pb-style game codes -- compact, minimalist, with a small-ish font. I made this code because I really wanted an ultra brief bite-sized bio that mimicked my typical style, but then I went overboard and made it scalable so you can have a longer bio with all the fixins if you so desire.

Out of the box, this code comes with:

• The Header Banner. Which has room for a very brief, basic stat block.


• Primary Text Block. Intended for a brief summary or about section; can be as long as you like.


• Collapsible 1: Block Text. For history/personality/whatever block text sections.


• Collapsible 2: Tag List. Pre-styled for a color-coded personality section.


• Collapsible 3: Image List. Features 50x50 image links in a flex grid. Ideal for connections, inventories, aesthetics.

By default, the code comes with one of each of these sections. It is up to you to customize as you'd like. You can add, remove, and reorder sections freely -- see the HOW TO USE section below for instructions.

CODE HERE:
<lj-raw><div style="max-width:500px;width:100%;margin:0 auto;line-height:1.5;font-size:11px;font-family:verdana, arial, sans serif;color:#000;"> <!--[TOP]--> <div style="width:100%;height:150px;margin:0 auto;display:grid;grid-template-columns:.3fr 1.1fr 2fr .3fr;grid-template-rows:15px 120px 15px;gap:0;"> <!-- background banner --> <div style="grid-column-start:1;grid-column-end:5;grid-row-start:2;grid-row-end:3;margin:3px -3px -3px 3px;clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);background:#7b100f;"></div> <div style="grid-column-start:1;grid-column-end:5;grid-row-start:2;grid-row-end:3;clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);background:#b30000;"></div> <!-- PORTRAIT; change IMG_URL --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;max-width:150px;min-height:150px;border:3px solid #fff;transform:rotate(0);background:#eee url('IMG_URL')center;background-size:cover;"></div> <!-- BASIC STATS; fill this in --> <div style="grid-column-start:3;grid-column-end:4;grid-row-start:2;grid-row-end:3;display:flex;justify-content:start;align-items:center;padding:5px 10px;transform:rotate(0);text-align:left;font-size:clamp(9px, .8vw, 11px);color:#fff;"><div></lj-raw><b>name</b> answer <b>age, dob</b> answer <b>pronouns</b> answer <b>occupation</b> answer <b>element</b> answer<lj-raw></div></div> <!-- BASIC STATS; end --> </div> <!-- [TOP: end] --> <!-- [MID] --> <div style="max-width:475px;width:100%;min-height:20px;margin:5px auto;padding:5px 0;text-align:justify;"> </lj-raw>!!your content here!!<lj-raw> </div> <!-- [MID: end] --> <!-- [LOWER] --> <div style="max-width:500px;width:100%;margin:0 auto;"> <!-- DETAILS - BLOCK TEXT --> <details style="margin:5px auto;"> <summary style="padding:4px 5px;list-style:none;font-weight:bold;font-variant:small-caps;box-shadow:2px 2px #7b100f;background:#b30000;color:#fff;">+ history</summary> <div style="margin:5px 2% 0;padding:5px;"> </lj-raw>!!your content here!!<lj-raw> </div> </details> <!-- DETAILS - BLOCK TEXT: end --> <!-- DETAILS - TAG LIST --> <details style="margin:5px auto;"> <summary style="padding:4px 5px;list-style:none;font-weight:bold;font-variant:small-caps;box-shadow:2px 2px #7b100f;background:#b30000;color:#fff;">+ personality</summary> <div style="margin:5px 2% 0;padding:5px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:5px;color:#fff;"> <!-- positive traits --> <b style="padding:2px 5px;background:#d62222">trait</b> <b style="padding:2px 5px;background:#d62222">trait</b> <b style="padding:2px 5px;background:#d62222">trait</b> <!-- neutral traits --> <b style="padding:2px 5px;background:#bc7e7e">trait</b> <b style="padding:2px 5px;background:#bc7e7e">trait</b> <b style="padding:2px 5px;background:#bc7e7e">trait</b> <!-- negative traits --> <b style="padding:2px 5px;background:#8e0200">trait</b> <b style="padding:2px 5px;background:#8e0200">trait</b> <b style="padding:2px 5px;background:#8e0200">trait</b> </div> </details> <!-- DETAILS - TAG LIST: end --> <!-- DETAILS - CONNECTIONS --> <details style="margin:5px auto;"> <summary style="padding:4px 5px;list-style:none;font-weight:bold;font-variant:small-caps;box-shadow:2px 2px #7b100f;background:#b30000;color:#fff;">+ connections</summary> <div style="margin:5px 2% 0;padding:5px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:start;gap:5px;"> <a href="#URL_HERE" title="fill in name here" style="width:50px;height:50px;border:2px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></a> <a href="#URL_HERE" title="fill in name here" style="width:50px;height:50px;border:2px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></a> <a href="#URL_HERE" title="fill in name here" style="width:50px;height:50px;border:2px solid #fff;background:#ccc url('IMG_URL')center;background-size:cover;"></a> </div> </details> <!-- DETAILS - CONNECTIONS: end --> </div> <!-- [LOWER: end] --> <!-- [OOC INFO & CREDIT] --> <div style="max-width:475px;width:100%;margin:0 auto;display:flex;justify-content:space-between;align-items:start;align-content:start;font-size:10px;"> <!-- this is the credit line here --> <div><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- end credit line --> <!-- here's the ooc info --> <div style="text-align:left;color:#383838;"><b>player:</b> name . <b>timezone:</b> time . <b>pb:</b> name</div> <!-- ooc info end --> </div> <!-- [OOF INFO & CREDIT: end] --> </div></lj-raw>

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

❣️ This code is mobile compatible and insanejournal friendly!

❣️ This biosheet is intended to be modular and is customizable to fit your needs. Add, remove, duplicate, or reorder subsections by copy-pasting or deleting any code within a particular comment header. I encourage you to customize this code to suit your needs! The default options are not mandatory.

❣️ No matter what, when customizing, you must keep the outermost div code for it all to work properly. Make sure you do not accidentally delete this while customizing!

❣️ Be sure to update the uppermost IMG_URL under the 'PORTRAIT' section with a portrait picture!

❣️ hex code #b30000 is your primary color, the background for banners. Use find-replace to more easily swap this hex code out for another.

❣️ hex code #7b100f is the default shadow color for the banner elements.

❣️ hex code #d62222 is one of the three default colors for the tag sub-section. Use find-replace to more easily swap this hex code out for another.

❣️ hex code #8e0200 is one of the three default colors for the tag sub-section. Use find-replace to more easily swap this hex code out for another.

❣️ hex code #bc7e7e is one of the three default colors for the tag sub-section. Use find-replace to more easily swap this hex code out for another.

❣️ #000 (black) and #fff (white) are also used for fonts in the code; be sure to update those accordingly, if you'd like.

❣️ The block text section is formatted so that you can just paste text into it between lj-raw tags or further customize the contents -- the bullet list in the example above is just the block text section with an unordered list.

❣️ The tag list section is mainly intended for a personality section, and by default contains three commented and color-coded sub-sections. You can add or remove tags as needed!

❣️ Under the image list section:

• This was intended to be a Connections section primarily, and so each image square is a link by default.


• To remove the link aspect, simply remove the text 'href="#URL_HERE"' from each link.


• Otherwise, change #URL_HERE to an appropriate URL what you'd like to link to.


• Change 'fill in name here' to whatever descriptive text you'd like!


• As usual IMG_URL should be updated to an appropriate image url.


• You can add or remove as many of those images as you'd like! Just copy paste!

❣️ 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.

name answer
age, dob answer
pronouns answer
occupation answer
element answer

!!your content here!!

+ history

!!your content here!!

+ personality

trait trait trait trait trait trait trait trait trait

+ connections

code

player: name . timezone: time . pb: name

Comments

[crazyequalsgenius]

Used this for permissions and such here! Thank you so much! Love anything that makes my word salad easier to navigate.

[10billionghosts]

I'm so glad you like it!! It looks like some of your text is showing as white on light gray, though. You can change that by adding color:#000 (black) in the wrapper for those sections. Like, the div just below MID and the one just below LOWER. :]

[crazyequalsgenius]

Thank you! I've been pretty busy IRL but I'll check it out as soon as I can!

I'm also the mun behind addipted, so I really appreciate your help with that code too!

[exuviage]

thank you for this code! its so nice and tidy and i like having the expanding sections. i made some modifications to some shapes here and used it to start drafting an info post!

[10billionghosts]

love how slick this looks with the rounded corners!! 👀

[headhunt]

i am positively crazy over this code. i love it. great work. it looks so nice and clean.

i put it to use here with some customisation!

[10billionghosts]

Oh I love this look. VERY sharp! Glad you like this code and always happy to see Karlach RPers 🥰

[gladius]

absolutely love this!! changed my first info post to this and it looks so much neater now! thank you so much!