code: TAYNE: OOC INFO - an ooc info code

[10billionghosts]

Hello again! Here's a small life update for y'all: I recently did the math and realized I was writing an AVERAGE of 21.5k words for work EACH WEEK. Extremely extremely big skull emoji, my dudes. I was blowing past nanowrimo numbers every 2.5 weeks -- no WONDER I had not space to be creative!! I've walked back my workload a little so that I can exist, and that's given me the brain power to finally start to finish up a code I've been working on for a looong while now. So, without further ado...

Say hello to the first member of the Tayne set, named for the Celery Man skit from Tim & Eric. For the first half of 2022, Canva and creative cloud were absolutely inundating anyone who visited their services with "90s-inspired design is in!!!" stuff, and finally I decided I needed to get in on the trend. That's where this 90s - 2000s explorer/browser-inspired set came from.

First up for the set is TAYNE: OOC INFO, a styled code to tell people about yourself. This particular code comes with 4 parts:

• The Outer Flex Grid Shell: which makes everything work.


• #1 Horizontal Split: an image & a small text box for personal info like name, pronouns, time zone, and contact


• #2 Basic Content: A single fixed-height box styled for blocks of text


• #3 Three Across: A series of three boxes designed for use as a "Yes/No/Maybe"/Permission/Kink list

You can scope out a full live preview of everything below this gray box. TAYNE: OOC INFO is designed to be semi-modular, as as such the code is split up into three. You'll start with the outer shell, then you can grab both the first row (horizontal split + basic content) and the second row (three across) individually. You don't need to use both! You can use either-or!

Since you need this no matter what let's start y'all off with THE BASE CODE:


<lj-raw><div style="max-width:700px;width:100%;margin:20px auto 40px;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:start;gap:55px 30px;font-size: clamp(12px, 2vw, 17px);line-height:1.5;font-family:arial, helvetica, sans serif;color:#fff;"> <!-- ITEMS BELOW THIS POINT --> <!-- ITEMS ABOVE THIS POINT --> </div><!-- CREDIT --> <div style="max-width:700px;width:100%;margin:0 auto;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">❤</a></div> <!-- CREDIT --></lj-raw>

HOW TO USE:

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and is mostly insanejournal friendly!

• In order to achieve full insanejournal compatibility simply find any instance of height:313px and change it to height:318px.

❣️ Watch for anything !!surrounded by exclamation points!! like !!HEADER!! or !!LINK!!, this is text that you'll want to customize.

❣️ There is one IMG_URL that you'll want to switch to an image. This code works best with landscape-oriented images, widescreen-style gifs, and very well centered perfectly square images.

❣️ By default, the image is set to background-size:cover (meaning it will automatically resize) and positioned to the center both vertically and horizontally. You may need to futz with these values if you are using a non-landscape-oriented picture or gif.

❣️ This code is EXTREMELY PINK out of the box, so remember to run find-replace on all hex codes and rgb values, replacing the default colors with the ones you'd like to use. Lemme outline what the default colors are for you next...

❣️ Hex code #fa53a0 is your primary color. This is the color of the border and faux menu bars.

❣️ rgb(37, 192, 192), aka hex code #25c0c0 is your secondary color, and it is used for all of the window shadows, just with slightly changed opacity.

• To change this color, do a find-replace on 37, 192, 192 with the rgb values for the color you'd like to use. The google color picker (just type "color picker" into the google search bar) will set you up with the RGB value of a color, second row, left side. :)

❣️ Hex code #fc8bc0, a lighter pink, is your background color for any boxes with text.

❣️ Hex code #ff96c7, an even lighter pink, is only used on the field sets (the name/pronouns/etc fields on the horizontal split code) to create a slightly lighter background so that text stands out.

❣️ HEX CODE #e32b80 is a darker pink used for the labels for each field set.

❣️ HEX CODE #fff is white, and it is established both at the very top of the code where it declares the font color for all text in general, and then again on each "menu bar" so that menu bar header text is always white in color.

❣️ Outside of changing the colors and the !!HEADER!! text, you'll likely want to leave the stuff in the menu bar portion of the code alone unless you've got some CSS and HTML experience.

❣️ The scroll bars are styled on this code to be narrow and colorful, but styled scroll bars unfortunately do not work in Chrome. Apologies!

❣️ This code comes with a credit at the bottom 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!

❣️ As more TAYNE codes are released, I will put together a hub page for individual parts of the TAYNE set. For now, please enjoy these pre-styled options! You can grab each sub-section below.

ROW 1: IMAGE & INFO

contains #2: horizontal split & #1: basic content

✦

player info

✖

name

your name

pronouns

your pronouns

timezone

est/utc/mt/etc

contact

discord un

✦

permissions

✖

You can put whatever text you want in-between the LJ-RAW tags. If you put more text than would fit, a scroll bar will generate automatically.

OOC

BACKTAGGING: y/n/m
FOURTH-WALLING: y/n/m
THREAD HOPPING: y/n/m

IN CHARACTER

SHIPPING: answer
PHYSICAL CONTACT: answer
PSYCHIC POWERS: answer
INJURY: answer
DEATH: answer
ANOTHER: answer

