code: REPORT - a collapsing bio code

[10billionghosts]

HI. This is REPORT, a fairly straightforward code that I whipped up so fast that my brain is still convinced I need to to do more with it. BUT NO. IT's DONE. Take it.

REPORT is mainly meant for use as a biosheet/app code, but I've also done up a version that can be used for IC/OOCs, flash reactions, and event posts. It shows as two columns on desktop displays, then collapses down to one column on narrow or mobile displays. Because of this, it can get QUITE LONG if you fill it with a lot of text, so this code is best suited for small-to-medium applications and events.

My intention aesthetically was to have COLUMN B be shorter than COLUMN A, but use this code however you like! It'll really benefit from customization.

Here's what you'll find in this post:

• BIO CODE & IC/OOC CODE. The differences between these two codes are minimal. Just a bit of styling.


• HIDDEN LJ-CUT HEADER BY DEFAULT. Both the top image and the header text/character name should be linked to the post.


• VARIANT CODE W/ NO HIDDEN LJ-CUT. Replaces JUST the hidden IJ cut parts in the default codes and removes links from the header.


• MIX-N-MATCH SUBSECTIONS. Sub-sections are labeled within the code, and can be swapped around, edited, duplicated, and removed to fit your personal needs.


• MINI-IMAGE BOARD VARIANT. On the IC/OOC version of the code, the second image has been changed into a mini mood board by default. This can be swapped easily. See How To Use.

BIO CODE HERE:
<lj-raw> <div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:10px;font-family:arial, helvetica, sans serif;font-size:12px;line-height:1.5;color:#fff;"> <!-- COLUMN A --> <div style="box-sizing:border-box;flex-grow:1;min-width:250px;max-width:350px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:5px;"> <!-- [portrait (LINK VERSION)] --> <a href="#ENTRY_URL_HERE" alt="!!label text for this link!!" style="text-decoration:none;box-sizing:border-box;width:100%;height:225px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"> </a> <!-- [portrait (LINK VERSION)] end --> <!-- [name & intro blurb] --> <div style="box-sizing:border-box;width:100%;font-size:10px;text-align:justify;"> <!-- this is a link! --> <a href="#ENTRY_URL_HERE" style="text-decoration:none;font-size:clamp(17px, 2vw, 20px);font-weight:bold;font-style:italic;letter-spacing:2px;line-height:1.1;color:#72588c;">!!CHARACTER NAME!!;</a> <span style="line-height:1.7;color:#000;">!!sub-header, title, or concept line here!!</span> </div> <!-- [name & intro blurb] end --> <!-- FAKE LJ-CUT, DELETE IF YOU DON'T WANT IT --> <div style="display:none;"><lj-cut></div> <!-- FAKE LJ-CUT END. --> <!-- [left block] --> <div style="box-sizing:border-box;width:100%;padding:10px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#8e77a5;color:#fff;"> <!-- basics --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">BASICS</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;align-content:space-between;gap:5px;"> <div><span style="font-weight:bold;letter-spacing:2px;">nickanmes:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">pronouns:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">dob:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">age:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">field:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">field:</span> ans</div> <div><span style="font-weight:bold;letter-spacing:2px;">field:</span> ans</div> </div> <!-- basics; end --> <!-- appearance --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">APPEARANCE</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;text-align:justify;"> </lj-raw>your content here!<lj-raw> </div> <!-- appearance; end --> <!-- personality --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">PERSONA</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;align-content:space-between;gap:15px;"> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;">positive</span><br/> trait. trait. trait. trait. trait. </div> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;">neutral</span><br/> trait. trait. trait. trait. trait. trait.</div> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;">negative</span><br/> trait. trait. trait. trait. trait. trait. trait. trait. trait. trait. trait. trait.</div> </div> <!-- persona; end --> <!-- abilities --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">ABILITIES</div> <div style="box-sizing:border-box;width:100%;margin:10px 0;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;align-content:space-between;gap:15px;"> <!-- add abilities below this point --> <!-- ability --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- ability --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- ability --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- add abilities above this point --> </div> <!-- abilities; end --> <!-- anything you want in the left/first color block must go above this line! --> </div> <!-- [left block] end --> </div> <!-- COLUMN A; end --> <!-- COLUMN B --> <div style="box-sizing:border-box;flex-grow:1;min-width:250px;max-width:350px;min-height:250px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:5px;"> <!-- [right block] --> <div style="box-sizing:border-box;width:100%;padding:10px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#8e77a5;color:#fff;"> <!-- background --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">BACKGROUND</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;text-align:justify;"> </lj-raw>Put your text here<lj-raw> </div> <!-- background; end --> <!-- listicle --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">WANTED LINES</div> <div style="box-sizing:border-box;width:100%;margin:10px 0;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;align-content:space-between;gap:15px;"> <!-- list items below this point --> <!-- item --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- item --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- item --> <div style="width:100%"><span style="font-weight:bold;letter-spacing:2px;font-size:13px;">!!a header!!</span><br/> </lj-raw>description goes here<lj-raw> </div> <!-- list items above this point --> </div> <!-- wanted; end --> </div> <!-- [right block] end --> <!-- [ooc info] this is optional --> <div style="box-sizing:border-box;width:100%;margin-top:-5px;color:#8e77a5;text-align:right;">name . timezone . contact . etc</div> <!-- [ooc info] end --> <!-- [picture 2] --> <div style="box-sizing:border-box;width:100%;height:225px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"> </div> <!-- [picture 2] end --> <!-- CREDIT --> <div style="width:100%;text-align:right;font-size:10px;font-weight:normal;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --> </div> <!-- COLUMN B; end --> </div>

