Tessisamess: Layouts, Codes, & Resources

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

CHARACTER NAME

A SUBTITLE LINE, LYRICS, OR QUOTE

ABOUT PERSONALITY

VISUALS SOUNDTRACK RELATIONSHIPS

HISTORY

THE BASICS

NAME Name
AGE 00
BIRTHDAY Month, 00
GENDER M/F/Etc.
SEXUALITY Orientation
CURRENTLY IN Location

HEIGHT 0'00"
BUILD Body Type
HAIR Color
EYES Color
FEATURES Distinguishing marks

HOMETOWN Location
MOTHER Name
FATHER Name
SIBLING Name
SIBLING Name

ABOUT NAME

Donec nec nisi vulputate, fermentum ligula molestie, pulvinar quam. Pellentesque non neque ac dolor ultricies iaculis. Donec scelerisque consequat blandit. Curabitur sed est est. Nam vel lorem sed neque rutrum pulvinar non sed leo. Phasellus vitae neque vel erat efficitur volutpat vitae vel neque. In rhoncus consectetur purus et egestas. Nullam est neque, euismod vel nisi eget, tempus hendrerit purus.

Proin scelerisque elementum posuere. Aenean ultrices erat mauris, eget malesuada turpis feugiat eget. Proin posuere eu leo vel ultricies. Fusce sit amet nulla dolor. Phasellus nec vestibulum neque. Etiam lobortis odio ac orci feugiat, quis rhoncus ipsum egestas. Integer ac nisi ligula. Nullam porta nunc ac ante vulputate, eu condimentum orci sodales.

FIRST IMPRESSION

APPEARANCE

THE ROLE

ABCD-E

PERSONALITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis tortor nunc. Nulla lacinia tempus metus, vitae faucibus tortor feugiat eget. Morbi lacinia orci in pretium bibendum. Mauris at ante non purus feugiat condimentum.

Nam pharetra nulla sapien, vitae maximus dui semper a. Praesent placerat vel tellus vel tempus. Quisque gravida, justo vel molestie hendrerit, velit dui consectetur risus, nec ornare turpis leo at metus. Aliquam at egestas justo. Nam vestibulum ante ac nulla accumsan tempus.

In eget sem orci. Ut leo lorem, dapibus venenatis lorem vel, maximus pulvinar justo. Duis hendrerit lacus in urna venenatis, et pellentesque tortor interdum. Suspendisse risus arcu, laoreet sit amet neque ut, venenatis venenatis leo. Mauris rhoncus nulla pellentesque ullamcorper consequat. Pellentesque efficitur sed magna convallis tincidunt.

Mauris purus odio, vestibulum non orci et, fermentum fermentum nisi. Suspendisse eu pellentesque lorem. Nam sed mauris sem. Nulla diam metus, lacinia ut orci quis, vulputate tempor diam.

VISUALS

SOUNDTRACK

♫ SONGTITLE SONGARTIST

SONGLYRICS

♫ SONGTITLE SONGARTIST

SONGLYRICS

♫ SONGTITLE SONGARTIST

SONGLYRICS

♫ SONGTITLE SONGARTIST

SONGLYRICS

RELATIONSHIPS

NAME HERE

Etiam suscipit, quam quis bibendum rhoncus, lectus orci iaculis magna, eu mollis massa.

NAME HERE

Etiam suscipit, quam quis bibendum rhoncus, lectus orci iaculis magna, eu mollis massa.

NAME HERE

Etiam suscipit, quam quis bibendum rhoncus, lectus orci iaculis magna, eu mollis massa.

NAME HERE

Etiam suscipit, quam quis bibendum rhoncus, lectus orci iaculis magna, eu mollis massa.

HISTORY

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis tortor nunc. Nulla lacinia tempus metus, vitae faucibus tortor feugiat eget. Morbi lacinia orci in pretium bibendum. Mauris at ante non purus feugiat condimentum. Nam pharetra nulla sapien, vitae maximus dui semper a. Praesent placerat vel tellus vel tempus. Quisque gravida, justo vel molestie hendrerit, velit dui consectetur risus, nec ornare turpis leo at metus. Aliquam at egestas justo. Nam vestibulum ante ac nulla accumsan tempus.

Donec nec nisi vulputate, fermentum ligula molestie, pulvinar quam. Pellentesque non neque ac dolor ultricies iaculis. Donec scelerisque consequat blandit. Curabitur sed est est. Nam vel lorem sed neque rutrum pulvinar non sed leo. Phasellus vitae neque vel erat efficitur volutpat vitae vel neque. In rhoncus consectetur purus et egestas. Nullam est neque, euismod vel nisi eget, tempus hendrerit purus.

Proin scelerisque elementum posuere. Aenean ultrices erat mauris, eget malesuada turpis feugiat eget. Proin posuere eu leo vel ultricies. Fusce sit amet nulla dolor. Phasellus nec vestibulum neque. Etiam lobortis odio ac orci feugiat, quis rhoncus ipsum egestas. Integer ac nisi ligula. Nullam porta nunc ac ante vulputate, eu condimentum orci sodales.