Copy paste this as-is into the outer frame code from the top of the post to get this section of the code. You can then post the #3 THREE ACROSS code beneath it to add a second row to the code.

If you'd like the image and small info box to be on the right instead of the left, simply copy that portion of the code (#2: HORIZONTAL SPLIT), delete it from the code, and then re-paste it in after the larger info box (#1 BASIC CONTENT BOX).

<!-- #1: HORIZONTAL SPLIT CONTENT BOX! --> <div style="max-width:325px;width:100%;height:300px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;gap:30px;"> <!-- WIDE SHORT IMAGE --> <div style="max-width:325px;width:100%;height:150px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0 url('IMG_URL')center -20px;background-size:cover;"></div> <!-- WIDE SHORT IMAGE END --> <!-- TINY INFOBOX --> <div style="max-width:325px;width:100%;height:132px;padding-bottom:3px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0;"> <!-- MENU BAR --> <div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#fa53a0;color:#fa53a0;"> <div style="font-size:20px;color:#fff;">✦</div> <div style="text-transform:uppercase;color:#fff;">!!header!!</div> <div style="flex-grow:1;"></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #fa53a0;border-radius:2px;"></div></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #fa53a0;border-radius:2px;"></div></div> </div> <!-- MENU BAR END--> <!-- TINY TEXT --> <div style="width:100%;align-self:stretch;max-height:90px;padding:8px 10px 2px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;align-content:center;gap:3px 5px;font-size:12px;overflow:auto;scrollbar-width: thin;scrollbar-color:#fff #fc8bc0;"> <fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#ff96c7;background-clip:padding-box;border:1px solid #fa53a0;"> <legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#e32b80">!!label!!</legend> !!answer!! </fieldset> <fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#ff96c7;background-clip:padding-box;border:1px solid #fa53a0;"> <legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#e32b80">!!label!!</legend> !!answer!! </fieldset> <fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#ff96c7;background-clip:padding-box;border:1px solid #fa53a0;"> <legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#e32b80">!!label!!</legend> !!answer!! </fieldset> <fieldset style="width:45%;display:inline-block;padding:0 2px 2px 5px;margin:0;border-collapse:collapse;margin:0;background:#ff96c7;background-clip:padding-box;border:1px solid #fa53a0;"> <legend style="padding:0;margin:0 5px -3px;font-variant:small-caps;font-size:11px;letter-spacing:1.2px;font-weight:bold;color:#e32b80">!!label!!</legend> !!answer!! </fieldset> </div> <!-- TINY TEXT END --> </div> <!-- TINY INFO BOX END --> </div> <!-- #1: HORIZONTAL SPLIT CONTENT BOXES END! --> <!-- #2: BASIC CONTENT BOX! --> <div style="max-width:325px;width:100%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0;"> <!-- MENU BAR --> <div style="width:100%;height:30px;padding-bottom:3px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#fa53a0;color:#fa53a0;"> <div style="font-size:20px;color:#fff;">✦</div> <div style="text-transform:uppercase;color:#fff;">!!header!!</div> <div style="flex-grow:1;"></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #fa53a0;border-radius:2px;"></div></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #fa53a0;border-radius:2px;"></div></div> </div> <!-- MENU BAR --> <!-- BODY --> <div style="width:100%;align-self:stretch;max-height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #fc8bc0;"> </lj-raw>!! your text here! this comes with a pre-styled divider, seen just below this text. Lookie! <div style="width:100%;margin:-15px auto;padding:1px;line-height:.9;text-align:right;font-weight:bold;border-bottom:1px solid #fa53a0;color:#e32b80">!!divider header!!</div> see?? you can also keep writing here. Just be sure to mind the lj-raw tags, as usual !!<lj-raw> </div> <!-- BODY --> </div> <!-- #2: BASIC CONTENT BOX END! -->

ROW 2: THREE ACROSS

contains #3: three cross, three narrow divs with space for text

✦

yes

✖

Woohoo in Shrub

Woohoo in Tent

Woohoo in Coffin

Woohoo in Rocket Ship

Woohoo in Backyard Observatory

Woohoo in Money Vault

✦

maybe

✖

Woohoo in Shower

Woohoo in Waterfall

Woohoo in Hot Tub

Woohoo in Sauna

Woohoo as Bats

Woohoo in Hot Spring

✦

no

✖

Woohoo in Closet

Woohoo in Pile of Leaves

Woohoo in Sleeping Pod

Woohoo in Dumpster

Woohoo in Ice Cave

Copy paste this as-is into the outer frame code from the top of the post to get this section of the code alone. You can also post it after the above code to have them all stack together nicely.