IC/OOC CODE HERE:
<lj-raw> <div style="max-width:750px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:10px;font-family:arial, helvetica, sans serif;font-size:12px;line-height:1.5;color:#fff;"> <!-- COLUMN A --> <div style="box-sizing:border-box;flex-grow:1;min-width:250px;max-width:350px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:5px;"> <!-- [header image (LINK VERSION)] --> <a href="#ENTRY_URL_HERE" alt="!!label text for this link!!" style="text-decoration:none;box-sizing:border-box;width:100%;height:225px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"> </a> <!-- [header image (LINK VERSION)] end --> <!-- [title & intro blurb] --> <div style="box-sizing:border-box;width:100%;font-size:10px;text-align:justify;"> <!-- this is a link! --> <a href="#ENTRY_URL_HERE" style="text-decoration:none;font-size:clamp(17px, 2vw, 20px);font-weight:bold;font-style:italic;letter-spacing:2px;line-height:1.1;color:#72588c;">!!EVENT TITLE!!;</a> <span style="line-height:1.7;color:#000;">!!brief description or subtitle here!!</span> </div> <!-- [title & intro blurb] end --> <!-- FAKE LJ-CUT, DELETE IF YOU DON'T WANT IT --> <div style="display:none;"><lj-cut></div> <!-- FAKE LJ-CUT END. --> <!-- [left block] --> <div style="box-sizing:border-box;width:100%;padding:10px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#8e77a5;color:#fff;"> <!-- intro --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">INTRODUCTION</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;text-align:justify;"> </lj-raw>Introduction text here<lj-raw> </div> <!-- intro; end --> <!-- section 2 --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">HOW THIS WORKS</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;text-align:justify;"> </lj-raw>Your text here. Included in this code is an optional styled text field you can use for posting forms or code and things. If you don't want it, delete it! <center><textarea rows="4" style="box-sizing:border-box;width:75%;padding:5px;scrollbar-width:thin;font-size:11px;border:1px solid rgba(250,250,250,.4);background: rgba(250,250,250,.4);"> your text form content here </textarea></center><lj-raw> </div> <!-- section 2; end --> <!-- anything you want in the left/first color block must go above this line! --> </div> <!-- [left block] end --> </div> <!-- COLUMN A; end --> <!-- COLUMN B --> <div style="box-sizing:border-box;flex-grow:1;min-width:250px;max-width:350px;min-height:250px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;align-content:start;gap:5px;"> <!-- [right block] --> <div style="box-sizing:border-box;width:100%;padding:10px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#8e77a5;color:#fff;"> <!-- section 3 --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">!!HEADER!!</div> <div style="box-sizing:border-box;width:100%;margin:10px 0 15px;padding:0 10px;text-align:justify;"> </lj-raw>!! text here !!<lj-raw> </div> <!-- section 3; end --> <!-- listicle --> <div style="width:100%;text-align:right;font-size:15px;font-style:italic;letter-spacing:2px;">VOLUNTEER SLOTS</div> <div style="box-sizing:border-box;width:100%;margin:10px 0;padding:0 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;align-content:space-between;gap:15px;"> <!-- list items below this point --> <!-- item --> <div style="width:100%"></lj-raw>Volunteer slot item here.<lj-raw> </div> <!-- item --> <div style="width:100%"></lj-raw>Volunteer slot item here.<lj-raw> </div> <!-- item --> <div style="width:100%"></lj-raw>Volunteer slot item here.<lj-raw> </div> <!-- list items above this point --> </div> <!-- volunteer slots; end --> </div> <!-- [right block] end --> <!-- [lil mood board] --> <div style="box-sizing:border-box;width:100%;height:225px;margin-top:5px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;"> <!-- tall --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"></div> <!-- square 1 --> <div style="grid-column-start:2;grid-column-end:3;grid-row-start:1;grid-row-end:2;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"></div> <!-- square 2 --> <div style="grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:2;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"></div> <!-- long boy --> <div style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:3;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"></div> </div> <!-- [lil mood board] end --> <!-- CREDIT --> <div style="width:100%;text-align:right;font-size:10px;font-weight:normal;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --> </div> <!-- COLUMN B; end --> </div>

