ONE TWO THREE FOUR DAY BY DAY. - — character info; ending page

Previous | Memories | Tell Someone | Next

08 December 2018 @ 04:10 pm

— character info; ending page

𝑒𝓃𝒹𝒾𝓃𝑔 𝓅𝒶𝑔𝑒;
an info page with hidden divs.
permissions | personality

A comprehensive info page which uses hidden divs to keep everything compact.
Note: to prevent the textarea code from breaking, the </textarea> tag in the permissions page code has been formatted using square brackets. Please change these back to < and > when using!

For easy CTRL+F purposes—
headers / #ad4171
links / #e888b0
text / #91888c
div border / #696969

Comments are loved, and credit to

isanghae if you use.

CODE:

<raw-code><center><div style="height: 462px; width: 710px; overflow: hidden;">
<a name="basics"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
basics. 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">BASICS. 
<div style="width: 280px; height: 380px; float: left;">NAME: First Name Surname 
CANON: Canon Title 
CANON POINT: Canon Point 
AGE: 000 
GENDER: Gender 
SPECIES: Species 
BIRTH DATE: 00/00/0000 
HOMETOWN: Town, Country 
OCCUPATION: Job 
EDUCATION: Level 
LANGUAGES: Language, Language, Language 
POWERS: Powers </div>
<div style="width: 240px; height: 380px; float: right;">PLAYER: Name 
TIMEZONE: TMZ 
DISCORD: name#0000 
PLURK: <user name="PUSERNAME" site="plurk.com"> 
DREAMWIDTH: <user name="USERNAME">
</div>
</div>

<a name="permissions"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
permissions. 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">PERMISSIONS. 
<div style="width: 260px; height: 180px; float: left;">BACKTAGGING: Y / N 
4TH WALLING: Y / N 
CANON TRIGGERS: Triggers present in your character's tags. 
KISSING: Y / N, notes. 
FIGHTING: Y / N, notes. 
INJURY: Y / N, notes.</div>
<div style="width: 260px; height: 180px; float: right;">THREADJACKING: Y / N 
TRIGGERS: List any here! 
HUGGING: Y / N, notes. 
SEX: Y / N, notes. 
ROMANCE: Y / N, notes. 
POWERS: Y / N, notes. 
DEATH: Y / N, notes.
</div>
Have a permissions form you want filling out? Add it here: 
<textarea style="height: 150px; width: 380px;">a theoretical permissions form goes here[/textarea]</div>

<a name="appearance"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions. 
appearance. 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">APPEARANCE. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>

<a name="personality"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
personality. 
<a href="#history" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">history.</a>
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">PERSONALITY. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>

<a name="history"><div style="width: 100px; height: 430px; border: 1px solid #696969; padding: 15px; float: left;"><img src="ICONURL" /> 
MENU. 
<a href="#basics" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">basics.</a> 
<a href="#permissions" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">permissions.</a> 
<a href="#appearance" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">appearance.</a> 
<a href="#personality" style="font-family: bookman, georgia, serif; font-size: 10pt; text-decoration: none; color: #e888b0;">personality.</a> 
history.
</div>
<div style="width: 540px; height: 430px; border: 1px solid #696969; padding: 15px; float: right; overflow-y: scroll;">HISTORY. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac odio in nunc rutrum blandit dignissim pharetra orci. Aliquam nec sem aliquam, dictum augue aliquet, sagittis erat. Fusce in dapibus turpis, eu tristique erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi cursus lectus sit amet ante varius ultricies. Proin id magna euismod, aliquam quam eget, luctus urna. Vestibulum convallis ac purus eu consectetur. Nulla non nisl mi. Sed et dapibus justo. Nunc efficitur, arcu ac feugiat eleifend, nisi nibh tincidunt mi, sit amet imperdiet lacus diam ac lacus. Nullam arcu tellus, vestibulum sit amet luctus et, cursus a nulla. Curabitur blandit tortor mauris, non sollicitudin dolor viverra eu. Maecenas urna nulla, dictum quis euismod ut, ullamcorper non eros. Maecenas sodales arcu varius congue sollicitudin. Quisque lacus magna, elementum ac magna nec, mattis molestie arcu.
 
Fusce molestie at neque at sollicitudin. Maecenas tempor commodo dui, semper ultrices nisl tristique non. Nullam ornare vulputate condimentum. Nunc pulvinar diam orci, ullamcorper convallis dui semper facilisis. Etiam tempus lacus mi, quis vehicula lorem cursus vel. Vestibulum sit amet congue elit. Nullam sed erat egestas ante pellentesque sagittis. Curabitur ultricies dolor ligula, nec maximus enim laoreet in. Nulla sapien magna, maximus id luctus in, scelerisque id sapien. Maecenas bibendum dictum ipsum, sit amet tincidunt massa pulvinar ultrices. Nulla eget ante nisl.
</div>
</div>
</center></raw-code>

Tags: layout: info page

2 comments | Leave a comment

( Post a new comment )

stoicandsarcastic on January 6th, 2019 01:47 am (UTC)

Really love this code, thanks for creating it! I did run into a couple of snags that weren't a problem to overcome but I thought you'd want to know about:

In the second line you use [img src="ICONURL" /] for the icon, but you don't indicate it in the other four instances so if the user doesn't realize to change the url you have indicated, they're going to end up with your userpic instead of the one they want.

Your "links" color code for CTRL+F finding are only accurate for the first section. You switched to #c4608b in the code for everything after the initial menu attached to the basics page.

But again, really loved this code, it's simple and exactly what I needed! Thank you!

(Reply) (Thread) (Link)

isanghae on January 7th, 2019 12:30 pm (UTC)

Oh gosh, thanks for pointing that out! I think my brain had switched off by the time I was finishing off this code and I completely missed changing that. I'm glad you found what you were looking for, regardless!

(Reply) (Parent) (Link)