code: EARMARKED - a mobile-compatible permissions/info box code

[10billionghosts]

Wanted to make a permissions/first impressions code that would adjust to the width of a display without creating a horizontal rule. So! Here is EARMARKED.

This code comes in two styles:

• The standard style has a header that appears on the right side on wide displays and then shifts to be on top on narrow displays like phone screens. (I've included instructions for swapping the side the header shows on in the HOW TO USE section.)


• The static style has the header always on top.

I've pre-styled both a permissions/first impressions code and a basic, unstyled single info box code for you to customize yourself. Please click the button below for your preferred code, and don't forget to read the HOW TO USE section!

Thanks and credit to kimmiserate for designing the original perms/first impression code that heavily inspired how I organized/filled out the format for this perm/first impression code!!

Standard Style Base Code

<lj-raw><div style="max-width:425px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:25px;line-height:1.5;font-family:helvetica, arial, sans serif;font-size:13px;color:#383838"> <!-- CARDS BELOW THIS LINE --> <!-- card: ooc info/perms --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">H</div> <div style="min-width:20px;text-align:center;">E</div> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">D</div> <div style="min-width:20px;text-align:center;">E</div> <div style="min-width:20px;text-align:center;">R</div> <!-- <div style="min-width:20px;min-height:10px;text-align:center;"> </div> --> <!-- this is a space; remove the arrows and dashes around it to activate it in the code --> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;width:375px;padding:10px;flex-grow:1;align-self:stretch;text-align:justify;background:#fff"> </lj-raw>!! your text here !!<lj-raw> </div> <!-- bod; end --> </div> <!-- CARDS ABOVE THIS LINE --> <!-- credit --> <div style="width:100%;margin-top:-20px;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- credit --> </div></lj-raw>

Static Style Base Code

<lj-raw><div style="max-width:425px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:25px;line-height:1.5;font-family:helvetica, arial, sans serif;font-size:13px;color:#383838"> <!-- CARDS BELOW THIS LINE --> <!-- card: ooc info/perms --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">H</div> <div style="min-width:20px;text-align:center;">E</div> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">D</div> <div style="min-width:20px;text-align:center;">E</div> <div style="min-width:20px;text-align:center;">R</div> <!-- <div style="min-width:20px;min-height:10px;text-align:center;"> </div> --> <!-- this is a space; remove the arrows and dashes around it to activate it in the code --> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;max-width:400px;width:100%;padding:10px;flex-grow:1;align-self:stretch;text-align:justify;background:#fff"> </lj-raw>!! your text here !!<lj-raw> </div> <!-- bod; end --> </div> <!-- CARDS ABOVE THIS LINE --> <!-- credit --> <div style="width:100%;margin-top:-20px;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- credit --> </div></lj-raw>

Standard Style Perms Code

<lj-raw><div style="max-width:425px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:25px;line-height:1.5;font-family:helvetica, arial, sans serif;font-size:13px;color:#383838"> <!-- card: ooc info/perms --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">O</div> <div style="min-width:20px;text-align:center;">O</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">F</div> <div style="min-width:20px;text-align:center;">O</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;width:375px;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">player name:</b> despite everything it's still you <b style="font-variant:small-caps;">contact:</b> <b style="font-variant:small-caps;">age:</b> <b style="font-variant:small-caps;">bracket/prose:</b> <b style="font-variant:small-caps;">backtagging:</b> <b style="font-variant:small-caps;">threadhopping:</b> <b style="font-variant:small-caps;">fourthwalling:</b> <b style="font-variant:small-caps;">not interested in:</b> list off topics or subjects you will not engage with/are not interested in writing out. please always remember to exercise caution when posting DNI lists publicly online!! take care of yourself!!<lj-raw> </div> <!-- bod; end --> </div> <!-- card: ic permissions --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">F</div> <div style="min-width:20px;text-align:center;">O</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;width:375px;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">character:</b> character name <b style="font-variant:small-caps;">canon point:</b> which point in their canon are you writing them from? <b style="font-variant:small-caps;">age:</b> character age <b style="font-variant:small-caps;">physical affection:</b> your/their comfort level with affection. <b style="font-variant:small-caps;">violence:</b> your/their comfort level with violence. <b style="font-variant:small-caps;">relationships:</b> which sorts of lines/cr are you open to with this character <b style="font-variant:small-caps;">psychic info:</b> details that might be notable if someone were to use psychic or psionic powers on them. <b style="font-variant:small-caps;">magical info:</b> details that might be notable about any magical abilities they might have or how magic might affect them. <b style="font-variant:small-caps;">physiological info:</b> any details that might be notable about their physical form. <b style="font-variant:small-caps;">ic offensive subjects:</b> specifically ic triggering or offensive subjects for the character.<lj-raw> </div> <!-- bod; end --> </div> <!-- card: first impressions --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row-reverse;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">T</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">G</div> <div style="min-width:20px;text-align:center;">L</div> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;text-align:center;">E</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;width:375px;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">appearance:</b> brief appearance notes that might not be evident from icons; height, build, notable scars or physical features, how they dress & carry themself <b style="font-variant:small-caps;">voice:</b> how they sound <b style="font-variant:small-caps;">scent:</b> is your character stimky <b style="font-variant:small-caps;">demeanor:</b> immediately evident personality traits, in brief.<lj-raw> </div> <!-- bod; end --> </div> <!-- credit --> <div style="width:100%;margin-top:-20px;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- credit --> </div></lj-raw>

Static Style Perms Code

<lj-raw><div style="max-width:425px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:25px;line-height:1.5;font-family:helvetica, arial, sans serif;font-size:13px;color:#383838"> <!-- card: ooc info/perms --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">O</div> <div style="min-width:20px;text-align:center;">O</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">F</div> <div style="min-width:20px;text-align:center;">O</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;max-width:400px;width:100%;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">player name:</b> despite everything it's still you <b style="font-variant:small-caps;">contact:</b> <b style="font-variant:small-caps;">age:</b> <b style="font-variant:small-caps;">bracket/prose:</b> <b style="font-variant:small-caps;">backtagging:</b> <b style="font-variant:small-caps;">threadhopping:</b> <b style="font-variant:small-caps;">fourthwalling:</b> <b style="font-variant:small-caps;">not interested in:</b> list off topics or subjects you will not engage with/are not interested in writing out. please always remember to exercise caution when posting DNI lists publicly online!! take care of yourself!!<lj-raw> </div> <!-- bod; end --> </div> <!-- card: ic permissions --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">I</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">F</div> <div style="min-width:20px;text-align:center;">O</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;max-width:400px;width:100%;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">character:</b> character name <b style="font-variant:small-caps;">canon point:</b> which point in their canon are you writing them from? <b style="font-variant:small-caps;">age:</b> character age <b style="font-variant:small-caps;">physical affection:</b> your/their comfort level with affection. <b style="font-variant:small-caps;">violence:</b> your/their comfort level with violence. <b style="font-variant:small-caps;">relationships:</b> which sorts of lines/cr are you open to with this character <b style="font-variant:small-caps;">psychic info:</b> details that might be notable if someone were to use psychic or psionic powers on them. <b style="font-variant:small-caps;">magical info:</b> details that might be notable about any magical abilities they might have or how magic might affect them. <b style="font-variant:small-caps;">physiological info:</b> any details that might be notable about their physical form. <b style="font-variant:small-caps;">ic offensive subjects:</b> specifically ic triggering or offensive subjects for the character.<lj-raw> </div> <!-- bod; end --> </div> <!-- card: first impressions --> <div style="max-width:400px;width:100%;display:flex;flex-wrap:wrap;flex-direction:column;justify-content:center;align-items:start;align-items:end;gap:0;box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"> <!-- label --> <div style="box-sizing:border-box;padding:3px;min-width:22px;flex:1 0;align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;align-items:start;align-content:start;line-height:1.2;font-size:15px;font-weight:bold;background:#e6918d;color:#fff"> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">T</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;min-height:10px;text-align:center;"> </div> <!-- this is a space --> <div style="min-width:20px;text-align:center;">G</div> <div style="min-width:20px;text-align:center;">L</div> <div style="min-width:20px;text-align:center;">A</div> <div style="min-width:20px;text-align:center;">N</div> <div style="min-width:20px;text-align:center;">C</div> <div style="min-width:20px;text-align:center;">E</div> </div> <!-- label; end --> <!-- body --> <div style="box-sizing:border-box;max-width:400px;width:100%;padding:10px;flex-grow:1;align-self:stretch;text-align:left;background:#fff"> </lj-raw><b style="font-variant:small-caps;">appearance:</b> brief appearance notes that might not be evident from icons; height, build, notable scars or physical features, how they dress & carry themself <b style="font-variant:small-caps;">voice:</b> how they sound <b style="font-variant:small-caps;">scent:</b> is your character stimky <b style="font-variant:small-caps;">demeanor:</b> immediately evident personality traits, in brief.<lj-raw> </div> <!-- bod; end --> </div> <!-- credit --> <div style="width:100%;margin-top:-20px;text-align:center;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- credit --> </div></lj-raw>

HOW TO USE:

❣️ Mind those LJ-raw tags!!

❣️ This code is mobile compatible! I have not tested this code on InsaneJournal.

❣️ This code is built into a flex grid. Additional cards/boxes can be added into the code where indicated in the HTML comments.

❣️ If you would like the header to appear on the left side, change flex-direction:row-reverse; to flex-direction:row; -- badda bing, badda boom.

❣️ FOR THE HEADER TEXT...

• each letter of the header is wrapped in its own div. This is necessary to make the code work as intended. i know this is annoying lmao sorry.


• headers can be longer or shorter; just add or delete additional divs and fill them in as needed.


• if you need a space in your header, there is one included in both versions of the code; it is live in code in the perms version and commented out in the base code version. simply remove the <!-- and --> from around the space to make it active.

❣️ On the perms code, body boxes are set to text-align:left, on the base code, they're set to text-align:justify. Just find-replace these values if you'd like to switch that up.

❣️ HEX CODES FOR CUSTOMIZING:

• hex code #e6918d, pink, is the default background color for the header. use find-replace to update it.


• hex code #fff, white, is the default font color for the header. use find-replace to update it.


• hex code #383838, dark gray, is the default body text font color; it's declared once at the top of the code.

❣️ If you wanna get fancy with the header, change each instance of the default background:#e6918d; to background:[YOUR HEX CODE HERE] url('URL FOR A BACKGROUND IMAGE'); -- this'll let you apply a tiling background or other image to the header.

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

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

O

O

C

I

N

F

O

player name: despite everything it's still you
contact:
age:

bracket/prose:
backtagging:
threadhopping:
fourthwalling:

not interested in: list off topics or subjects you will not engage with/are not interested in writing out. please always remember to exercise caution when posting DNI lists publicly online!! take care of yourself!!

I

C

I

N

F

O

character: character name
canon point: which point in their canon are you writing them from?
age: character age

physical affection: your/their comfort level with affection.
violence: your/their comfort level with violence.
relationships: which sorts of lines/cr are you open to with this character

psychic info: details that might be notable if someone were to use psychic or psionic powers on them.
magical info: details that might be notable about any magical abilities they might have or how magic might affect them.
physiological info: any details that might be notable about their physical form.

ic offensive subjects: specifically ic triggering or offensive subjects for the character.

A

T

A

G

L

A

N

C

E

appearance: brief appearance notes that might not be evident from icons; height, build, notable scars or physical features, how they dress & carry themself

voice: how they sound

scent: is your character stimky

demeanor: immediately evident personality traits, in brief.

code

Comments

[hellandbackpack]

For being so simple this one is so aesthetic? I love it? Using it for my boy here

[10billionghosts]

Thank you! I'm glad you like it. :] Yeah I wanted something that was very low on extraneous code so it was easy to fill out, while still looking Designed.