REPLACEMENT HEADER CODE FOR NO FAKE LJ-CUT:
<!-- [header image (no link)] --> <div style="box-sizing:border-box;width:100%;height:225px;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;background:#aaa url('IMG_URL')center;background-size:cover;"> </div> <!-- [header image (no link)] end --> <!-- [name & intro blurb] --> <div style="box-sizing:border-box;width:100%;font-size:10px;text-align:justify;"> <span style="font-size:clamp(17px, 2vw, 20px);font-weight:bold;font-style:italic;letter-spacing:2px;line-height:1.1;color:#72588c;">!!CHARACTER NAME!!;</span> <span style="line-height:1.7;color:#000;">!!sub-header, title, or concept line here!!</span> </div> <!-- [name & intro blurb] end -->

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.

❣️ This code will collapse down to a single column on mobile displays and journal layouts with narrow entry space. To avoid winding up with a super huge post, I suggest either using the fake LJ-cut version of the code, or putting the whole code under an LJ-cut!

❣️ Be sure to replace any instances of IMG_URL with an appropriate image!

❣️ IMPORTANT FOR THE FAKE LJ-CUT VERSION: The placeholder text #ENTRY_URL_HERE (used twice, once in the image and once in the header text) should be updated after you've posted your entry with the URL for the post itself!

❣️ IMPORTANT IF YOU DON'T WANT THE FAKE LJ-CUT CODE: copy the code given in the "REPLACEMENT HEADER" code box and paste it over the corresponding code near the top in the code you'd like to use. Be sure to also remove the fake LJ-cut itself, which is clearly marked in the code.

❣️ Look for text that's !!between double exclamation points!! -- these are your headers and subheaders, and you'll want to customize them to fit your app.

❣️ hex code #8e77a5 is a light purple, and is the default color for the backgrounds of each "block." You'll want to find-replace this in the code when updating colors.

