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

IN-ENTRY PREVIEW | HTML PAGE PREVIEW

Information

Hey guys! Oh boy have I had this one on my mental to-do list for ages. I'm super hype to have it made and ready to use! This bio code mimics various Wikia sites and their formatting; the thing I love most about using Wikia as a base, other than being able to fill in an extremely robust bio, is that no matter what colors, images, fonts, or sections you have it's still going to feel like a Wikia entry. So go nuts; have fun!

This code comes in two forms: In-entry and HTML page. The HTML page has a few extra bells and whistles that you just can't get with an in-entry code, but if you don't have a paid account, don't want to host off-site, or just prefer having it in an entry, I've got you covered!

Each section is inside of a details tag, so you can expand and collapse at your preference, and easily choose which sections are expanded by default. Enjoy! ♥

Coding: In-Entry

<lj-raw><div id="container" style="width:70%;max-width:1000px;min-width:600px;margin:0 auto;padding:35px 35px 25px 35px;background:#fff;border:1px solid rgba(0,0,0,0.1);font-family:helvetica,arial,sans-serif;font-size:14px;color:#111;line-height:160%;">

<div class="side-sub" style="background:#000;text-align:center;color:#fff;font-weight:bold;">General Information</div><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);display:flex;flex-wrap:wrap;">

<b style="display:block;width:45%;">Real Name</b>
	<div style="width:55%;">Realname</div>

<b style="display:block;width:45%;">Current Alias</b>
	<div style="width:55%;">Currentalias</div>

<b style="display:block;width:45%;">Marital Status</b>
	<div style="width:55%;">Maritalstatus</div>

<b style="display:block;width:45%;">Status</b>
	<div style="width:55%;">Lifestatus</div>

</div>

<div class="side-sub" style="background:#000;text-align:center;color:#fff;font-weight:bold;">Characteristics</div><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);display:flex;flex-wrap:wrap;">

<b style="display:block;width:45%;">Gender</b>
	<div style="width:55%;">Gender</div>

<b style="display:block;width:45%;">Height</b>
	<div style="width:55%;">0'00"</div>

<b style="display:block;width:45%;">Weight</b>
	<div style="width:55%;">000lbs</div>

<b style="display:block;width:45%;">Eyes</b>
	<div style="width:55%;">Eyecolor</div>

<b style="display:block;width:45%;">Hair</b>
	<div style="width:55%;">Haircolor</div>

<b style="display:block;width:45%;">Unusual Features</b>
<div style="width:55%;">
	Feature<br>
	Feature<br>
	Feature<br>
</div>

</div><details><summary class="side-sub" style="background:#000;text-align:center;color:#fff;font-weight:bold;cursor:pointer;">Extended Information</summary><div style="padding:10px;border:1px solid rgba(0,0,0,0.1);display:flex;flex-wrap:wrap;">

<b style="display:block;width:45%;">Alias(es)</b>
<div style="width:55%;margin-bottom:10px;">
	Aliasname<br>
	Aliasname<br>
	Aliasname<br>
</div>

<b style="display:block;width:45%;">Affiliations</b>
<div style="width:55%;margin-bottom:10px;">
	Group<br>
	Group<br>
	Group<br>
</div>

<b style="display:block;width:45%;">Relatives</b>
<div style="width:55%;margin-bottom:10px;">
	Relativename<br>
	Relativename<br>
	Relativename<br>
</div>

<b style="display:block;width:45%;">Education</b>
<div style="width:55%;margin-bottom:10px;">
	School<br>
	School<br>
	School<br>
</div>

<b style="display:block;width:45%;">Occupation</b>
<div style="width:55%;">
	Job<br>
	Job<br>
	Job<br>
</div>

</div></details>
</div>

<div id="quote" style="margin:0 6%;">
	<i>"Quote here."</i><br>—Name Here
</div><br>

General summary here.<br><br>

<details open="open"><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">Appearance</summary>

Appearance info here.

</details><br>

<details open="open"><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">Personality</summary>

Personality info here.

</details><br>

<blockquote><h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Ability Type</h3>
	Ability info here<br><br>

<h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Ability Type</h3>
	Ability info here<br><br>

<h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Ability Type</h3>
	Ability info here

</blockquote></details><br>

<details><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">Friends & Alliances</summary>

<ul style="list-style:square;">
	<li><b><a href="" style="color:#000;text-decoration:none;">Friendname</a></b> Info here
	<li><b><a href="" style="color:#000;text-decoration:none;">Friendname</a></b> Info here
	<li><b><a href="" style="color:#000;text-decoration:none;">Friendname</a></b> Info here
</ul></details><br>

<details><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">Enemies & Rivals</summary>

