Tessisamess

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Information

Hey guys! I liked the Micro Biosheet so much that I thought a character guide/roster might be fun. This would be really good for PSL accounts to list all their OCs in one place, or to have extended info for game NPCs!

This comes with a version that has filter toggles to sort by gender, and one without, as well as super quick and easy instructions for adding new toggles (you basically just have to run Replace All). Additionally, I've included info on removing the character hover information if you don't need all that and just want a simpler roster. Enjoy! 💖

Coding: With Filtering

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Character Guide</title>
	<link rel="shortcut icon" href="https://icons.iconarchive.com/icons/icons8/ios7/16/User-Interface-Email-icon.png">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- CHARACTER GUIDE - TESSISAMESS - 2023 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--bg-color: #F4EFF0;
	--bg-img: url()center;

--borders: #EACAD1;
	--content-bg: #fff;

--text: #111;
	--body-text: 10px;
	--body-font: calibri,arial,sans-serif;

--headings: #E86F8B;
	--heading-text: 35px;
	--heading-font: Bulgarry,times,serif;

--margin: 2px;
	--padding: 5px;

--accent1: #E86F8B;
	--accent2: #999;

--header-height: 35px;
	--header-title: 35px;

--toggle-btn-width: 80px;

--char-width: 500px;
	--char-img-width: 140px;
	--char-img-height: 140px;
	--char-info-height: 120px;

}

/* GENERAL */

