efryndiel | [ code ] profile / information sheet (Reply)

profile sheet

AGE:

GENDER:

HEIGHT:

RACE:

PLAYER:

USERNAME

ACTIVE:

game, MEMES

CHARACTER NAME

CANON

ABOUT

CANON POINT: All of these fields are optional, so can add, remove, and edit however you want!
VISUAL: Here is a formatted link you can have so it's not the default link color. Oooh aaah.
BUILD: The "About" page has full character details and history bio at the bottom
HAIR: The whole layout will dynamically resize for smaller screens, and can work as a splash page.
EYES: Navigation is at the bottom, add and remove link buttons as needed. They're all just templates.
FEATURES:
ATTIRE:
WEAPONS:
VOICE:

ORIGINS:
FAMILY:
RELATIONSHIPS:
OCCUPATION:

HISTORY: Whatever blurb you want. Maybe you want to use some cut text to save space?

Have a cut tag.

And now you can dump your spoilers.

EXTRA SECTION: BLURB BLURB

PERSONALITY

ALIGNMENT: This is all just a bunch of random characterization stuff
ATTITUDE:
VIRTUES:
VICES:
QUIRKS:
LIKES:
DISLIKES:
HOBBIES:

FIRST IMPRESSIONS: BLURB BLURB

MOTIVATIONS: BLURB BLURB

FLAWS: BLURB BLURB

EXTRA: BLURB BLURB

ABILITIES

CLASS:
WEAPONS:
INVENTORY:
STRENGTH: Really getting D&D here—
DEXTERITY:
CONSTITUTION:
INTELLIGENCE:
WISDOM:
CHARISMA:

SKILLS: BLURB BLURB

EXTRA SECTION: BLURB BLURB

PERMISSIONS

BACKTAGGING: Replace and add whatever you need!
THREADHOPPING:
FOURTHWALLING:
ROMANCE:
MINDREADING:
MANIPULATION:
FIGHTING:
INJURY:
KILLING:

Feel free to contact for more information and plotting!

PREFERENCES

MEMES: Or turn this into a kink list. Or add a kink list section.
PSLS:
AUS:
CONTENT:
DO NOT WANT:
SHIPPING:
DYNAMICS:
MAIN PAIRINGS:
TAG STYLE:
TAG SPEED:

EXTRA

FIELD: This is just a preformatted extra section that you can use however you wish. Could be for a kink list, some game info, character's inventory, whatever you want! Just make sure to change the a name="extra" to match the link in the navigation.
FIELD:
FIELD:
FIELD:
FIELD:

FIELD:

<raw-code><div style="margin: 25px auto; max-width: 800px; min-width: 465px; display: flex; flex-wrap: wrap; justify-content: center; font-family: trebuchet ms, sans-serif;  font-size: 12px;">

<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>AGE:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>GENDER:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>HEIGHT:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>RACE:</b> </div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>PLAYER:</b> <user name="USERNAME" site="plurk.com"></div>
<div style="background: #ebe6da; border-left: 5px solid #3e2f22; padding: 2px 5px;"><b>ACTIVE:</b> <user name="GAME">, MEMES</div>
</div>

<div style="margin-left: 20px; width: calc(100% - 220px); display: flex; flex-flow: column wrap; text-align: justify;">

<div style="max-width: 500px; height: 40px; clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%); background: #5a1915; height: 40px; font-family: baskerville, serif; font-size: 18px; color: #e5e0c8; line-height: 2.2; text-transform: uppercase; text-align: center;">CHARACTER NAME</div>
<div style="max-width: 400px; height: 20px; clip-path: polygon(0% 0%, 100% 0, 95% 50%, 100% 100%, 0% 100%); background: #f4e5c1; font-family: baskerville, serif; font-size: 14px; color: #3e2f22; line-height: 1.6; text-transform: uppercase; text-align: center;">CANON</div>

<div style="margin-top: 10px; width: 100%; height: 450px; overflow: hidden; background: #f9f7f4; background: url(https://i.imgur.com/WrZOEpW.jpg); background-size: cover; border: 1px solid #3e2f22;">

<a name="about" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">ABOUT</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VISUAL:</b> <a href="URL" style="text-decoration: none; color: #5a1915;">LINK</a>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">BUILD:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">FEATURES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">ATTIRE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">WEAPONS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; padding: 2px 5px;">VOICE:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ORIGINS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FAMILY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">RELATIONSHIPS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">OCCUPATION:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">HISTORY:</b> BLUR BLURB 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA SECTION:</b> BLURB BLURB
</div>
</div>

<a name="personality" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PERSONALITY</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ATTITUDE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VIRTUES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">VICES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">QUIRKS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">LIKES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DISLIKES:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">HOBBIES:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIRST IMPRESSIONS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MOTIVATIONS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FLAWS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA:</b> BLURB BLURB
</div>
</div>

<a name="abilities" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">ABILITIES</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">WEAPONS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INVENTORY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">STRENGTH:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DEXTERITY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CONSTITUTION:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INTELLIGENCE:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">WISDOM:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CHARISMA:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">SKILLS:</b> BLURB BLURB
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">EXTRA SECTION:</b> BLURB BLURB
<br /><br />

