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!

Comments

[silvertongueheir]

This code looks super-nice with tall images, but I was wondering-is there a way to add background colors to the various textboxes/headers? Mainly because I think it looks a little plain with just the normal background color.

[prospitian]

For sure! The CSS you're going to want to use is background: #FFFFFF url('URL HERE'); , replacing #FFFFFF with your hex code, and URL here with the image URL. If you just want a color, use background-color: #FFFFFF; instead. If you find the div/box you want to add a color to, and add all of that, semicolon and all, directly after the div style=", it'll apply the background to that box!

<div style="width: 100%; line-height: 1.75em; margin: 1em 0;">
That div is for the whole top strip with the vitals.

<table style="width: 100%;">
This table is just, the whole thing, including the image (if you're using a transparent one).

<div style="display: flex; font: 1em Arial;">
This is the whole thing except for the header with the name and the credits.

<div style="overflow: auto; height: IMAGE HEIGHT; flex-grow: 1;"><div style="width: 100%; line-height: 1.75em; margin: 1em 0;">
That's the whole right column, vitals and boxes and all.

I thiiiink the rest of them should be fairly self-explanatory (it's just, the div style=" immediately before the piece of labelled information), just keep in mind the headers are outside of the actual informational boxes! If you're having trouble finding the particular part of the code you want to apply a background to, just lemme know and I'll pick it out for you!

[varnish]

Hello! I love this code and would like to use it for my account, but I’m afraid the text area on the right causes the whole table to extend beyond the image whenever I add more lines of text, if that makes sense. It looks fine in a code checker, but for some reason gets messed up in DW, so I’m not sure if that’s DW’s problem or something I’ve done along the way.

EDIT: wow ok that image link wasn’t working so here it is again without the hyperlink! https://imgur.com/a/v6dw5ie Thank you!

[varnish]

... oh my god and it figures that as soon as I ask this I managed to get it fixed. SORRY FOR THE BOTHER! At any rate, thank you again for the code! I'll be using it here!

[bloodspring]

Going out on a limb here to follow up on something more than a year later, but- I'm actually encountering the same issue as above, so do you have any insight as to how you fixed it?

[prospitian]

if you can pastebin the code i'll take a look myself!!

[bloodspring]

Here is what I have currently... Even when I've tried starting fresh with the original code, as soon as the body text is inserted it acts up, so I'm really not sure what's going on. :(

I noticed on the live preview there's another scrollbar encompassing the whole table? I don't seem to have that, so I wonder if it's important at all.

Sorry for the bother, but also thank you for taking the time!

[prospitian]

no bother at all! i don't see the scrollbar on the live preview; can i ask what browser you're in?

[prospitian]

in the meantime i figured out the problem with the code!

1) IMAGE HEIGHT and IMAGE WIDTH weren't replaced
and 2) the boxes ended up at height: 10% instead of their usual 20% somehow (probably in attempts to get the heights to work)?