@font-face{font-family:Bulgarry;src:url(https://dl.dropbox.com/s/k1qo9z6034a4pqt/John-Bulgarry.otf);}

::selection{background:var(--accent1);color:var(--lightest);}
::-moz-selection{background:var(--accent1);color:var(--lightest);}

::-webkit-scrollbar-track{background:var(--bg-color);}
::-webkit-scrollbar{width:5px;background:transparent;}
::-webkit-scrollbar-thumb{background:var(--accent1);border:2px solid var(--bg-color);border-radius:5px;}

.page::-webkit-scrollbar-track{background:var(--content-bg);}
.page::-webkit-scrollbar-thumb{border:2px solid var(--content-bg);}

*, *:before, *:after{box-sizing:border-box;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
body{margin:0;background:var(--bg-color) var(--bg-img);background-size:cover;font-family:var(--body-font);color:var(--text);font-size:var(--body-text);line-height:1;}
h1,h2,h3{font-family:var(--heading-font);font-weight:normal;margin:0;line-height:0;color:var(--headings);}

img{max-width:100%;}

a{text-decoration:none;color:var(--accent1);}
a:hover{color:var(--accent2);}

/* CONTAINERS */

article{}
main{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}

/* HEADER */

header{width:100%;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--content-bg);border-bottom:1px solid var(--borders);padding:0 calc(var(--header-height) / 2);z-index:3;}
header h1{line-height:var(--header-height);font-size:var(--header-title);margin:0 0 0 8px;text-shadow:1px 1px 0 var(--content-bg),2px 2px 0 var(--content-bg),3px 3px 2px ;}

header nav{font-weight:bold;text-transform:uppercase;letter-spacing:1px;}
header nav a{border:1px solid rgba(0,0,0,0.1);padding:2px 8px 2px 9px;}
header nav a:hover{}

/* CHARACTERS */

.char{width:var(--char-width);display:flex;align-items:flex-end;justify-content:center;margin:15px;}

.char .pic{display:flex;align-items:flex-end;justify-content:flex-start;background-size:cover!important;border:8px solid #fff;width:var(--char-img-width);height:var(--char-img-height);border-radius:10px;outline:1px solid var(--borders);box-shadow:1px 1px 3px rgba(0,0,0,0.1);}
.char .pic[style*='()']{background:rgba(0,0,0,0.02)!important;}
.char .pic .user{background:var(--content-bg);border:1px solid var(--borders);border-radius:3px;box-shadow:1px 1px 2px rgba(0,0,0,0.1);padding:2px 5px;margin:5px;}

.char .info{width:calc(100% - var(--char-img-width) - 10px);margin:0 0 0 10px;position:relative;}

.char .info .name{font-size:var(--heading-text);margin:0 0 0 8px;text-shadow:1px 1px 0 var(--content-bg),2px 2px 0 var(--content-bg),3px 3px 2px ;position:relative;z-index:2;}

/* CHARACTER INFO */

.char .info .page{height:var(--char-info-height);overflow:auto;background:var(--content-bg);border:1px solid var(--borders);border-left:6px solid var(--borders);padding:10px;}
.char .info .page b{text-transform:uppercase;letter-spacing:1px;color:var(--accent1);}

.char .info .bio{position:absolute;bottom:0;left:0;right:0;opacity:0;}
.char .info .bio:hover{opacity:1;}

/* USE FILTER-SPECIFIC COLORS */

.femme a{color:;}
.femme .pic{outline-color:;}
.femme .pic .user{border-color:;}
.femme .info .name{color:;}
.femme .info .page{border-color:;}
.femme .info .page b{color:;}

.masc a{color:;}
.masc .pic{outline-color:;}
.masc .pic .user{border-color:;}
.masc .info .name{color:;}
.masc .info .page{border-color:;}
.masc .info .page b{color:;}

.nb a{color:;}
.nb .pic{outline-color:;}
.nb .pic .user{border-color:;}
.nb .info .name{color:;}
.nb .info .page{border-color:;}
.nb .info .page b{color:;}

.placeholder1 a{color:;}
.placeholder1 .pic{outline-color:;}
.placeholder1 .pic .user{border-color:;}
.placeholder1 .info .name{color:;}
.placeholder1 .info .page{border-color:;}
.placeholder1 .info .page b{color:;}

.placeholder2 a{color:;}
.placeholder2 .pic{outline-color:;}
.placeholder2 .pic .user{border-color:;}
.placeholder2 .info .name{color:;}
.placeholder2 .info .page{border-color:;}
.placeholder2 .info .page b{color:;}

.placeholder3 a{color:;}
.placeholder3 .pic{outline-color:;}
.placeholder3 .pic .user{border-color:;}
.placeholder3 .info .name{color:;}
.placeholder3 .info .page{border-color:;}
.placeholder3 .info .page b{color:;}

.placeholder4 a{color:;}
.placeholder4 .pic{outline-color:;}
.placeholder4 .pic .user{border-color:;}
.placeholder4 .info .name{color:;}
.placeholder4 .info .page{border-color:;}
.placeholder4 .info .page b{color:;}

.placeholder5 a{color:;}
.placeholder5 .pic{outline-color:;}
.placeholder5 .pic .user{border-color:;}
.placeholder5 .info .name{color:;}
.placeholder5 .info .page{border-color:;}
.placeholder5 .info .page b{color:;}

.placeholder6 a{color:;}
.placeholder6 .pic{outline-color:;}
.placeholder6 .pic .user{border-color:;}
.placeholder6 .info .name{color:;}
.placeholder6 .info .page{border-color:;}
.placeholder6 .info .page b{color:;}

Hello, person who wants to add more toggles! I've added everything needed to serve as placeholders for up to SIX (6) extra toggles. I don't think any more than that will fit this code. If you need in-depth toggling, I highly suggest using Referential (https://referential.insanejournal.com/) instead of this.

Run a REPLACE ALL on this entire page to instantly add new filters, then un-hide their toggle input down in the HTML. For example, you could run a replace all on the term "placeholder1" to change it to "genderfluid" across the board, creating your new option.

/* FILTER */

.femme-filter:after{content:'Femme';}
.masc-filter:after{content:'Masc';}
.nonbinary-filter:after{content:'Nonbinary';}
.placeholder1-filter:after{content:'placeholder1';}
.placeholder2-filter:after{content:'placeholder2';}
.placeholder3-filter:after{content:'placeholder3';}
.placeholder4-filter:after{content:'placeholder4';}
.placeholder5-filter:after{content:'placeholder5';}
.placeholder6-filter:after{content:'placeholder6';}
.all:after{content:'All';}

.gender{-moz-appearance:none;appearance:none;cursor:pointer;margin:0;font-family:var(--main-font);font-size:var(--body-text);font-weight:bold;text-transform:uppercase;letter-spacing:1px;color:var(--accent1);}
.gender:after{display:block;width:var(--toggle-btn-width);height:20px;line-height:18px;background:var(--content-bg);border:1px solid rgba(0,0,0,0.1);padding:0 0 0 8px;}
.gender:hover:after{color:var(--accent);}
.gender:checked:after{background:rgba(0,0,0,0.1);color:var(--lightest);}

.gender{position:fixed;top:7px;z-index:4;}
.gender:nth-of-type(1){right:calc((var(--toggle-btn-width) * 0) + (8px * 1));}
.gender:nth-of-type(2){right:calc((var(--toggle-btn-width) * 1) + (8px * 2));}
.gender:nth-of-type(3){right:calc((var(--toggle-btn-width) * 2) + (8px * 3));}
.gender:nth-of-type(4){right:calc((var(--toggle-btn-width) * 3) + (8px * 4));}
.gender:nth-of-type(5){right:calc((var(--toggle-btn-width) * 4) + (8px * 5));}
.gender:nth-of-type(6){right:calc((var(--toggle-btn-width) * 5) + (8px * 6));}
.gender:nth-of-type(7){right:calc((var(--toggle-btn-width) * 6) + (8px * 7));}
.gender:nth-of-type(8){right:calc((var(--toggle-btn-width) * 7) + (8px * 8));}
.gender:nth-of-type(9){right:calc((var(--toggle-btn-width) * 8) + (8px * 9));}
.gender:nth-of-type(10){right:calc((var(--toggle-btn-width) * 9) + (8px * 10));}

.masc-filter:checked ~ main .femme,
.masc-filter:checked ~ main .nb,
.masc-filter:checked ~ main .placeholder1,
.masc-filter:checked ~ main .placeholder2,
.masc-filter:checked ~ main .placeholder3,
.masc-filter:checked ~ main .placeholder4,
.masc-filter:checked ~ main .placeholder5,
.masc-filter:checked ~ main .placeholder6,

.femme-filter:checked ~ main .masc,
.femme-filter:checked ~ main .nb,
.femme-filter:checked ~ main .placeholder1,
.femme-filter:checked ~ main .placeholder2,
.femme-filter:checked ~ main .placeholder3,
.femme-filter:checked ~ main .placeholder4,
.femme-filter:checked ~ main .placeholder5,
.femme-filter:checked ~ main .placeholder6,

.nonbinary-filter:checked ~ main .masc,
.nonbinary-filter:checked ~ main .femme,
.nonbinary-filter:checked ~ main .placeholder1,
.nonbinary-filter:checked ~ main .placeholder2,
.nonbinary-filter:checked ~ main .placeholder3,
.nonbinary-filter:checked ~ main .placeholder4,
.nonbinary-filter:checked ~ main .placeholder5,
.nonbinary-filter:checked ~ main .placeholder6,

.placeholder1-filter:checked ~ main .masc,
.placeholder1-filter:checked ~ main .femme,
.placeholder1-filter:checked ~ main .nb,
.placeholder1-filter:checked ~ main .placeholder2,
.placeholder1-filter:checked ~ main .placeholder3,
.placeholder1-filter:checked ~ main .placeholder4,
.placeholder1-filter:checked ~ main .placeholder5,
.placeholder1-filter:checked ~ main .placeholder6,

.placeholder2-filter:checked ~ main .masc,
.placeholder2-filter:checked ~ main .femme,
.placeholder2-filter:checked ~ main .nb,
.placeholder2-filter:checked ~ main .placeholder1,
.placeholder2-filter:checked ~ main .placeholder3,
.placeholder2-filter:checked ~ main .placeholder4,
.placeholder2-filter:checked ~ main .placeholder5,
.placeholder2-filter:checked ~ main .placeholder6,

.placeholder3-filter:checked ~ main .masc,
.placeholder3-filter:checked ~ main .femme,
.placeholder3-filter:checked ~ main .nb,
.placeholder3-filter:checked ~ main .placeholder1,
.placeholder3-filter:checked ~ main .placeholder2,
.placeholder3-filter:checked ~ main .placeholder4,
.placeholder3-filter:checked ~ main .placeholder5,
.placeholder3-filter:checked ~ main .placeholder6,

.placeholder4-filter:checked ~ main .masc,
.placeholder4-filter:checked ~ main .femme,
.placeholder4-filter:checked ~ main .nb,
.placeholder4-filter:checked ~ main .placeholder1,
.placeholder4-filter:checked ~ main .placeholder2,
.placeholder4-filter:checked ~ main .placeholder3,
.placeholder4-filter:checked ~ main .placeholder5,
.placeholder4-filter:checked ~ main .placeholder6,

.placeholder5-filter:checked ~ main .masc,
.placeholder5-filter:checked ~ main .femme,
.placeholder5-filter:checked ~ main .nb,
.placeholder5-filter:checked ~ main .placeholder1,
.placeholder5-filter:checked ~ main .placeholder2,
.placeholder5-filter:checked ~ main .placeholder3,
.placeholder5-filter:checked ~ main .placeholder4,
.placeholder5-filter:checked ~ main .placeholder6,

.placeholder6-filter:checked ~ main .masc,
.placeholder6-filter:checked ~ main .femme,
.placeholder6-filter:checked ~ main .nb,
.placeholder6-filter:checked ~ main .placeholder1,
.placeholder6-filter:checked ~ main .placeholder2,
.placeholder6-filter:checked ~ main .placeholder3,
.placeholder6-filter:checked ~ main .placeholder4,
.placeholder6-filter:checked ~ main .placeholder5
{display:none;}

/* CREDIT */

#credit{position:fixed;left:0;bottom:20px;background:var(--content-bg);border:1px solid var(--borders);border-right:3px solid var(--borders);padding:5px;font-weight:bold;font-size:8px;text-transform:uppercase;letter-spacing:3px;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;color:var(--accent1);}

</style>

</head>

<body>

<header>

<h1>character guide;</h1>

</header>

<main>

<section class="char femme masc nb">

<div class="pic" style="background:url(CHAR_IMG)center;">
					<a href="" class="user">@user</a>
				</div>

<div class="info">

<h3 class="name">name;</h3>

<div class="page stats">

<b>Species</b> INFO_HERE<br><br>

<b>Pronouns</b> INFO_HERE<br><br>

<b>Fandom</b> INFO_HERE

</div>

<div class="page bio">

<b>More</b> Info_here

</div>

</section>

</main>

</form></article>

<a href="https://tessisamess.insanejournal.com/152827.html" id="credit">CODING</a>

</body>
</html>

Coding: Without Filtering

<style>

/*--- CHARACTER GUIDE - TESSISAMESS - 2023 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--bg-color: #F4EFF0;
	--bg-img: url()center;

--borders: #EACAD1;
	--content-bg: #fff;

--text: #111;
	--body-text: 10px;
	--body-font: calibri,arial,sans-serif;

--headings: #E86F8B;
	--heading-text: 35px;
	--heading-font: Bulgarry,times,serif;

--margin: 2px;
	--padding: 5px;

--accent1: #E86F8B;
	--accent2: #999;

--header-height: 35px;
	--header-title: 35px;

--char-width: 500px;
	--char-img-width: 140px;
	--char-img-height: 140px;
	--char-info-height: 120px;

}

/* GENERAL */

@font-face{font-family:Bulgarry;src:url(https://dl.dropbox.com/s/k1qo9z6034a4pqt/John-Bulgarry.otf);}

::selection{background:var(--accent1);color:var(--lightest);}
::-moz-selection{background:var(--accent1);color:var(--lightest);}

.page::-webkit-scrollbar-track{background:var(--content-bg);}
.page::-webkit-scrollbar-thumb{border:2px solid var(--content-bg);}

img{max-width:100%;}

a{text-decoration:none;color:var(--accent1);}
a:hover{color:var(--accent2);}

/* CONTAINER */

#characters{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}

/* HEADER */

header nav{font-weight:bold;text-transform:uppercase;letter-spacing:1px;}
header nav a{border:1px solid rgba(0,0,0,0.1);padding:2px 8px 2px 9px;}
header nav a:hover{}

/* CHARACTERS */

.char{width:var(--char-width);display:flex;align-items:flex-end;justify-content:center;margin:15px;}

.char .info{width:calc(100% - var(--char-img-width) - 10px);margin:0 0 0 10px;position:relative;}

.char .info .name{font-size:var(--heading-text);margin:0 0 0 8px;text-shadow:1px 1px 0 var(--content-bg),2px 2px 0 var(--content-bg),3px 3px 2px ;position:relative;z-index:2;}

/* CHARACTER INFO */

.char .info .bio{position:absolute;bottom:0;left:0;right:0;opacity:0;}
.char .info .bio:hover{opacity:1;}

/* USE GROUP-SPECIFIC COLORS */

.femme a{color:;}
.femme .pic{outline-color:;}
.femme .pic .user{border-color:;}
.femme .info .name{color:;}
.femme .info .page{border-color:;}
.femme .info .page b{color:;}

.masc a{color:;}
.masc .pic{outline-color:;}
.masc .pic .user{border-color:;}
.masc .info .name{color:;}
.masc .info .page{border-color:;}
.masc .info .page b{color:;}

.nb a{color:;}
.nb .pic{outline-color:;}
.nb .pic .user{border-color:;}
.nb .info .name{color:;}
.nb .info .page{border-color:;}
.nb .info .page b{color:;}

/* CREDIT */

</style>

</head>

<body>

<header>

<h1>character guide;</h1>

<nav>

<a href="">Link One</a>
				<a href="">Link Two</a>
				<a href="">Link Three</a>
				<a href="">Link Four</a>
				<a href="">Link Five</a>

</nav>

</header>

<section class="char femme masc nb">

<div class="pic" style="background:url(CHAR_IMG)center;">
				<a href="" class="user">@user</a>
			</div>

<div class="info">

<h3 class="name">name;</h3>

<div class="page stats">

<b>Species</b> INFO_HERE<br><br>

<b>Pronouns</b> INFO_HERE<br><br>

<b>Fandom</b> INFO_HERE

</div>

<div class="page bio">

<b>More</b> Info_here

</div>

</section>

</article>

<a href="https://tessisamess.insanejournal.com/152827.html" id="credit">CODING</a>

</body>
</html>

Installation Guide

Paste into a custom style (or off-site equivalent if you don't have a paid account) and have fun! Remember: The info for adding new filters and removing the hover are both on the page itself.

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: codes: cast list, codes: character roster, codes: other, codes: relationships, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

HTML Page: Character Guide

Information

Coding: With Filtering

Coding: Without Filtering

Installation Guide

Terms of Use