Aenean et efficitur velit. Fusce id ex leo. Nulla hendrerit libero vel interdum sodales. Suspendisse potenti. Fusce condimentum vulputate ex, eu pulvinar massa gravida vitae. Mauris volutpat consequat libero, blandit interdum augue vestibulum vitae. Quisque quis tortor ac sem pulvinar ullamcorper. Donec lobortis metus a consectetur porta. Suspendisse vitae laoreet tellus, ut aliquet lorem. Etiam nec varius justo.

THIS IS A FEATURED QUOTE AREA THAT STANDS OUT.

In eget sem orci. Ut leo lorem, dapibus venenatis lorem vel, maximus pulvinar justo. Duis hendrerit lacus in urna venenatis, et pellentesque tortor interdum. Suspendisse risus arcu, laoreet sit amet neque ut, venenatis venenatis leo. Mauris rhoncus nulla pellentesque ullamcorper consequat. Pellentesque efficitur sed magna convallis tincidunt. Mauris purus odio, vestibulum non orci et, fermentum fermentum nisi. Suspendisse eu pellentesque lorem. Nam sed mauris sem. Nulla diam metus, lacinia ut orci quis, vulputate tempor diam.

Aliquam erat volutpat. Curabitur sodales eu lectus tempor fringilla. In vitae hendrerit est. Cras in felis et massa convallis egestas nec ut nulla. Aenean sit amet sodales tortor, feugiat pretium risus. Donec faucibus vel magna ut elementum. Aliquam erat volutpat. Nulla lectus urna, venenatis et neque a, fringilla blandit elit. Vestibulum eros lectus, pharetra nec vestibulum vel, volutpat et erat. Phasellus mauris augue, rhoncus sit amet molestie in, blandit non neque. Cras dapibus aliquet molestie. Morbi sit amet massa eget odio lacinia mollis non varius lacus.

ABILITIES & SKILLS

SKILLTYPE

Skill Info

SKILLTYPE

Skill Info

SKILLTYPE

Skill Info

SKILLTYPE

Skill Info

←

NAME // AGE // TZ // PB NAME // CODE

Information

Hey guys! I'M COLD & GETTING SICK LET'S KEEP THIS SHORT. 😭 I've been dying to make a fun moodboard-feeling bio for ages, and now I finally have one up! Make sure to read through for extra instructions, and enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;width:800px;background:#fff;padding:10px;border:1px solid rgba(0,0,0,0.1);font-family:century gothic,arial,sans-serif;font-size:14px;color:#333;line-height:1.6;">

<div style="height:200px;background:#bbb url(HEADERBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:25px;letter-spacing:5px;color:#fff;text-transform:uppercase;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,0.9);"><div>

<b>CHARACTER</b> NAME
<div style="font-size:10px;letter-spacing:8px;">
SUBTITLE
</div>

</div></div>

<div style="height:660px;overflow:hidden;">
<a name="home"></a><div style="display:flex;justify-content:space-between;font-size:22px;font-weight:bold;letter-spacing:3px;text-transform:uppercase;text-shadow:1px 1px 1px rgba(0,0,0,0.9);">

<div style="width:250px;">
<a href="#1" style="text-decoration:none;display:block;background:#bbb url(ABOUTBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:320px;color:#fff;">
ABOUT
</a>

<a href="#2" style="text-decoration:none;display:block;background:#bbb url(PERSONALITYBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:320px;color:#fff;">
PERSONALITY
</a>
</div>

<div style="width:320px;">
<a href="#3" style="text-decoration:none;display:block;background:#bbb url(VISUALSBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:210px;color:#fff;">
VISUALS
</a>

<a href="#4" style="text-decoration:none;display:block;background:#bbb url(SOUNDTRACKBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:210px;color:#fff;">
SOUNDTRACK
</a>

<a href="#5" style="text-decoration:none;display:block;background:#bbb url(RELATIONSHIPSBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:210px;color:#fff;">
RELATIONSHIPS
</a>
</div>

<div style="width:210px;">
<a href="#6" style="text-decoration:none;display:block;background:#bbb url(HISTORYBG)center;background-size:cover;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:650px;color:#fff;">
HISTORY
</a>
</div>

</div>

<a name="1"></a><div style="height:620px;overflow:auto;padding:20px;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
THE BASICS
</div>

<b>NAME</b> Name<br>
<b>AGE</b> 00<br>
<b>BIRTHDAY</b> Month, 00<br>
<b>GENDER</b> M/F/Etc.<br>
<b>SEXUALITY</b> Orientation<br>
<b>CURRENTLY IN</b> Location<br><br>

<b>HEIGHT</b> 0'00"<br>
<b>BUILD</b> Body Type<br>
<b>HAIR</b> Color<br>
<b>EYES</b> Color<br>
<b>FEATURES</b> Distinguishing marks<br><br>