<raw-code><table style="width: 100%;"><tbody><tr><td> <h1 style="font: 3em 'MS Gothic'; font-weight: 700; color: HEADER COLOR; width: 100%; text-align: right; clear: both;">LOUIS AMAMIYA</h1> <div style="display: flex; font: 1em Arial;"><div style="width: 484px;"><img src="https://puu.sh/G3fsl/97dfed9ff6.png" alt="" /></div> <div style="overflow: auto; height: 851px; 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 /> 20 (at death)</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 /> Male</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 /> 176 (5'9")</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 /> Athletic</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 /> Revenant</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;">Background</h2> <div style="height: 20%; padding: 0 0.5em 0.5em 0.5em; margin: 1em 0; overflow: auto;"> <!-- FIRST IMPRESSIONS HERE --> <p>The world of Code Vein is a post-apocalyptic dystopia where half of the planet’s population was extinguished in one fell swoop known as the Great Collapse. The earth is now rend by colossal, glowing spikes called Thorns of Judgment, and ridden with horrifying creatures that are simply addressed as Terrors. However, the main setting of the game is within the isolated city of Vein, self-contained by an impenetrable barrier named the Red Mist which serves two primary functions: keeping the Terrors out, and the Lost and Revenants within. <p>Vein is home to three main species, all struggling to co-exist. There are the ordinary humans, now a particularly rare and coveted breed; they are frequently preyed upon by the Lost and enslaved by Revenants, who treat them like little more than food. Many take shelter with Vein’s provisional government, where they are fed, clothed and protected in exchange for blood donations. <p>The Revenants are humans who had died and been implanted with the BOR (Biological Organ Regenerative) parasite, which revived them. Revenants depend on blood to survive, but they also have strength, speed, and a great variety of powers that exceed those of humans, as well as the ability to “disperse”—a false death triggered when the parasite senses that its host is at their physical limit, allowing the body to become like mist and re-materialize somewhere safe. With each dispersal, a Revenant will lose some part of their memory, though most are so insignificant that the missing pieces go unnoticed. Reckless Revenants who charge into battle and disperse excessively are prone to losing all memories of who they are. <p>Revenants came into existence in the world’s time of need, right after the Great Collapse. Countless people had fallen, including capable fighters, and the death and destruction would only rise if nothing was done. The BOR parasite had been created prior with the intentions of it being a medical miracle, but was stowed away due to its controversial effects. It was then uncovered and put to use during this crisis, and the ranks of the war effort began to fill with the resurrected. These newly-awoken Revenants were tasked with fending off the Terrors, beginning their cycles of violent death and unrelenting rebirth. Revenants were only freed from this fate if they were pierced through the heart—the only way for a Revenant to achieve true death, reducing them to ashes—or became one of the Lost. <p>The Lost are gruesome monsters incapable of thought and purely instinctual, driven by insatiable hunger. A Revenant who goes too long without blood runs the risk of frenzying, in which they lose all control of their faculties and begin transforming into one of the Lost. This transformation may be halted if they are quickly fed with blood, but once they are completely transformed, there is no reversal. Most Lost are born from Revenants, though humans whose bodies reject the BOR parasite will not awaken as Revenants, but as the Lost instead. The Lost cannot be permanently killed, even if struck through the heart. With each death, they are revived into a monster further and further away from their original forms, eventually becoming entirely unrecognizable. <p>By the time the game takes place, half of the city of Vein is overrun with the Lost, and the remaining Revenants are at a lack for sustainable food sources. Mysterious white plants called bloodsprings pepper the city, bearing fruit-like vessels that act as a fulfilling substitute for human blood—“blood beads.” However, most bloodsprings have dried up due to pollution; the Lost give off a poisonous miasma that taints the air, and though humans appear unaffected by it, it is incredibly dangerous to Revenants, as it can accelerate their bloodthirst and induce frenzy with prolonged and unfiltered exposure. <p>The Lost and the miasma sharply reduce the available living space, and what blood beads can be scrounged up are often taken through the provisional government’s levy and thinly redistributed. Most Revenants are left to scavenge desperately, sometimes abducting humans to feed off of, sometimes taking smaller and weaker Revenants as thralls to search for food without putting themselves in harm’s way. Revenants will often fight for territory as well as blood beads, with the losing parties frequently joining the ranks of the Lost. In this world where only the strong will survive, everyone hopes for reform but only some strive to achieve it—and not all will live to see it through. </div> <h2 style="margin: 1em 0 0 0; font: 1.75em 'MS Gothic'; font-weight: 700; color: CATEGORY COLOR;">Personality</h2> <div style="height: 20%; padding: 0 0.5em 0.5em 0.5em; margin: 1em 0; overflow: auto;"> <!-- INFO HERE --> <p>The world of Code Vein is a post-apocalyptic dystopia where half of the planet’s population was extinguished in one fell swoop known as the Great Collapse. The earth is now rend by colossal, glowing spikes called Thorns of Judgment, and ridden with horrifying creatures that are simply addressed as Terrors. However, the main setting of the game is within the isolated city of Vein, self-contained by an impenetrable barrier named the Red Mist which serves two primary functions: keeping the Terrors out, and the Lost and Revenants within. <p>Vein is home to three main species, all struggling to co-exist. There are the ordinary humans, now a particularly rare and coveted breed; they are frequently preyed upon by the Lost and enslaved by Revenants, who treat them like little more than food. Many take shelter with Vein’s provisional government, where they are fed, clothed and protected in exchange for blood donations.</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 --> <p>The world of Code Vein is a post-apocalyptic dystopia where half of the planet’s population was extinguished in one fell swoop known as the Great Collapse. The earth is now rend by colossal, glowing spikes called Thorns of Judgment, and ridden with horrifying creatures that are simply addressed as Terrors. However, the main setting of the game is within the isolated city of Vein, self-contained by an impenetrable barrier named the Red Mist which serves two primary functions: keeping the Terrors out, and the Lost and Revenants within. <p>Vein is home to three main species, all struggling to co-exist. There are the ordinary humans, now a particularly rare and coveted breed; they are frequently preyed upon by the Lost and enslaved by Revenants, who treat them like little more than food. Many take shelter with Vein’s provisional government, where they are fed, clothed and protected in exchange for blood donations.</div> </div></div> <div style="width: 100%; font: 0.9em Arial; text-align: right;"> <!-- 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></tbody></table></raw-code>

here's the fixed version!

[bloodspring]

Oh!! Shoot, I should've known I'd miss something so simple. I'm sorry for the trouble! Thank you so much though!!

[shadowcat]

This is going to sound like an odd question but is there a way to add a fourth section beneath Abilities that won't mess up the coding?

I'd like to use this for an app for a game but it needs to have Personality, Abilities, History, Modern History.