Sika's Template 01
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).
<!-- 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:
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 |
|
☽
— 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.
|
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.
|
|
|
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)
|
MODERATE RUMORS(moderately difficult to overhear)
|
RARE RUMORS(very difficult or rarely overheard)
|
PC RUMORS(rumors from the characters of other players) |
♥ Romantic Interest ♡ Platonic Love ▲ Good Standing ▼ Poor Standing
Template | Bancroft Gairn |
Layout reference | D'lyhhia Lhuil |
Other fiddling | Misik'a Rahsi |