isopods | [02] - cr chart / muselist; ▶ condensed (Reply)

ELLEN RIPLEY
alien (franchise)

xenoqueen

You can put some stuff about your CR or whatever games you've played in. Totally up to you.

UNDYNE
undertale

fuhuhuhuhu

This text box is really long and automatically adds a scrollbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta, libero id hendrerit interdum, enim eros laoreet nisl, vitae dignissim eros arcu at massa. In nec enim eros. Donec in augue aliquet, varius felis ac, pretium elit. Curabitur fermentum, erat sed dapibus ullamcorper, lorem nisl rutrum massa, id mattis lorem tortor a risus.

THE PYRO
team fortress 2

rainblower

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta, libero id hendrerit interdum, enim eros laoreet nisl, vitae dignissim eros arcu at massa. In nec enim eros. Donec in augue aliquet, varius felis ac, pretium elit. Curabitur fermentum, erat sed dapibus ullamcorper, lorem nisl rutrum massa, id mattis lorem tortor a risus.

ARCADE GANNON
fallout: new vegas

stimpaks

You can even change the color of the text box, text, box shadow, etc. if you so chose.

DETECTIVE GUMSHOE
ace attorney

suedeshoes

Get creative with it! This layout is intentionally supposed to be highly customizable and easily adaptable.

▶ CONDENSED

An easily customizable cr chart/muselist layout that lets you add as much information as you want without cluttering up the page!

INSTRUCTIONS:

→ UPDATE, May 22, 2023 - Converted code to use flex box and thus be mobile friendly.

→ UPDATE, February 18, 2021 - Added thin, stylish scrollbars, but only for Firefox....

→ UPDATE, July 29, 2020 - Edited the code so that all elements are aligned to the top of each row.

→ Each row allows for three boxes on a row for a typical 1920 x 1080 screen. New boxes automatically wrap around to a new row. To safely delete a box, delete the code starting with "START OF BOX" tag and ending with "END OF BOX" tag.

→ Feel free to customize this template as you want. It's intended to be easy to adjust and spice up, so do what you want! Just make sure to keep the credit intact.

→ By default, each box will automatically add a scrollbar if the text exceeds a certain length. If you don't want this scrollbar, just delete "max-height: 150px;" and "overflow: auto" from the appropriate box.

→ FOR THE OLD TABLE VERSION: To add a row of boxes, copy the following code and insert it after the "END OF ROW" tag. This is not necessary for the mobile-friendly version!

NEW ROW:

<tr>

<th style="width: 30%; font-weight: normal; vertical-align: top;">
<center>
<img src="ICON URL HERE"
    style="border-radius: 50%;
    box-shadow: 5px 5px #283f54;
    margin: 5px;">
</center>
<div style="
   border: 1px solid #000000;
   border-radius: 3px;
   box-shadow: 5px 5px #283f54;
   margin: 2px;
   padding: 5px;
   background-color: #ffffff;
   color: #000000;">
<details>
<summary style="text-align: center; cursor: pointer;">
<big><b>NAME</b></big>
<br/>
<i>canon</i>
<br/>
<user name="USERNAME_HERE">
</summary>
<hr>
<div id="details-text"
   style="
   max-height: 150px;
   scrollbar-width: thin;
   overflow: auto">
DESCRIPTION HERE.
<br/>
</div>
</details>
</div>
</th>

</tr>

→ If you have any questions or troubleshooting issues, please feel free to comment.

CODE (MOBILE FRIENDLY):

<raw-code>
<div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 10px; align-items: flex-start; font-family: 'MS Gothic'">

<div style="width: 275px; margin: 10px;">
<center>
<img src="ICON URL HERE"
    style="border-radius: 50%;
    box-shadow: 5px 5px #283f54;
    margin: 5px;">
</center>
<div style="
   border: 1px solid #000000;
   border-radius: 3px;
   box-shadow: 5px 5px #283f54;
   margin: 2px;
   padding: 5px;
   background-color: #ffffff;
   color: #000000;">
<details>
<summary style="text-align: center; cursor: pointer;">
<big><b>NAME</b></big>
<br/>
<i>canon</i>
<br/>
<user name="USERNAME_HERE">
</summary>
<hr>
<div id="details-text"
   style="
   max-height: 150px;
   scrollbar-width: thin;
   overflow: auto">
DESCRIPTION HERE.
<br/>
</div>
</details>
</div>
</div>

</div>


<div style="width: 100%; text-align: right; font-size: 10px; font-family: 'MS Gothic'">source @ <user name=isopods></div>
</raw-code>

OLD TABLE CODE (NON-MOBILE FRIENDLY):

<raw-code>

<table style="width: 100%; align: center; padding: 3px; font-family: 'MS Gothic'">

<tr>

</tr>

<tr>

</tr>

</table>


<div style="width: 100%; text-align: right; font-size: 10px; font-family: 'MS Gothic'">source @ <user name=isopods></div>
</raw-code>

[02] - cr chart / muselist; ▶ condensed

Post a comment in response: