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 saw a neat code on Codepen and thought, "I could totally make something like that in an IJ-compatible way with functions built in." So that's what I did lmao; I love making things that usually need js or jq to work in site-safe alternative ways.

Honestly, this would be so cute for a species page, or if you have minimal locations to list, or available characters for PSLs, wanted lines, a single character bio, etc etc.; LOTS of potential for other uses. I made sure to include notes where you can delete functions you may not want, and I've included an entry version that you basically just install like a splash page, but backdated instead of post-dated. Enjoy! 💖

Coding: HTML Page

Paste into a custom style (or off-site equivalent if you don't have a paid account) and have fun!

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Character Roster</title>
	<link rel="shortcut icon" href="https://icons.iconarchive.com/icons/aniket-suvarna/box-regular/16/bx-user-circle-icon.png">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">

<style>

/*--- MORPH ROSTER - TESSISAMESS - 2023 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

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

--borders: #222;
	--content-bg: #000;
	--more-info-bg: rgba(0,0,0,0.6);

--text: #fff;
	--body-text: 12px;
	--body-font: calibri,arial,sans-serif;

--headings: #B71515;
	--heading-text: 40px;
	--heading-font: Bulgarry,times,serif;
	--subtitle-text: 10px;

--header-title: 30px;
	--header-links: 10px;

--margin: 5px;
	--padding: 15px;

--accent1: #B71515;
	--accent2: #999;

--header-height: 50px;

--char-radius: 40px;
	--icon-radius: 100%;

--char-width: 500px;
	--char-height: 425px;
	--char-icon: 55px;

}

/* 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;}

*, *: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.5;text-shadow:1px 1px 0 rgba(0,0,0,0.5);}
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);}

/* HEADER */

header{height:var(--header-height);background:var(--content-bg);border-bottom:1px solid var(--borders);display:flex;align-items:center;justify-content:flex-start;padding:0 calc(var(--header-height) / 2);color:var(--accent2);}

header .icon{width:calc(var(--header-height) / 1.4);height:calc(var(--header-height) / 1.4);background:rgba(0,0,0,0.1);border-radius:var(--icon-radius);object-fit:cover;object-position:center;margin:0 10px 0 0;}

header h1{font-size:var(--header-title);}

header nav{margin:0 0 0 auto;font-size:var(--header-links);text-transform:uppercase;letter-spacing:3px;font-weight:bold;}
header nav a{margin:0 8px;}
header nav a:last-of-type{margin:0 0 0 8px;}
header nav a:hover{}

/* CONTAINER */

.characters{display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--header-height));}
.inactive{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;margin:0;-moz-appearance:none;appearance:none;}

/* CHARACTER BLOCKS */

.block{position:relative;display:flex;align-items:flex-end;flex-direction:row-reverse;height:var(--char-height);margin:0 var(--margin);padding:var(--padding);border-radius:var(--char-radius);background-size:cover!important;min-width:calc(var(--char-icon) + var(--padding) + var(--padding));}
.block[style*='()']{background:var(--borders)!important;}

/* SLIDER */

.open, .close{position:absolute;left:var(--padding);bottom:var(--padding);width:var(--char-icon);height:var(--char-icon);margin:0;cursor:pointer;-moz-appearance:none;appearance:none;}
.open:checked{display:none;}
.close{display:none;}
.open:checked + .close{display:block;}
.block .icon{position:absolute;left:var(--padding);bottom:var(--padding);width:var(--char-icon);height:var(--char-icon);background:rgba(0,0,0,0.1);border-radius:var(--icon-radius);object-fit:cover;object-position:center;}

/* TITLES */

.head{width:0;overflow:hidden;height:var(--char-icon);display:flex;flex-direction:column;justify-content:center;white-space:nowrap;}
.head h3{font-size:var(--heading-text);line-height:0.3;}
.head .sub{font-size:var(--subtitle-text);text-transform:uppercase;letter-spacing:3px;font-weight:bold;}

.open:checked ~ .head{width:var(--char-width);padding:0 0 0 calc(var(--char-icon) + var(--padding));}
.close:checked ~ .head{width:0;}

/* MORE INFO */

.more, .less{position:absolute;top:var(--padding);right:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;}
.more:after, .less:after{content:'i';font-style:italic;font-size:15px;font-weight:bold;font-family:georgia,serif;border:1px solid;display:block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:100%;}

.inactive:checked ~ .more, .more:checked{display:none;}
.open:not(:checked) ~ .less, .less{display:none;}
.more:checked + .less{display:block;}

.more-info{opacity:0;transform:scale(0);position:absolute;top:calc(var(--char-icon) + var(--padding) + var(--padding));right:calc(var(--char-icon) + var(--padding) + var(--padding));bottom:calc(var(--char-icon) + var(--padding) + var(--padding));left:calc(var(--char-icon) + var(--padding) + var(--padding));background:var(--more-info-bg);padding:var(--padding);overflow:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}

.more:checked ~ .more-info{opacity:1;transform:scale(1);}

.less:checked ~ .more-info, .open:not(:checked) ~ .more, .open:not(:checked) ~ .more-info{opacity:0;transform:scale(0);}

/* CREDIT */

.credit{position:fixed;left:0;bottom:20px;background:var(--content-bg);border:1px solid var(--borders);border-right:3px solid var(--accent1);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>
		<img src="ICON_URL" class="icon">
		<a href="/"><h1>Character Roster</h1></a>
		<nav>
			<a href="">Link</a> |
			<a href="">Link</a> |
			<a href="">Link</a>
		</nav>
	</header>

<section class="block" style="background:url()center;">

<img src="ICON_URL" class="icon">

<input type="radio" name="slide" class="open">
			<input type="radio" name="slide" class="close">

<div class="head">
				<h3>Character Name</h3>
				<div class="sub">Character Subtitle</div>
			</div>

<div class="more-info">
				YOUR_INFO
			</div>

</section>

</form>

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

</body>
</html>

Coding: Entry Page CSS

Add this to your existing layout CSS and then use the HTML provided in the next box.

/*--- MORPH ROSTER - TESSISAMESS - 2023 ---*/
/*-- Find more fun stuff at: tessisamess.insanejournal.com --*/

/* ROSTER REPLACEMENTS */

:root .roster{
	--bg-color: #0a0a0a;
	--bg-img: url()center;

--borders: #222;
	--content-bg: #000;
	--more-info-bg: rgba(0,0,0,0.6);

--text: #fff;
	--body-text: 12px;
	--body-font: calibri,arial,sans-serif;

--headings: #B71515;
	--heading-text: 40px;
	--heading-font: Bulgarry,times,serif;
	--subtitle-text: 10px;

--header-title: 30px;
	--header-links: 10px;

--margin: 5px;
	--padding: 15px;

--accent1: #B71515;
	--accent2: #999;

--header-height: 50px;

--char-radius: 40px;
	--icon-radius: 100%;

--char-width: 500px;
	--char-height: 425px;
	--char-icon: 55px;

}

/* ROSTER */

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

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

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

.roster *, .roster *:before, .roster *: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;}

.roster{position:fixed;top:0;left;0;right:0;bottom:0;z-index:10;width:100vw;height:100vh;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.5;text-shadow:1px 1px 0 rgba(0,0,0,0.5);}
.roster h1,.roster h2,.roster h3{text-transform:none;letter-spacing:0;font-family:var(--heading-font);font-weight:normal;margin:0;line-height:0;color:var(--headings);}

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

/* ROSTER HEADER */

.roster header{height:var(--header-height);background:var(--content-bg);border-bottom:1px solid var(--borders);display:flex;align-items:center;justify-content:flex-start;padding:0 calc(var(--header-height) / 2);color:var(--accent2);}

.roster header .icon{width:calc(var(--header-height) / 1.4);height:calc(var(--header-height) / 1.4);background:rgba(0,0,0,0.1);border-radius:var(--icon-radius);object-fit:cover;object-position:center;margin:0 10px 0 0;}

.roster header h1{font-size:var(--header-title);}

.roster header nav{margin:0 0 0 auto;font-size:var(--header-links);text-transform:uppercase;letter-spacing:3px;font-weight:bold;}
.roster header nav a{margin:0 8px;}
.roster header nav a:last-of-type{margin:0 0 0 8px;}
.roster header nav a:hover{}

/* ROSTER CONTAINER */

.roster .characters{display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--header-height));}
.roster .inactive{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;margin:0;-moz-appearance:none;appearance:none;}

/* ROSTER CHARACTER BLOCKS */

.roster .block{position:relative;display:flex;align-items:flex-end;flex-direction:row-reverse;height:var(--char-height);margin:0 var(--margin);padding:var(--padding);border-radius:var(--char-radius);background-size:cover!important;min-width:calc(var(--char-icon) + var(--padding) + var(--padding));}
.roster .block[style*='()']{background:var(--borders)!important;}

/* ROSTER SLIDER */

.roster .open, .roster .close{position:absolute;left:var(--padding);bottom:var(--padding);width:var(--char-icon);height:var(--char-icon);margin:0;cursor:pointer;-moz-appearance:none;appearance:none;}
.roster .open:checked{display:none;}
.roster .close{display:none;}
.roster .open:checked + .close{display:block;}
.roster .block .icon{position:absolute;left:var(--padding);bottom:var(--padding);width:var(--char-icon);height:var(--char-icon);background:rgba(0,0,0,0.1);border-radius:var(--icon-radius);object-fit:cover;object-position:center;}

/* ROSTER TITLES */

.roster .head{width:0;overflow:hidden;height:var(--char-icon);display:flex;flex-direction:column;justify-content:center;white-space:nowrap;}
.roster .head h3{font-size:var(--heading-text);line-height:0.3;}
.roster .head .sub{font-size:var(--subtitle-text);text-transform:uppercase;letter-spacing:3px;font-weight:bold;}

.roster .open:checked ~ .head{width:var(--char-width);padding:0 0 0 calc(var(--char-icon) + var(--padding));}
.roster .close:checked ~ .head{width:0;}

/* ROSTER MORE INFO */

.roster .more, .roster .less{position:absolute;top:var(--padding);right:var(--padding);cursor:pointer;-moz-appearance:none;appearance:none;}
.roster .more:after, .roster .less:after{content:'i';font-style:italic;font-size:15px;font-weight:bold;font-family:georgia,serif;border:1px solid;display:block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:100%;}

.roster .inactive:checked ~ .more, .roster .more:checked{display:none;}
.roster .open:not(:checked) ~ .less, .roster .less{display:none;}
.roster .more:checked + .less{display:block;}

.roster .more-info{opacity:0;transform:scale(0);position:absolute;top:calc(var(--char-icon) + var(--padding) + var(--padding));right:calc(var(--char-icon) + var(--padding) + var(--padding));bottom:calc(var(--char-icon) + var(--padding) + var(--padding));left:calc(var(--char-icon) + var(--padding) + var(--padding));background:var(--more-info-bg);padding:var(--padding);overflow:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}

.roster .more:checked ~ .more-info{opacity:1;transform:scale(1);}

.roster .less:checked ~ .more-info, .roster .open:not(:checked) ~ .more, .roster .open:not(:checked) ~ .more-info{opacity:0;transform:scale(0);}

/* ROSTER CREDIT */

.roster .credit{position:fixed;left:0;bottom:20px;background:var(--content-bg);border:1px solid var(--borders);border-right:3px solid var(--accent1);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);}

Coding: Entry Page HTML

Post this in an entry, use date out of order, and backdate it to 2010 (or any year as long as it's older than your oldest entry (example). Then you can tag the entry 'roster' or whatever you like, and going to name.insanejournal.com/tag/roster will display the page.

<lj-raw><article class="roster">

<header>
		<img src="ICON_URL" class="icon">
		<a href="/"><h1>Character Roster</h1></a>
		<nav>
			<a href="">Link</a> |
			<a href="">Link</a> |
			<a href="">Link</a>
		</nav>
	</header>

<section class="block" style="background:url()center;">

<img src="ICON_URL" class="icon">

<input type="radio" name="slide" class="open">
			<input type="radio" name="slide" class="close">

<div class="head">
				<h3>Character Name</h3>
				<div class="sub">Character Subtitle</div>
			</div>

<div class="more-info">
				YOUR_INFO
			</div>

</section>

</form>

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

</article></lj-raw><noembed>

Note

Change <input type="radio" name="slide" class="open"> to <input type="radio" name="slide" class="open" checked> for whichever block you'd like to be open by default, if any.

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, codes: character roster, codes: other, html page

Profile

Title Here

Navigation

July 2024

Links List

Resources

Tags

Layout By

HTML Page: Morph Roster