info table/navigation: say what you wanna say

[prospitian]

An information table designed for a tall, narrow image; it'll adapt to the image size!



Some quick notes about using this code!

Ideally, you're going to want to put this under a cut, and have custom comment pages turned off—I can't guarantee that it won't do funky things otherwise, but you're more than welcome to try things out otherwise and see how it goes.

This code reacts and responds to the size of the image you're using! The informational right side shouldn't be longer than the image (except the header at the top and the links at the bottom). If you're having issues with the vital stats at the top misaligning or taking up more than one line, try a narrower image; if the scroll boxes are too small for your liking, try a taller image. It's okay to just add a bunch of transparent space on either end of the image to make it taller!

Check out the example code live here!

<raw-code><table style="width: 100%;"><tr><td> <h1 style="font: 3em 'MS Gothic'; font-weight: 700; color: HEADER COLOR; width: 100%; text-align: right; clear: both;">CHARACTER NAME</h1> <div style="display: flex; font: 1em Arial;"><div style="width: IMAGE WIDTH;"><img src="IMAGE URL"></div> <div style="overflow: auto; height: IMAGE HEIGHT; flex-grow: 1;"><div style="width: 100%; line-height: 1.75em; margin: 1em 0;"> <!-- VITALS I've left in Age, Gender, Height, Build, and Species; if you want to change any of them, just find them and change the text! The widths of each div are set to 16%. You should change these if you're going to remove boxes! If you want FOUR boxes instead, remove one, and change the widths of the divs left to 22% If you want THREE boxes instead, remove two, and change the widths of the divs left to 30% If you only want TWO boxes, remove three, and change the widths of the divs left to 45% I wouldn't recommend adding a sixth! --> <div style="display: inline-block; width: 16%; padding: 1%; text-align: center;"><span style="color: VITALS HEADER COLOR; font: 1em Georgia; font-weight: 700;">Age</span><br /> AGE GOES HERE</div> <div style="display: inline-block; width: 16%; padding: 1%; text-align: center;"><span style="color: VITALS HEADER COLOR; font: 1em Georgia; font-weight: 700;">Gender</span><br /> GENDER GOES HERE</div> <div style="display: inline-block; width: 16%; padding: 1%; text-align: center;"><span style="color: VITALS HEADER COLOR; font: 1em Georgia; font-weight: 700;">Height</span><br /> HEIGHT GOES HERE</div> <div style="display: inline-block; width: 16%; padding: 1%; text-align: center;"><span style="color: VITALS HEADER COLOR; font: 1em Georgia; font-weight: 700;">Build</span><br /> BUILD GOES HERE</div> <div style="display: inline-block; width: 16%; padding: 1%; text-align: center;"><span style="color: VITALS HEADER COLOR; font: 1em Georgia; font-weight: 700;">Species</span><br /> SPECIES GOES HERE</div> </div> <!-- INFORMATIONAL BLURBS I've left in the titles "First Impressions," "Info," and "Abilities & Inventory," but of course, feel free to change them! --> <h2 style="margin: 1em 0 0 0; font: 1.75em 'MS Gothic'; font-weight: 700; color: CATEGORY COLOR;">First Impressions</h2> <div style="height: 20%; padding: 0 0.5em 0.5em 0.5em; margin: 1em 0; overflow: auto;"> <!-- FIRST IMPRESSIONS HERE --> </div> <h2 style="margin: 1em 0 0 0; font: 1.75em 'MS Gothic'; font-weight: 700; color: CATEGORY COLOR;">Info</h2> <div style="height: 20%; padding: 0 0.5em 0.5em 0.5em; margin: 1em 0; overflow: auto;"> <!-- INFO HERE --> </div> <h2 style="margin: 1em 0 0 0; font: 1.75em 'MS Gothic'; font-weight: 700; color: CATEGORY COLOR;">Abilities & Inventory</h2> <div style="height: 20%; padding: 0 0.5em 0.5em 0.5em; margin: 1em 0; overflow: auto;"> <!-- ABILITIES & INVENTORY HERE --> </div> </div></div> <div style="width: 100%; text-align: right; font: 1.25em 'MS Gothic'; margin-bottom: 0.5em;"> <!-- LINKS I've left in one link! Add in as many as you'd like. Separate them with commas or something, as they'll all appear on one line! If you don't want these, just remove the one link there.--> <a href="#" style="text-decoration: none; color: LINK COLOR;">permissions</a> <!-- YOUR LINKS SHOULD GO ABOVE THIS LINE --> </div> <div style="width: 100%; font: 0.9em Arial; text-align: right;"> <!-- There's a space in here for an art credit link! If you're using official art, go ahead and remove the line below entirely. --> <a href="ART CREDIT LINK" style="text-decoration: none; color: #666;">art credit</a>, <!-- This is my credit link! Feel free to change the color, but do not remove or move it! Thank you very much! --> <a href="https://photosynthesis.dreamwidth.org/" style="text-decoration: none; color: #666;">code credit</a></div></td></tr></table>

I've marked instructions and things to change throughout the code, but be on the lookout for:
CHARACTER NAME, for the header at the top
HEADER COLOR, a hex code (add the # at the beginning!) for the header at the top.
CATEGORY COLOR, a hex code (add the # at the beginning!) for each scroll box category.
LINK COLOR, a hex code (add the # at the beginning!) for the links at the bottom.
IMAGE URL, the URL of your image.
IMAGE WIDTH, the width in pixels of your image.
IMAGE HEIGHT, the height in pixels of your image.

Feel free to change the fonts, headings, and so on as you please. The fonts used are MS Gothic for the major headers, Georgia for the minor headers and personal links, and Arial for the text and the credit links.

As always, let me know if you need a hand with anything, and do not move or remove my credit!