Sika's Template 01

From RPC Library
Revision as of 02:07, 7 August 2020 by Sika (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Hi, thanks for your interest in my humble layout. You can check out a live example here.

I tried to annotate the code with enough notes to make the organization clear to those wanting to play with it, but it's still not the best given Wiki limitations. The following source code doesn't exactly work as-is, because I've gone through and replaced anything kind of customizable with a big loud label to show where things can be changed without breaking the layout. I'd recommend using a text editor and find-replacing stuff marked with a '!!!' (or you can ignore it and just copy the code on this page).

show template code >>
<!-- SEARCH FOR AND REPLACE EVERYTHING WITH '!!!' -->

<div align=center style="min-width:900px; margin:0 auto; background-color:!!!BACKGROUND-COLOR; border-top:50px groove; border-bottom:50px ridge; border-radius:3px; border-color:!!!BORDER-COLOR">
<!-- --------- BEGIN ALL THE STUFF ABOVE THE TABS ---------- -->
<div id="wrapper" align=center style="min-width:800px; max-width:80%; display:block; margin-top:30px">
<table id="intro" style="min-width:800px">
<tr>
<!-- pic thing on the left -->
<td id="intro-img" valign="middle" style="width:400px">
[[File:!!!IMAGE-FILENAME|400px]]
</td>
<!-- other things on the right -->
<td id="intro-txt" valign="middle" style="padding-left:30px; width:400px">
<div align=center style="margin-bottom:-30px; font-size:60px; color:!!!DECO-SYMBOL-COLOR">!!!DECO-SYMBOL</div>
<div id="title" align=center style="margin-bottom:-30px; font-family:'palatino linotype'; font-size:40px; color:#!!!CHAR-NAME-COLOR">
!!!CHAR-NAME
</div>
<div id="quote" align=center style="font-size:20px; color:!!!QUOTE-COLOR; font-style:italic">
!!!QUOTE
</div>
<div id="intro-txt" style="background-color:!!!TEXT-BACKGROUND-COLOR; padding: 15px 10px 15px 10px; text-align:left; border-radius:3px">

!!!INTRO-TEXT

<!-- basic info table -->
<table id="basics" align=center style="margin-top:30px">
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Race</td>
<td style="padding-left:10px; text-align:left">!!!RACE</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Clan</td>
<td style="padding-left:10px; text-align:left">!!!CLAN</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Age</td>
<td style="padding-left:10px; text-align:left">!!!AGE</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Nameday</td>
<td style="padding-left:10px; text-align:left">!!!NAMEDAY</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Deity</td>
<td style="padding-left:10px; text-align:left">!!!DEITY</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Marital Status</td>
<td style="padding-left:10px; text-align:left">!!!MARITAL-STATUS</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Occupation</td>
<td style="padding-left:10px; text-align:left">!!!OCCUPATION</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Height</td>
<td style="padding-left:10px; text-align:left">!!!HEIGHT</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; color:!!!INFO-TABLE-TXT-COLOR; text-transform:uppercase; border-right:1px solid">Weight</td>
<td style="padding-left:10px; text-align:left">!!!WEIGHT</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>

<!-- ---------- END ALL THE STUFF ABOVE THE TABS ----------- -->

<!-- --------------------- BEGIN TABS ---------------------- -->

<tabs plain container style="max-width:800px; padding:10px 100px 10px 100px; font-size:12px; font-weight:bold; color:!!!TAB-TEXT-COLOR; text-transform:uppercase; line-height:30px">

<!-- appearance tab -->
<tab name="Appearance" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
<h2 style="margin-top:0px; border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">General ❧</h2>
!!!GENERAL-INFO

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Clothing ❧</h2>
!!!CLOTHING

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Voice ❧</h2>
!!!VOICE

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Habits ❧</h2>
!!!HABITS
</tab>

<!-- personality tab -->
<tab name="Personality" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
!!!PERSONALITY

<table style="position:center; width:100%">
<tr>
<td style="vertical-align:top; font-size:9pt">
<h3><div style="min-width:200px; font-size:14px; border-bottom:5px solid; border-color:!!!LIKES-COLOR; color:!!!LIKES-COLOR; line-height:30px"><center>LIKES</center></div></h3>
: <font style="color:!!!LIKES-COLOR" size="2">♦</font> !!!LIKE
: <font style="color:!!!LIKES-COLOR" size="2">♦</font> !!!LIKE
: <font style="color:!!!LIKES-COLOR" size="2">♦</font> !!!LIKE
: <font style="color:!!!LIKES-COLOR" size="2">♦</font> !!!LIKE
</td>

<td style="vertical-align:top; font-size:9pt">
<h3><div style="min-width:200px; font-size:14px; border-bottom:5px solid; border-color:!!!DISLIKES-COLOR; color:!!!DISLIKES-COLOR; line-height:30px"><center>DISLIKES</center></div></h3>
: <font style="color:!!!DISLIKES-COLOR" size="2">♦</font> !!!DISLIKE
: <font style="color:!!!DISLIKES-COLOR" size="2">♦</font> !!!DISLIKE
: <font style="color:!!!DISLIKES-COLOR" size="2">♦</font> !!!DISLIKE
: <font style="color:!!!DISLIKES-COLOR" size="2">♦</font> !!!DISLIKE
</td>

<td style="vertical-align:top; font-size:9pt">
<h3><div style="min-width:200px; font-size:14px; border-bottom:5px solid; border-color:!!!OTHER-COLOR; color:!!!OTHER-COLOR; line-height:30px"><center>OTHER</center></div></h3>
: <font style="color:!!!OTHER-COLOR" size="2">♦</font> '''Alignment:'''
: <font style="color:!!!OTHER-COLOR" size="2">♦</font> '''Faults:'''
: <font style="color:!!!OTHER-COLOR" size="2">♦</font> '''Favorite Flavors:'''
: <font style="color:!!!OTHER-COLOR" size="2">♦</font> '''Favorite Color:'''
</td>
</tr>
</table>
</tab>

<!-- biography tab -->
<tab name="Biography" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
<h2 style="margin-top:0px; border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Childhood ❧</h2>
!!!CHILDHOOD-BIO

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Teenage ❧</h2>
!!!TEENAGE-BIO

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Present ❧</h2>
!!!PRESENT-BIO
</tab>

<!-- rumours tab -->
<tab name="Rumours" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
<table style="position:center; width:100%">
<tr>
<td valign="top" style="max-width:400px">
<div style="padding-bottom:5px; border-bottom:5px solid; border-color:!!!COMMON-RUMORS-COLOR; text-align:center; color:#c4c3c2">
<h3 style="margin-bottom:-5px; font-size:14px; color:!!!COMMON-RUMORS-COLOR">COMMON RUMORS</h3>
(easy to overhear)</div>
: <font style="color:!!!COMMON-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!COMMON-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!COMMON-RUMORS-COLOR" size="2">♦</font> !!!
</td>
<td valign="top" style="max-width:400px">
<div style="padding-bottom:5px; border-bottom:5px solid; border-color:!!!MODERATE-RUMORS-COLOR; text-align:center; color:#c4c3c2">
<h3 style="margin-bottom:-5px; font-size:14px; color:!!!MODERATE-RUMORS-COLOR">MODERATE RUMORS</h3>
(moderately difficult to overhear)</div>
: <font style="color:!!!MODERATE-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!MODERATE-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!MODERATE-RUMORS-COLOR" size="2">♦</font> !!!
</td>
</tr>
<tr>
<td valign="top" style="max-width:400px">
<div style="padding-bottom:5px; border-bottom:5px solid; border-color:!!!RARE-RUMORS-COLOR; text-align:center; color:#c4c3c2">
<h3 style="margin-bottom:-5px; font-size:14px; color:!!!RARE-RUMORS-COLOR">RARE RUMORS</h3>
(very difficult or rarely overheard)</div>
: <font style="color:!!!RARE-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!RARE-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!RARE-RUMORS-COLOR" size="2">♦</font> !!!
</td>
<td valign="top" style="max-width:400px">
<div style="padding-bottom:5px; border-bottom:5px solid; border-color:!!!PC-RUMORS-COLOR; text-align:center; color:#c4c3c2">
<h3 style="margin-bottom:-5px; font-size:14px; color:!!!PC-RUMORS-COLOR">PC RUMORS</h3>
(rumors from the characters of other players)</div>
: <font style="color:!!!PC-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!PC-RUMORS-COLOR" size="2">♦</font> !!!
: <font style="color:!!!PC-RUMORS-COLOR" size="2">♦</font> !!!
</td>
</tr>
</table>
</tab>

<!-- relationships tab -->
<tab name="Relationships" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
: <center><font style="color:#d10049;" size="2">♥</font> Romantic Interest    <font style="color:#f291b3" size="2">♡</font> Platonic Love      <font style="color:#9EC60B;" size="2">▲</font> Good Standing      <font style="color:#C24640;" size="2">▼</font> Poor Standing</center>

!!!RELATIONSHIPS
</tab>

<!-- ooc tab -->
<tab name="OOC" style="width:100%; background-color:!!!TAB-BACKGROUND-COLOR; padding:10px; border-left:10px solid; border-right:10px solid; border-color:!!!TAB-BORDER-COLOR; border-radius:2px; color:!!!TEXT-COLOR; text-align:left; font-size:13px; font-weight:initial; text-transform:initial; line-height:initial">
<h2 style="margin-top:0px; border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Notes ❧</h2>
!!!NOTES

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">In-Game ❧</h2>
!!!IN-GAME-NOTES

<h2 style="border-color:!!!HEADER-COLOR; font-family:'palatino linotype'; font-size:25px; color:!!!HEADER-COLOR">Outgoing Links ❧</h2>
!!!OUTGOING LINKS
</tab>
</tabs>

<!-- ---------------------- END TABS ----------------------- -->

<!-- ---------------------- CREDITS ------------------------ -->
<table id="credits" align=center style="margin-bottom:30px; font-size:10px; color:!!!INFO-TABLE-TXT-COLOR">
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">Template</td>
<td style="padding-left:10px; text-align:left">[[Bancroft Gairn]]</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">Layout reference</td>
<td style="padding-left:10px; text-align:left">[[D'lyhhia Lhuil]]</td>
</tr>
<tr>
<td style="padding-right:10px; text-align:right; font-size:10px; font-weight:bold; text-transform:uppercase; border-right:1px solid">Other fiddling</td>
<td style="padding-left:10px; text-align:left">[[Misik'a Rahsi]]</td>
</tr>
</table>
</div>

here's a brief description of what each of these values actually are:

show template key >>
variable type description
BACKGROUND-COLOR color background color of the whole template. you can google 'hex color picker' and copy the hex value of whatever you'd like.
BORDER-COLOR color color of the top & bottom lines sandwiching the layout.
IMAGE-FILENAME file pretty self-explanatory. width is set to 400px but it can be tweaked without breaking much.
DECO-SYMBOL-COLOR color text color of DECO-SYMBOL.
DECO-SYMBOL text the decoration over the name (in this case, the crescent moon). this site has a lot you can usually just paste in.
CHAR-NAME-COLOR color text color of CHAR-NAME.
CHAR-NAME text character name.
QUOTE-COLOR color text color of QUOTE.
QUOTE text some sort of quote or subtitle.
TEXT-BACKGROUND-COLOR color background color for the box containing the intro text and stats. in this example, it's pretty subtle (white over the BACKGROUND-COLOR which is already a super light cream)
INTRO-TEXT text the short passage under the quote.
INFO-TABLE-TXT-COLOR color text color for the stat labels.
TAB-TEXT-COLOR color text color for the navigation tabs.
TAB-BACKGROUND-COLOR color background color for the content under the tabs. it's also white here, so hard to notice.
TAB-BORDER-COLOR color color of the lines left and right sandwiching the tab content.
TEXT-COLOR color color of the body text under each tab.
HEADER-COLOR color color of the header text under each tab (and its underline).
LIKES/DISLIKES/OTHER-COLOR color accent colors for the table under the Personality tab.
*-RUMORS-COLOR color accent colors for the table under the Rumours tab.
INFO-TABLE-TXT-COLOR color text color of the credits at the bottom :D
---



image goes here


— Name Name —

"quote quote"

Introduction text goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Race race
Clan clan
Age age
Nameday nameday
Deity deity
Marital Status marital status
Occupation occupation
Height height
Weight weight


General ❧

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Morbi tempus iaculis urna id. Neque viverra justo nec ultrices. Purus viverra accumsan in nisl nisi. Consequat ac felis donec et odio pellentesque. Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Sit amet mauris commodo quis imperdiet massa. Orci ac auctor augue mauris augue neque gravida in. Faucibus nisl tincidunt eget nullam non. Accumsan lacus vel facilisis volutpat est velit. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Nunc id cursus metus aliquam eleifend mi. Commodo elit at imperdiet dui accumsan. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nascetur ridiculus mus mauris vitae ultricies leo. Id venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Sed arcu non odio euismod lacinia at quis. Aliquam sem et tortor consequat id porta nibh.

Clothing ❧

Id aliquet risus feugiat in ante metus dictum. Eu sem integer vitae justo eget magna fermentum. Tempor orci eu lobortis elementum. Vitae suscipit tellus mauris a diam. Arcu cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Volutpat est velit egestas dui id ornare arcu odio ut. Lectus vestibulum mattis ullamcorper velit. Sit amet porttitor eget dolor morbi non arcu risus. Suscipit adipiscing bibendum est ultricies integer quis auctor. Sit amet luctus venenatis lectus magna fringilla. Libero nunc consequat interdum varius. Nisl vel pretium lectus quam id leo in vitae turpis. Ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Ultricies mi quis hendrerit dolor magna eget est.

Voice ❧

Nisi vitae suscipit tellus mauris a diam. Mi quis hendrerit dolor magna eget. Arcu dictum varius duis at consectetur lorem donec. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Adipiscing tristique risus nec feugiat in fermentum posuere. Id cursus metus aliquam eleifend mi in nulla. Eget aliquet nibh praesent tristique. Ultricies mi eget mauris pharetra et ultrices. Rutrum quisque non tellus orci ac auctor augue. Ultricies leo integer malesuada nunc vel risus commodo. Elit at imperdiet dui accumsan sit.

Habits ❧

In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Sodales neque sodales ut etiam sit amet. Facilisis gravida neque convallis a cras semper auctor neque. Odio aenean sed adipiscing diam donec. Ipsum suspendisse ultrices gravida dictum. Id ornare arcu odio ut sem nulla. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Mi in nulla posuere sollicitudin aliquam ultrices. Donec pretium vulputate sapien nec sagittis aliquam. Pharetra pharetra massa massa ultricies mi. Sed vulputate mi sit amet mauris commodo quis. A condimentum vitae sapien pellentesque. Massa eget egestas purus viverra accumsan. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Sodales ut etiam sit amet nisl purus in mollis. Sed egestas egestas fringilla phasellus faucibus scelerisque. Varius quam quisque id diam. At ultrices mi tempus imperdiet nulla malesuada. In fermentum et sollicitudin ac orci phasellus egestas.

Scelerisque in dictum non consectetur a erat nam at. Eu tincidunt tortor aliquam nulla facilisi. Dui id ornare arcu odio ut sem. In fermentum posuere urna nec tincidunt praesent semper feugiat. Justo eget magna fermentum iaculis eu non diam. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Ac felis donec et odio pellentesque diam volutpat commodo. Et tortor consequat id porta nibh venenatis cras sed felis. Pharetra convallis posuere morbi leo urna molestie at. Vestibulum lectus mauris ultrices eros in. Vulputate dignissim suspendisse in est ante in nibh mauris.

LIKES

yes
yes
yes
yes

DISLIKES

no
no
no
no

OTHER

Alignment: alignment
Faults: faults
Favorite Flavors: yum yum yum
Favorite Color: some colors

Childhood ❧

Nunc in vehicula felis, ut eleifend est. Vestibulum at mauris neque. Suspendisse maximus porta nisi ut scelerisque. Aliquam orci odio, laoreet id dapibus non, accumsan id lacus.

Teenage ❧

Curabitur maximus ipsum et pretium eleifend. Morbi sit amet ex nec lectus semper blandit. Donec id ligula consectetur, consequat odio vitae, mattis augue. Nulla sed lacus odio. Pellentesque tortor odio, tempus in nisi vitae, commodo bibendum purus. Proin rutrum sapien sit amet finibus porttitor.

Present ❧

Aenean tempus dictum diam, porta ullamcorper erat egestas eu. Nulla eu nibh mi. In volutpat purus at ornare sodales. Ut magna enim, rhoncus pellentesque placerat non, egestas eu odio.

COMMON RUMORS

(easy to overhear)
common
common
common

MODERATE RUMORS

(moderately difficult to overhear)
moderate
moderate
moderate

RARE RUMORS

(very difficult or rarely overheard)
rare
rare
rare

PC RUMORS

(rumors from the characters of other players)
"pc" -- Name Name
"pc" -- Name Name
"pc" -- Name Name
Romantic Interest Platonic Love Good Standing Poor Standing
Romance Placeholder
Platonic Placeholder
Squad Placeholder
You Suck Placeholder

Notes ❧

Feel free to use and tweak the layout, just be sure to leave credit (you can find some nice decorative symbols here)
Layout last updated 11 June 2020

In-Game ❧

notes

Outgoing Links ❧

link text


Template Bancroft Gairn
Layout reference D'lyhhia Lhuil
Other fiddling Misik'a Rahsi