<ul style="list-style:square;">
	<li><b><a href="" style="color:#000;text-decoration:none;">Enemyname</a></b> Info here
	<li><b><a href="" style="color:#000;text-decoration:none;">Enemyname</a></b> Info here
	<li><b><a href="" style="color:#000;text-decoration:none;">Enemyname</a></b> Info here
</ul></details><br>

<details><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">History</summary>
	History info here

<blockquote><h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Origin</h3>
	History info here<br><br>

<h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Arc Name</h3>
	History info here<br><br>

<h3 style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;">Arc Name</h3>
	History info here

</blockquote></details><br>

<details open="open"><summary style="border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;color:#000;font-weight:bold;cursor:pointer;">Gallery</summary><div style="-webkit-column-count:3;-webkit-column-gap:15px;-moz-column-count:3;-moz-column-gap:15px;column-count:3;column-gap:15px;">

</div></details>

<div style="margin-top:20px;font-size:11px;text-align:center;letter-spacing:1px;">
	<b>Name</b> Name
	<b>Age</b> 00
	<b>Timezone</b> TZ
	<b>PB</b> PB Name
	<b>Code</b> <a href="http://tessisamess.insanejournal.com/" style="color:#000;text-decoration:none;">Tessisamess</a>
</div>

</div></lj-raw>

Coding: HTML Page

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Name Here</title>
	<link rel="shortcut icon" href="ICOURL" type="image/ico" />
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>

/*-- WIKIA BIO - TESSISAMESS - 2017 --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* GENERAL */