<b>HOMETOWN</b> Location<br>
<b>MOTHER</b> Name<br>
<b>FATHER</b> Name<br>
<b>SIBLING</b> Name<br>
<b>SIBLING</b> Name<br><br>

</div>

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
ABOUT NAME
</div>
ABOUTINFO<br><br>

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
FIRST IMPRESSION
</div>
FIRSTIMPRESSIONINFO<br><br>

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
APPEARANCE
</div>
APPEARANCEINFO<br><br>

</div>

<a name="2"></a><div style="height:620px;overflow:auto;padding:20px;">

PERSONALITYTYPEINFO

</div>

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
PERSONALITY
</div>

PERSONALITYINFO

</div>

<a name="3"></a><div style="height:620px;overflow:auto;padding:20px;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
VISUALS
</div>

</div>

<a name="4"></a><div style="height:620px;overflow:auto;padding:20px;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
SOUNDTRACK
</div>

<span style="font-size:16px;letter-spacing:3px;text-transform:uppercase;">
	&#9835; <a href="SONGURL" style="text-decoration:none;font-weight:bold;color:#960000;">
	SONGTITLE</a>
	SONGARTIST
</span>
	<blockquote style="margin:10px 10px 20px 10px;padding:20px;border:1px solid rgba(0,0,0,0.1);text-align:center;"><i>SONGLYRICS</i></blockquote>

</div>

<a name="5"></a><div style="height:620px;overflow:auto;padding:20px;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
RELATIONSHIPS
</div>

<div style="display:flex;align-items:center;margin-bottom:20px;">
<img src="ICONURL" style="margin-right:20px;padding:10px;border:1px solid rgba(0,0,0,0.1);width:80px;height:80px;">
<div>
<div style="font-size:18px;letter-spacing:3px;text-transform:uppercase;"><b style="color:#960000;">NAME</b> HERE</div>
RELATIONSHIPINFO
</div>
</div>

</div>

<a name="6"></a><div style="height:620px;overflow:auto;padding:20px;text-align:justify;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
HISTORY
</div>

HISTORYINFO use the four codes below for left and right inset images and left and right inset quotes! These can be placed anywhere in your history text to break up your info.

<div style="width:200px;float:left;margin-right:10px;padding:10px;font-size:20px;letter-spacing:3px;text-transform:uppercase;text-align:center;">
LEFT <b style="color:#960000;">QUOTE</b>.</div>

<div style="width:200px;float:right;margin-left:10px;padding:10px;font-size:20px;letter-spacing:3px;text-transform:uppercase;text-align:center;">
RIGHT <b style="color:#960000;">QUOTE</b>.</div>

</div>

<a name="7"></a><div style="height:620px;overflow:auto;padding:20px;">

<div style="font-size:22px;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;">
ABILITIES & SKILLS
</div>

<div style="font-size:16px;letter-spacing:3px;text-transform:uppercase;font-weight:bold;">
	SKILLTYPE
</div>
	<blockquote style="margin:10px 10px 20px 10px;padding:20px;border:1px solid rgba(0,0,0,0.1);">Skill Info</blockquote>

</div>

<div style="height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:9px;letter-spacing:4px;font-weight:bold;text-transform:uppercase;">

</div></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

NAV BACKGROUND IMAGES

HEADERBG - Header image; visible on every page
ABOUTBG - About
PERSONALITYBG - Personality
VISUALSBG - Visuals
SOUNDTRACKBG - Soundtrack
RELATIONSHIPSBG - Relationships
HISTORYBG - History

ABOUT

ABOUTPIC1 through ABOUTPIC3 - About sidebar images

PERSONALITY

PERSONALITYPIC - Personality sidebar image
THE ROLE and ABCD-E - Personality sidebar title and subtitle

VISUALS

Copy/paste each img to duplicate.

SOUNDTRACK

Copy/paste each block to duplicate. These blocks contain link URLs!

RELATIONSHIPS

Copy/paste each block to duplicate. These blocks contain icon URLs!

HISTORY

Has instructions in-page.

Editing Guide

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

HIDDEN ABILITIES & SKILLS SECTION

This code comes with an abilities & skills section that you can swap any of the existing pages for! If, for example, you don't need the soundtrack page you could delete it and change the abilities page anchor from a name="7" to a name="4" to switch them!

FONTS

century gothic,arial,sans-serif - Overall font

COLORS

#fff Container background; header and nav text

#960000 Accent text color

#333 Overall text

0,0,0 All borders; text shadow in header and nav

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

Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Need an invite?

Navigation

Please Note:

Tags

Layout By

Profile

Hey there, I'm Tess!

Need an invite?

Navigation

December 2019

Please Note:

Tags

Layout By

Biosheet: Moody

Information

The Coding

Installation Guide

Editing Guide

Terms of Use

Comments