❣️ hex code #72588c is a slightly darker purple used only in the top header text.

❣️ Otherwise, the only colors declared are #fff (white) at the top for text and #000 (black) in the top header for the sub-header text.

❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.

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

GUSTAVE SAVATIER; "luck" is not always synonymous with "good fortune"; this somehow sheltered sorcerer has made the best of their run of it, anyway.

BASICS

aliases: Tav

pronouns: they/them

age: 30s

race: wood half-elf

alignment: chaotic good

class: sorcerer (silver dragon) / bard (of lore)

APPEARANCE

5'11" . slim build . gray eyes

Gustave is a conventional beauty, which perhaps explains a fair chunk of their success in life. It's certainly informed how they carry themself -- boldly and unhesitating, as though they belong wherever they are. Always tidy (even on the road), with skin free of scar or blemish and dappled with both dark freckles and scales the color of tarnished silver, from a glance both their draconic lineage and sheltered life are clear.

Going by appearances alone, an altogether obnoxious person and painfully easy mark.

PERSONA

positive
resilient. friendly. compassionate. sharp-tongued. confident. warmhearted. affectionate. unusually lucky.

neutral
curious. adventurous. quick to laugh. good sense of humor. believes that there is no such thing as forbidden knowledge. eager to learn and experience new things. this bitch humbled by the narrative for real.

negative
naive. liar. arrogant. conceited. proud. bad student. impulsive. judgmental. god's special little meow meow syndrome. mistakenly believes they are lawful good. unusually lucky.

ABILITIES

ability #1
Lemon drops lollipop jujubes macaroon apple pie powder. Marshmallow candy ice cream ice cream dessert halvah dragée sugar plum marshmallow.

ability #2
Pudding apple pie brownie toffee ice cream soufflé marzipan cake. Sweet roll pastry danish tart carrot cake carrot cake. Gummi bears jujubes apple pie brownie chocolate dragée.

ability #3
Pie caramels oat cake apple pie candy croissant. Cupcake chocolate jujubes gummies candy shortbread jelly toffee gingerbread.

BACKGROUND

Cupcake oat cake cupcake topping fruitcake. Pudding topping wafer tart wafer. Marshmallow topping icing chocolate lemon drops gummi bears sweet chocolate pie.

Sweet powder jelly-o icing jelly-o. Sugar plum chocolate bar tiramisu halvah icing dessert pie cheesecake. Oat cake sweet jujubes candy sweet roll pudding brownie. Jujubes dessert jelly bear claw bonbon carrot cake cotton candy.

Chocolate cake brownie chocolate cake jelly beans topping cake. Toffee biscuit sweet roll tart sugar plum danish cotton candy. Bonbon gingerbread pastry lollipop soufflé wafer jelly beans cupcake.

Sugar plum apple pie powder lemon drops chocolate cake gingerbread sweet. Gummies gummies tiramisu jujubes croissant bear claw oat cake. Jelly beans jelly shortbread cheesecake apple pie.

Tootsie roll chocolate bar pudding sweet roll dragée macaroon jelly beans. Jujubes tootsie roll sugar plum pastry bonbon. Lemon drops liquorice cake halvah tiramisu chocolate. Bonbon chocolate bar gingerbread danish sweet roll sugar plum jelly beans sugar plum.

WANTED LINES

wanted line #1
wanted line blurb here. Shortbread tootsie roll candy icing cookie soufflé carrot cake bonbon powder. Sugar plum brownie jujubes cake tiramisu jelly beans.

wanted line #2
wanted line blurb here. Shortbread tootsie roll candy icing cookie soufflé carrot cake bonbon powder. Sugar plum brownie jujubes cake tiramisu jelly beans.

wanted line #3
wanted line blurb here. Shortbread tootsie roll candy icing cookie soufflé carrot cake bonbon powder. Sugar plum brownie jujubes cake tiramisu jelly beans.