::selection{background:#ddd;}
::-moz-selection{background:#ddd;}

body{margin:0;padding:0;background:#ddd url(http://i.imgur.com/mxTuE0o.jpg)center fixed repeat;font-family:Open Sans,helvetica,arial,sans-serif;font-size:14px;color:#111;}

a{font-weight:bold;color:#000;text-decoration:none;}
a:hover{opacity:0.5;}

h1,h2,h3{color:#000;}
ul{list-style:square;}

details summary{cursor:pointer;}
details summary:focus{outline:none;}

/* WHOLE CONTAINER */

#container{width:70%;max-width:1000px;min-width:600px;margin:50px auto 0 auto;padding:35px 35px 25px 35px;background:#fff;border:1px solid rgba(0,0,0,0.1);line-height:160%;position:relative;}
#container h1{border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 10px 0;margin:0 0 20px 0;font-size:34px;}
#container h3{border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;}

/* OOC INFO POPUP */

#info{position:absolute;top:20px;right:20px;display:flex;align-items:flex-start;}
#info:hover #info-inner{display:block;}
#info img{width:32px;height:32px;}
#info-inner{display:none;width:120px;padding:10px;font-size:11px;background:#fff;border:1px solid rgba(0,0,0,0.1);line-height:140%;margin-right:10px;margin-top:-30px;border-radius:4px;box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3);}
#info-inner h3{padding:0;margin:0 0 2px 0;font-size:13px;}

/* SIDEBAR */

#sidebar{float:right;width:300px;background:#eee;margin-left:20px;}
#sidebar img{width:100%;}
#side-title{background:#000;text-align:center;color:#fff;font-weight:bold;font-size:20px;padding:3px 0;}
.side-sub{background:#000;text-align:center;color:#fff;font-weight:bold;}
.side-inner{padding:10px;border:1px solid rgba(0,0,0,0.1);display:flex;flex-wrap:wrap;}
.left{display:block;width:45%;}
.right{width:55%;}
.extended .right{margin-bottom:10px;}
.extended .right:last-of-type{margin-bottom:0;}

/* MAIN CONTENT */

#quote{margin:0 6%;}
.section-head{border-bottom:1px solid rgba(0,0,0,0.1);padding:0 0 2px 0;margin:0 0 10px 0;font-size:20px;font-weight:bold;cursor:pointer;}

.section-head::-webkit-details-marker{display:none;}
.section-head:after{content:'[+]';float:left;padding-right:10px;font-weight:normal;font-size:13px;margin-top:-2px;}
details[open] .section-head:after{content:'[–]';}

/* CONTENT GALLERY */

#gallery{-webkit-column-count:3;-webkit-column-gap:15px;-moz-column-count:3;-moz-column-gap:15px;column-count:3;column-gap:15px;}
.gal-itm{width:95%!important;margin-bottom:5px;padding:2%;border:1px solid rgba(0,0,0,0.1);-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;display:inline-block;}
#gallery img{width:100%;}

/* CREDIT - LEAVE THIS */

#cred{display:block;margin:10px auto 50px auto;font-size:12px;letter-spacing:2px;text-align:center;}

</style>

</head>

<body>

<div id="info">
	<div id="info-inner">
		<h3>Player Info</h3>
		<b>Name</b> Name<br>
		<b>Age</b> 00<br>
		<b>Timezone</b> TZ<br>
		<b>PB</b> PB Name<br>
	</div>
	<img src="https://i.imgur.com/16AkA0K.png">
	</div>

<div class="side-sub">General Information</div>
<div class="side-inner">

<b class="left">Real Name</b>
	<div class="right">Realname</div>

<b class="left">Current Alias</b>
	<div class="right">Currentalias</div>

<b class="left">Marital Status</b>
	<div class="right">Maritalstatus</div>

<b class="left">Status</b>
	<div class="right">Lifestatus</div>

</div>

<div class="side-sub">Characteristics</div>
<div class="side-inner">

<b class="left">Gender</b>
	<div class="right">Gender here</div>

<b class="left">Height</b>
	<div class="right">0'0"</div>

<b class="left">Weight</b>
	<div class="right">000lbs</div>

<b class="left">Eyes</b>
	<div class="right">Eyecolor</div>

<b class="left">Hair</b>
	<div class="right">Haircolor</div>

<b class="left">Unusual Features</b>
	<div class="right">
	Feature<br>
	Feature<br>
	Feature<br>
	</div>

</div>

<details class="extended">
<summary class="side-sub">Extended Information</summary>
<div class="side-inner">

<b class="left">Alias(es)</b>
	<div class="right">
	Aliasname<br>
	Aliasname<br>
	Aliasname<br>
	</div>

<b class="left">Affiliations</b>
	<div class="right">
	Group<br>
	Group<br>
	Group<br>
	</div>

<b class="left">Relatives</b>
	<div class="right">
	Relativename<br>
	Relativename<br>
	Relativename<br>
	</div>

<b class="left">Education</b>
	<div class="right">
	School<br>
	School<br>
	School<br>
	</div>

<b class="left">Occupations</b>
	<div class="right">
	Job<br>
	Job<br>
	Job<br>
	</div>

</div></details>

</aside>

<div id="quote">
	<i>"Quote here."</i><br>
	—Name Here
</div><br>

General summary here.<br><br>

<details open="open"><summary class="section-head">Appearance</summary>

Appearance info here.

</details><br>

<details open="open"><summary class="section-head">Personality</summary>

Personality info here.

</details><br>

<details open="open"><summary class="section-head">Powers & Abilities</summary>

Abilities info here

<blockquote>
	<h3>Ability Type</h3>
	Ability info here<br><br>

<h3>Ability Type</h3>
	Ability info here<br><br>

<h3>Ability Type</h3>
	Ability info here
</blockquote>

</details><br>

<details><summary class="section-head">Friends & Alliances</summary>
<ul>
	<li><a href="">Friendname</a> Info here
	<li><a href="">Friendname</a> Info here
	<li><a href="">Friendname</a> Info here
</ul>
</details><br>

<details><summary class="section-head">Enemies & Rivals</summary>
<ul>
	<li><a href="">Enemyname</a> Info here
	<li><a href="">Enemyname</a> Info here
	<li><a href="">Enemyname</a> Info here
</ul>
</details><br>

<details><summary class="section-head">History</summary>

History info here

<blockquote>
	<h3>Origin</h3>
	History info here<br><br>

<h3>Arc Name</h3>
	History info here<br><br>

<h3>Arc Name</h3>
	History info here
</blockquote>

</details><br>

<details open="open"><summary class="section-head">Gallery</summary>
<div id="gallery">

</div>
</details>

</article>

<a href="http://tessisamess.insanejournal.com/" id="cred">CODED WITH {&hearts;} BY TESSISAMESS</a>

</body>
</html>

Installation Guide

Paste into an entry and fill in the following!

Name Here - Your name titles (multiple; use replace all)

SIDEIMG - Sidebar image
Realname through Lifestatus - General information
Gender through Feature - Characteristics
Aliasname through Job - Extended information

Bulk sections should be pretty easy to locate and edit so I won't list them here because it's a long list lol, but let me know if you're having issues finding something!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

helvetica,arial,sans-serif - Entry code
Open Sans,helvetica,arial,sans-serif - HTML page

IMAGES

ICOURL - Tab icon (HTML)
http://i.imgur.com/mxTuE0o.jpg - Page background (HTML)
https://i.imgur.com/16AkA0K.png - OOC info icon (HTML)

COLORS

#fff - Container background, info popup background (HTML), sidebar titles
#eee - Sidebar background
#ddd - Selection background (HTML), body background (HTML)
#111 - Overall text
#000 - Links, headers, sidebar header backgrounds (change this for a bolder accent color)
0,0,0 - All borders (semi-transparent rgba value)

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: biosheet, html page

Profile

Title Here

Navigation

March 2025

Links List

Resources

Tags

Layout By

Biosheet: Wikia

Information

Coding: In-Entry

Coding: HTML Page

Installation Guide

Editing Guide

Terms of Use

Comments