<!-- #5: THREE ACROSS! --> <!-- box 1 --> <div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0;"> <!-- MENU BAR --> <div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#fa53a0;color:#fa53a0;"> <div style="font-size:20px;color:#fff;">✦</div> <div style="text-transform:uppercase;color:#fff;">yes</div> <div style="flex-grow:1;"></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #fa53a0;border-radius:2px;"></div></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #fa53a0;border-radius:2px;"></div></div> </div> <!-- MENU BAR END --> <!-- BOX 1 TEXT --> <div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #fc8bc0;"> </lj-raw>!! your content here !!<lj-raw> </div> <!-- BOX 1 TEXT END --> </div> <!-- box 1 end --> <!-- box 2 --> <div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0;"> <!-- MENU BAR --> <div style="width:100%;height:30px;padding-bottom:5px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#fa53a0;color:#fa53a0;"> <div style="font-size:20px;color:#fff;">✦</div> <div style="text-transform:uppercase;color:#fff;">maybe</div> <div style="flex-grow:1;"></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #fa53a0;border-radius:2px;"></div></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #fa53a0;border-radius:2px;"></div></div> </div> <!-- MENU BAR --> <!-- BOX 2 TEXT --> <div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #fc8bc0;"> </lj-raw>!! your content here !!<lj-raw> </div> <!-- BOX 2 TEXT END --> </div> <!-- box 2 end --> <!-- box 3 --> <div style="min-width:160px;max-width:28.5%;height:313px;padding-bottom:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:0;border:5px solid #fa53a0;border-radius:2px;box-shadow: rgba(37, 192, 192, 0.4) 5px 5px, rgba(37, 192, 192, 0.3) 10px 10px, rgba(37, 192, 192, 0.2) 15px 15px;background:#fc8bc0;"> <!-- MENU BAR --> <div style="width:100%;height:30px;padding-bottom:3px;display:flex;flex-wrap:nowrap;justify-content:start;align-items:center;gap:5px;font-family:courier new, monospace;background:#fa53a0;color:#fa53a0;"> <div style="font-size:20px;color:#fff;">✦</div> <div style="text-transform:uppercase;color:#fff;">no</div> <div style="flex-grow:1;"></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;">✖</div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border:2px solid #fa53a0;border-radius:2px;"></div></div> <div style="width:20px;height:20px;display:flex;justify-content:center;align-items:center;text-align:center;font-family:arial, helvetica, sans serif;font-weight:bold;border-radius:2px;background:#fff;"><div style="width:10px;height:10px;border-bottom:2px solid #fa53a0;border-radius:2px;"></div></div> </div> <!-- MENU BAR --> <!-- BOX 3 TEXT --> <div style="width:100%;align-self:stretch;height:273px;padding:5px 10px 10px;font-size:12px;text-align:left;overflow:auto;scrollbar-width:thin;scrollbar-color:#fff #fc8bc0;"> </lj-raw>!! your content here!!<lj-raw> </div> <!-- BOX 3 TEXT END --> </div> <!-- box 3 end --> <!-- #3: THREE ACROSS END! -->


Below this, you'll find a live preview of the whole code all together.

✦

player info

✖

name

your name

pronouns

your pronouns

timezone

est/utc/mt/etc

contact

discord un

✦

permissions

✖

You can put whatever text you want in-between the LJ-RAW tags. If you put more text than would fit, a scroll bar will generate automatically.

OOC

BACKTAGGING: y/n/m
FOURTH-WALLING: y/n/m
THREAD HOPPING: y/n/m

IN CHARACTER

SHIPPING: answer
PHYSICAL CONTACT: answer
PSYCHIC POWERS: answer
INJURY: answer
DEATH: answer
ANOTHER: answer

✦

yes

✖

Woohoo in Shrub

Woohoo in Tent

Woohoo in Coffin

Woohoo in Rocket Ship

Woohoo in Backyard Observatory

Woohoo in Money Vault

✦

maybe

✖

Woohoo in Shower

Woohoo in Waterfall

Woohoo in Hot Tub

Woohoo in Sauna

Woohoo as Bats

Woohoo in Hot Spring

✦

no

✖

Woohoo in Closet

Woohoo in Pile of Leaves

Woohoo in Sleeping Pod

Woohoo in Dumpster

Woohoo in Ice Cave

Comments

[hunt]

just wanna say i love this code so much i've used it for like, 2-3 accounts i think?!? here, here, and here!

[10billionghosts]

Ahhh thank you! I LOVE how the code looks in black lmao those colors are so sharp.

[ninjamanager]

Used this code for both my current blorbos here and here! Thank you so much!

[i_peace]

idk, i think all the codes in this journal (save for the one I'm using for his game, beautifuldreamer, but that gon change real soon probably) are from you BUT I JUST SAW THAT COMBAT BARK CODE YOU POSTED AND MY EYES POPPED OUT OF MY HEAD i'm just... gonna fuck around and find out with it I guess lmao

ANYWAY used tayne in this journal for his general info page and in his alt journal here as well, so that it makes a matched, themed set. the navigation pages are from you as well owo they've been super fun to customize! they're super nice to look at! I... might use the kinklist part too, eventually. idk. depends on what i end up writing. ty for sharing all these lovely codes.

[10billionghosts]

Adhsdjlkadsf I'm SO GLAD you like my codes!! I love what you've done with Tayne for the info pages. ;u; The personality section is slick.

Also def drop me a comment when you're done messing with the combat barks meme. I wanna see!!