name . timezone . contact . etc

code

THE MONSTER MASH; From my laboratory in the castle east, To the master bedroom where the vampires feast, The ghouls all came from their humble abodes, To get a jolt from my electrodes

INTRODUCTION

Lollipop macaroon candy canes cupcake apple pie powder donut jelly-o. Croissant sweet roll apple pie tiramisu powder macaroon bear claw donut bear claw. Halvah wafer macaroon cupcake brownie pudding gummies biscuit. Carrot cake cupcake macaroon cheesecake cookie lemon drops icing.

Candy powder liquorice pie gummi bears cupcake jelly beans. Danish halvah tiramisu pie halvah. Wafer pastry candy lollipop liquorice lemon drops sugar plum chocolate cake. Cookie cupcake cheesecake tiramisu ice cream.

Lollipop marshmallow fruitcake halvah halvah chocolate ice cream lollipop. Gummi bears icing macaroon apple pie sweet roll carrot cake sweet pudding danish.

HOW THIS WORKS

Lemon drops danish topping sweet tart tootsie roll. Dragée chocolate muffin wafer gingerbread. Cupcake cake chocolate cake bonbon candy apple pie.

Pie halvah cupcake sugar plum danish chupa chups liquorice lemon drops. Cheesecake caramels gummies chocolate cake lemon drops.

your text form content here
Shortbread lollipop fruitcake icing lollipop lollipop chocolate cake cheesecake tootsie roll. Cake pudding tart carrot cake dessert.

ANOTHER HEADER

One more block text section for the road. Cake apple pie tiramisu pudding carrot cake cheesecake danish powder. Caramels topping cake sugar plum cotton candy sesame snaps. Lemon drops sweet roll muffin shortbread topping muffin toffee jelly-o croissant.

Cotton candy marzipan halvah brownie macaroon chocolate bar apple pie cookie. Gingerbread cookie jelly beans pie cookie.

VOLUNTEER SLOTS

Danish sweet roll cake dessert [CHARACTER A] ice cream croissant [CHARACTER B].

[CHARACTER C] shortbread tiramisu jelly beans biscuit topping wafer. Pie jujubes brownie tart gingerbread lemon drops sugar plum caramels. Gummi bears pie bear claw candy chocolate fruitcake.

Cake apple pie tiramisu [CHARACTER D] pudding carrot cake cheesecake danish powder!

Lemon drops [CHARACTER E] sweet roll muffin shortbread topping muffin toffee jelly-o croissant.

code

Comments

[panicstrickyn]

PRETTY! I'll definitely using this sometime soon.

[10billionghosts]

Glad you like it! C: Hope it's easy to use!

(frozen comment) ADD ON: Summary/Details HTML to collapse lengthy blocks of text

[10billionghosts]

This little snippet can be inserted into any of the large text block sections (Background, Appearance, etc.) to hide lengthy text and keep the code from getting super duper long right out the gate. It will add a "read more..." button that will automatically unhide hidden text.

<details><summary style="cursor:pointer;list-style:none;width:150px;margin:0 auto 10px;padding:5px 3px;text-align:center;font-weight:bold;background:#5d4872;color:#fff;">read more...</summary>!!your content here!!</details>

To change the button color, change the hex code value of 'background:#5d4872'. To change the font color of JUST the button, change color:#fff.

[chordal]

Tweaked it a bit to add some of my visuals for her at the bottom. Thank you so much for sharing codes that are fun and easy to play with :D

[10billionghosts]

Glad you enjoy using them!! ;u; I really like how the stacked mood boards turned out. That's cool!

[elaborately]

Using this and a permissions code (and a navigation code from you on that journal too)! Kept the colors because purple is my favorite and it works. In fact I used the purple for the navigation colors too lol

[10billionghosts]

Yessss. I like that purple in particular. Picked it because I associate it with my BG3 Tav. Love the nav code!! :] Glad you like everything ;u;