</div>
</div>

<a name="permissions" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PERMISSIONS</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">THREADHOPPING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FOURTHWALLING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">ROMANCE:</b>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MINDREADING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MANIPULATION:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIGHTING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">INJURY:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">KILLING:</b> 
<br /><br />

Feel free to contact for more information and plotting!
</div>
</div>

<a name="prefs" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">PREFERENCES</div>

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">CONTENT:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">SHIPPING:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">DYNAMICS:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">MAIN PAIRINGS:</b>
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">TAG STYLE:</b> 
<br />

<b style="display: inline-block;margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">TAG SPEED:</b> 
</div>
</div>

<a name="extra" style="height: 0; font-size: 0px;"></a>
<div style="height: 100%; padding: 5px 10px 10px;"><div style="height: 30px; font-family: palatino, serif; font-size: 18px; line-height: 1.4; border-bottom: 1px solid #3e2f22; text-align: center; text-shadow: 1px 1px 6px #807b69;">EXTRA</div>

<div style="margin-top: 10px; height: calc(100% - 45px); overflow: auto; padding: 10px; box-sizing: border-box; scrollbar-color: #4e4339 #bea792;">
<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> This is just a preformatted extra section that you can use however you wish. Could be for a kink list, some game info, character's inventory, whatever you want! Just make sure to change the <b>a name="extra"</b> to match the link in the navigation.
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
<br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
<br /><br />

<b style="display: inline-block; margin-top: 5px; border-left: 5px solid #3e2f22; line-height: 1.5; padding: 2px 5px;">FIELD:</b> 
</div>
</div>

</div>

<div style="min-width: 200px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10px; ">

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#about" style="text-decoration: none; color: #f4e5c1;">about</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#personality" style="text-decoration: none; color: #f4e5c1;">personality</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#abilities" style="text-decoration: none; color: #f4e5c1;">abilities</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#permissions" style="text-decoration: none; color: #f4e5c1;">permissions</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#prefs" style="text-decoration: none; color: #f4e5c1;">prefs</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #3e2f22; line-height: 1.5; text-transform: uppercase; text-align: center; padding: 2px 15px; box-sizing: border-box;"><a href="#extra" style="text-decoration: none; color: #f4e5c1;">extra</a></div>

</div>

<div style="min-width: 200px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 10px; text-transform: uppercase; text-align: center; ">
<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #f4e5c1; line-height: 1.5; padding: 2px 15px; box-sizing: border-box;"><a href="URL" style="text-decoration: none; color: #3e2f22;">inbox</a></div>

<div style="height: 20px; clip-path: polygon(0 15%, 5% 15%, 5% 0, 95% 0, 95% 15%, 100% 15%, 100% 85%, 95% 85%, 95% 100%, 5% 100%, 5% 85%, 0 85%); background: #f4e5c1; line-height: 1.5; padding: 2px 15px; box-sizing: border-box;"><a href="https://efryndiel.dreamwidth.org/10342.html" style="text-decoration: none; color: #3e2f22;">code</a></div>

</div>

</div>
</div></raw-code>

raw code instructions
Just copy and paste the code from the textarea box above and edit as you see fit! You can see a live example with colors changed and info filled as a here and as a normal entry here.

» The colors used in both are:

#3e2f22: canon ribbon text, borders, field side borders, top row link button background, and bottom row link text
#ebe6da: left field background (age, gender, height, etc)
#5a1915: character name ribbon background, content link text color, details cut color
#e5e0c8: character name ribbon text
#f4e5c1: canon ribbon background, top row link button text, bottom row link button background
#f9f7f4: section background color if not using an image background
#807b69: text shadow
#4e4339 #bea792: scroll bar (firefox only)

» Fonts used are:

trebuchet ms, sans-serif: default text, size 12px
baskerville, serif: character and canon ribbon text
palatino, serif: section header

» The background image for the image and info box is background: url(https://i.imgur.com/XpxvuAQ.jpg).
» The side image will automatically resize and fit anything that's put into it, but optimal dimensions are 190x300.
» This is a giant template, but you can add, edit, and remove whatever you don't need.
» Because this uses <raw-code>, you will need to use <br /> tags for line breaks. One tag for a single space, two for double space.
» To add more "pages" use the code between "SECTION: EXTRA SECTION" and "END OF EXTRA SECTION". Make sure to change the <a name="extra"> text to match the link for the bottom navigation. You can leave a blank section in the code to save for later and it won't show up.
» To add new navigation buttons, use the code between "NAVIGATION BUTTON" and "NAVIGATION BUTTON" for either top or bottom row. For the top row it's on the Extra link and on the bottom row it's on the Code link. Just a note that if you have a lot of buttons, it'll automatically start a new line.
» To use as a splash page, I used the Kida layout from

pagans with a small change to the #canvas width to 100% so that it would fit properly.

The credit code is included as one of the link buttons, but any credit goes to

laenavesse @

efryndiel. Although not necessary, I do accept tips on ko-fi! I can script this, but it would work a lot differently from my trackers and charts. I still do script commissions as well.

[ code ] profile / information sheet

Post a comment in response: