[CODES] Some free tables!

Graphical and Text!

POSTED: Mon Jul 10, 2017 7:12 pm

Hello people of 'Souls! Here are a few of some tables I've done and I'd like to share them with y'all! The codes are a fill-in yourself! Anything that is in CAPS for the codebox is for you to fill in. COLOR, FONT, and URL are yours. You can also play around with these. Just leave the credit :)

I suggest using HTML editey, a google app you can add to your Google Drive. It's awesome!

OOC000+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet nibh et aliquet rutrum. Phasellus et mi ac nisi facilisis porttitor. Donec tincidunt risus sed lorem imperdiet semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis elit non ipsum egestas sodales. Ut consectetur tempor ligula vitae porta. Etiam volutpat orci sapien, vitae aliquet arcu dapibus tempus.

Nullam bibendum, tellus a mollis mattis, ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

Form:Time:Date:Place:
OptimeDayMonthPlace
By Silverfrost!

Code: Select all
[html]
<div class="CHARTAB"><div class="CHARTAB-in">
   <table class="ooc">
<tr class="oocshiz"><td class="ooc">OOC</td><td class="wc">000+</td></tr></table>
        <p>
           
</p>

    <table class="notes">
        <tr class="lables"><th>Form:</th><th>Time:</th><th>Date:</th><th>Place:</th></tr>
        <tr class="info"><td>Optime</td><td>Day</td><td>Month</td><td>Place</td></tr>
    </table></div>

</div>
<center>By Silverfrost!</center>

<style>
.CHARTAB {width:650px;margin:0px auto; float:center;background-image: url('URL'); background-repeat:no-repeat; background-position:top center;padding-top:219px;border:1px solid #COLOR ;}
.CHARTAB-in {background-color:#COLOR; padding:0px 0px 0px 0px;}
.CHARTAB table.ooc {width:100%;background-color:#COLOR;border:2px dotted #COLOR ;}
.CHARTAB td.ooc {width:75%; text-align:center;padding:5px;}
.CHARTAB td.wc {width:25%; font-family: 'FONT', serif; font-size:20px; float:right;padding-right:25px; font-style:bold; font-weight:800;}
.CHARTAB p {font-family: 'FONT', serif; font-size:15px; text-align:left; text-indent:20px;padding:5px;}
.CHARTAB table.notes {width:100%;background-color: #COLOR;border-collapse:collapse;
    border-spacing:0;}
.CHARTAB tr.lables {padding:2px;line-height:1.7; font-family: 'FONT', serif; font-size:15px;}
.CHARTAB tr.info {background-color:#COLOR; text-align:center;padding:0px;font-family: 'FONT', serif; font-size:14px;line-height:1.5;}

</style>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/nanook" type="text/css"/><link href="https://fonts.googleapis.com/css?family=Bad+Script|Dancing+Script|Gloria+Hallelujah|Indie+Flower|Laila|Lora|Nothing+You+Could+Do|Ruthie|Sacramento|Shadows+Into+Light|Tangerine" rel="stylesheet">
[/html]


NAME
Notes:Word Count:
Form | Time | Place | Date | Location
OOC
123

Nullam bibendum, tellus a mollis mattis, ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

NPS Photo / Nathan Kostegian | By Silverfrost!

Code: Select all
[html]
<div class="CHAR1-name">NAME</div>
<div class="CHAR1">
    <div class="CHAR1-image">
    </div>
<div class="CHAR1-ooc">
<table>
<tr class="head"><th class="notes">Notes:</th><th class="word">Word Count:</th></tr>
<tr class="body"><td class="ooc">Form | Time | Place | Date | Location <br> OOC</td><td class="wc">123</td></tr>
</table>
</div>
<div class="CHAR1-post">
<p>

</p>
</div>
</div>
<center><a href="URL">CREDIT</a> | By Silverfrost!</center>
<style>
.CHAR1 {width:600px; border: 5px #COLOR solid;margin:0px auto; float:center;}
.CHAR1-image {background-image: url('URL'); background-repeat: no-repeat;background-position:top center;height:153px; border-bottom:5px #COLOR solid;}
.CHAR1-ooc {background-color:#COLOR; float:center; margin:0px auto;}
.CHAR1 table {width:593px;}
.CHAR1 th.notes {font-family: 'FONT', serif; font-size:17px;}
.CHAR1 th.word {font-family: 'FONT', serif; font-size:15px;}
.CHAR1 td.ooc {text-align: center; font-family: 'FONT', serif; font-size:15px;}
.CHAR1 td.wc {font-family: 'FONT', serif; font-size:45px; text-align:center; line-height:20px;}
.CHAR1-post {background-color:#COLOR; padding:15px;}
.CHAR1 p {font-family: 'FONT', serif; font-size:17px;text-align:left; text-indent:25px; line-height:120%;}
.CHAR1 b {font-family: 'FONT', serif; font-size:17px; text-shadow:color: #COLOR;
   text-shadow: #COLOR 0px 0px 2px;color:#COLOR;}
   .CHAR1 b:before  {content:'“';font-family:'EB Garamond',serif;font-size:23px;padding-right:1px;}
   .Char1 b:after {content:'”';font-family:'EB Garamond', serif;font-size:23px; }
.CHAR1-name {line-height:15px;letter-spacing:0px;text-align:center;color:#COLOR;text-shadow:#COLOR 1px 1px 4px;padding-bottom:0px;font-size:32px;padding-top:7px;font-family:'FONT', serif;}</style><link href="https://fonts.googleapis.com/css?family=Laila|Junge|Glass+Antiqua|Amatic+SC|Lora|EB+Garamond|Butterfly+Kids|Over+the+Rainbow|Reenie+Beanie|The+Girl+Next+Door|Ruge+Boogie" rel="stylesheet"> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/nanook" type="text/css"/>
       [/html]

Name
OOC Text
Word Count: 000

Nullam bibendum, tellus a mollis mattis, ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

Totally awesome lyrics, up to two lines :)
By Silverfrost!

Code: Select all
  [html]
<div class="CHAR"><center><div class="CHAR-bar1"><div class="CHAR-nametitle">Name</div></div></center>
<div class="CHAR-img"></div><table class="CHAR-bar2"><tr><td class="CHAR-ooctxt"><center>OOC Text</td></center><td class="CHAR-wc">Word Count: 000</td></tr></table><div class="CHAR-post">
<p>
 
</p>
</div>
<div class="CHAR-bar3"><div class="CHAR-lyrics">Totally awesome lyrics, up to two lines :)</div></div></div><center>By Silverfrost!</center><style>
.CHAR {width:575px; margin:0px auto; float: center;}
.CHAR-bar1 {width:100%; margin:0px auto; border-collapse:collapse; background-color:#COLOR;width:575px;}
.CHAR-bar2 {width:100%; margin:0px auto; border-collapse:collapse;background-color:#COLOR;width:575px;}
.CHAR-bar3 {width:100%; margin:0px auto; border-collapse:collapse;background-color:#COLOR;width:575px;}
.CHAR-nametitle {font-family: 'FONT', serif; text-align:center; background-repeat:no-repeat;  height: 56px; background-color:#COLOR;background-position: center top;float:center;font-size:50px; color:#COLOR;padding:5px;letter-spacing:5px;}
.CHAR-img {background-image: url('URL'); background-repeat:no-repeat; width:575px; height:138px; margin:0px; float:center;}
.CHAR-ooctxt {text-align:left; vertical-align: center; color: #COLOR; font-family: 'FONT', sans-serif; margin:0px auto;  font-size:13px; padding:10px; background-color:#COLOR; width:75%;}
.CHAR-wc {text-align:center; background-color:#COLOR; color: #COLOR; font-family: 'FONT', sans-serif; margin:0px auto; font-size:13px; padding:10px; width:25%; vertical-align:middle;}
.CHAR-post {background-color:#COLOR; padding:3px; }
.CHAR p {font-family: 'Noto Serif', serif; font-size:16px; text-indent:25px; padding:3px; text-align:left;}
.CHAR b {font-family: 'FONT', serif; font-size:19px; padding:.5px; color:#COLOR;}
.CHAR-lyrics {font-family: 'FONT', serif; text-align:center; margin:0px auto; float:center; padding:5px; height:50px;color:#COLOR;font-size:20px;}</style><link href="https://fonts.googleapis.com/css?family=Philosopher|Cinzel|Noto+Serif|Rochester" rel="stylesheet"> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/nanook" type="text/css"/>[/html]
Last edited by Avinalora Phoenix on Mon Jul 10, 2017 8:55 pm, edited 2 times in total.




User avatar
Silverfrost
Luperci
Somebody make me feel alive
The queen of a wretched design
I walk through the fire

POSTED: Mon Jul 10, 2017 7:25 pm

oooooh O: those are some nice tables I might have to use them sometime!
kasilu

User avatar
Tilu
Non-Luperci

POSTED: Mon Jul 10, 2017 8:48 pm

I simplified the third table to be a text table. Coded on mobie so mobile friendly! Couldn't do the #COLOR FONT thing because I'm on mobile! Did it More coming soon!

Name
OOC000

"Nullam bibendum, tellus a mollis mattis," ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

Lyrics


Code: Select all
[html]<div class="CHARtext">
<div class="CHARtext-name">Name</div> <div class="CHARtext-body">
<table class="ooc"><tr class="notes"><td class="chat">OOC</td><td class="wc">000</td></tr></table>
<div class="CHARtext-post">
<p>

</p>
</div>
    <div class="CHARtext-lyrics">Lyrics</div>
</div>
</div>
<style>
.CHARtext {width:95%; margin:0px auto;float:center;}
.CHARtext-name {font-family: 'FONT', serif; text-align:center; background-color:#COLOR;float:center;font-size:50px; color:#COLOR;padding:5px;letter-spacing:5px;}
.CHARtext-body {background-color:#COLOR;}
.CHARtext .ooc {width:100%;}
.CHARtext .chat {width:90%; text-align:center; font-family: 'FONT', serif; font-size:16px; padding:5px;}
.CHARtext .wc {font-size:25px; font-family: 'FONT'; text-align:center;}
.CHARtext-post {padding:5px; }
.CHARtext p {font-family: 'FONT', serif; font-size:16px; text-align:left; text-indent: 30px;}
.CHARtext b {color:#7c0000; font-family: 'FONT', serif;}
.CHARtext-lyrics {font-family: 'FONT', serif; text-align:center; background-color:#COLOR;float:center;font-size:30px; color:#COLOR;padding:5px;letter-spacing:5px;}
</style><link href="https://fonts.googleapis.com/css?family=Philosopher|Cinzel|Noto+Serif|Rochester|Amatic+SC" rel="stylesheet">[/html]
Last edited by Avinalora Phoenix on Thu Dec 07, 2017 2:58 pm, edited 2 times in total.




User avatar
Silverfrost
Luperci
Somebody make me feel alive
The queen of a wretched design
I walk through the fire

POSTED: Tue Jul 11, 2017 2:39 am

Another one! This one is simple and involves a clipart hunt for headers, or you could just take out the image!

EDITED FOR THE #COLOR AND FONT THING
OOCOptime | Day | July | Place000+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut ipsum ut sem posuere adipiscing. Proin aliquam lectus diam, id dictum nunc. Maecenas in augue tortor, sed viverra libero. “Morbi urna eros,” facilisis id malesuada a, auctor eget est. In hac habitasse platea dictumst. Ut neque nulla, dignissim ut viverra ac, vehicula vitae neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut ipsum ut sem posuere adipiscing. Proin aliquam lectus diam, id dictum nunc. Maecenas in augue tortor, sed viverra libero. “Morbi urna eros,” facilisis id malesuada a, auctor eget est. In hac habitasse platea dictumst. Ut neque nulla, dignissim ut viverra ac, vehicula vitae neque. Aenean vel libero a nibh luctus volutpat et sed ligula.



Code: Select all
[html]
<div class="CHARtxt">
     <div class="CHARtxt-post">
     <table class="ooc">
<tr class="oocshiz"><td class="ooc">OOC</td><td class="info">Optime | Day | July | Place</td><td class="wc">000+</td></tr></table>
<table class="notes">
    </table>
   
    <p>
</p>
</div></div>
<style>
.CHARtxt {width:90%; margin:0px auto; float:center;background-image: url('http://i.imgur.com/OT9mgXn.jpg'); background-position:top center; padding-top:85px;background-repeat:no-repeat;border:5px double #COLOR;background-color:#COLOR;}
.CHARtxt table.ooc {width:100%;margin:0px auto; float:center;border-bottom:1px dotted;padding:0px;}
.CHARtxt td.ooc {width:21%; text-align:center;padding:5px;font-family:'FONT', serif;}
.CHARtxt td.wc {width:15%; font-family: 'FONT', serif; font-size:20px; float:right;padding-right:55px; font-style:bold; font-weight:800;}
.CHARtxt p {font-family: 'FONT', serif; font-size:15px; text-align:left; text-indent:20px;padding:5px;}
.CHARtxt table.notes {width:30%;border-collapse:collapse; margin:0px auto; float:center;
    border-spacing:0;padding:5px;}
.CHARtxt tr.lables {padding:2px;line-height:1.7; font-family: 'FONT', serif; font-size:15px;}
.iorktxt tr.info { text-align:center;padding:0px;font-family: 'FONT', serif; font-size:14px;line-height:1.5;padding:5px;}
.CHARtxt td.info {width:64%; text-align:center;}
.CHARtxt-post {padding:5px;}
.CHARtxt b {color: #COLOR;font-family: 'FONT';}
</style>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/nanook" type="text/css"/><link href="https://fonts.googleapis.com/css?family=Bad+Script|Dancing+Script|Gloria+Hallelujah|Indie+Flower|Laila|Lora|Nothing+You+Could+Do|Ruthie|Sacramento|Shadows+Into+Light|Tangerine" rel="stylesheet">
[/html]




User avatar
Silverfrost
Luperci
Somebody make me feel alive
The queen of a wretched design
I walk through the fire

POSTED: Sat Oct 21, 2017 4:34 pm

These are so lovely! Definitely gonna use one for Basil's upcoming RO! :D

signature image by Lin
Cour des Miracles
Baronnet (NPC)
User avatar
Pablo
Luperci

POSTED: Mon Nov 06, 2017 7:56 pm

Basil Butler wrote:These are so lovely! Definitely gonna use one for Basil's upcoming RO! :D

Aaaw, thanks! <3 <3


Here's a quick text table!
Character Name
We're death defyin'
Coming in like lightnin'
Look out, we're strikin'
Ready set, ready set let's go

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.

OOC 000+


Code: Select all
[html]<div class="temptext">
<div class="temptext-name">Character Name</div>
<div class="temptext-lyrics">
We're death defyin' </br>
Coming in like lightnin'</br>
Look out, we're strikin'</br>
Ready set, ready set let's go
</div>
<div class="temptext-post">
<p>

 </p>
</div>
<table class="ooc">
<td class="chat">OOC</td> <td class="wc">000+</td>
</table>
</div>
<style>
.temptext {width:100%;margin:0px auto; float:center;}
.temptext-name {font-size:30px; text-align:center; font-family: Georgia;}
.temptext-lyrics {text-align:center; font-size:14px;font-family: 'Times'; line-height:13px;}
.temptext-post {border-top: 1px dashed;margin:10px;}
.temptext p {font-family: 'Georgia', serif; font-size:15px;text-align:left; text-indent:30px;line-height:120%;}
.temptext b {font-family: 'Times', serif;font-size:18px;}
.temptext table.ooc {width:100%;text-align:center; border-top:1px dashed;}
.temptext td.chat {width:75%; font-family: 'Courier', monospace; font-size:15px;}
.temptext td.wc {font-family: 'Comic Sans MS'; font-size:18px;text-align:right;padding-right:15px;}
</style>
[/html]



And here's one with a place for a 150px × 500px img!
Character Name
We're death defyin'
Coming in like lightnin'
Look out, we're strikin'
Ready set, ready set let's go

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.

OOC 000+


Code: Select all
[html]<div class="temptext2">
<div class="temptext2-name">Character Name</div>
<div class="temptext2-lyrics">
We're death defyin' </br>
Coming in like lightnin'</br>
Look out, we're strikin'</br>
Ready set, ready set let's go
</div>
<div class="temptext2-post"><img src="IMGURL">
<p>

 </p>
</div>
<table class="ooc">
<td class="chat">OOC</td> <td class="wc">000+</td>
</table>
</div>
<style>
.temptext2 {width:100%;margin:0px auto; float:center;}
.temptext2-name {font-size:30px; text-align:center; font-family: Georgia;}
.temptext2-lyrics {text-align:center; font-size:14px;font-family: 'Times'; line-height:13px;}
.temptext2-post {border-top: 1px dashed;margin:10px;}
.temptext2 p {font-family: 'Georgia', serif; font-size:15px;text-align:left; text-indent:30px;line-height:120%;}
.temptext2 b {font-family: 'Times', serif;font-size:18px;}
.temptext2 table.ooc {width:100%;text-align:center; border-top:1px dashed;}
.temptext2 td.chat {width:75%; font-family: 'Courier', monospace; font-size:15px;}
.temptext2 td.wc {font-family: 'Comic Sans MS'; font-size:18px;text-align:right;padding-right:15px;}
.temptext2 img {margin:5px; float:right; max-width:150px;max-height:500px;}
</style>
[/html]


And here's one for a feral picture instead! Max-width of 250px and max-height of 400px, though you can fiddle

Character Name
We're death defyin'
Coming in like lightnin'
Look out, we're strikin'
Ready set, ready set let's go

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.

Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Mauris massa. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.

OOC 000+

Code: Select all
[html]<div class="temptext3">
<div class="temptext3-name">Character Name</div>
<div class="temptext3-lyrics">
We're death defyin' </br>
Coming in like lightnin'</br>
Look out, we're strikin'</br>
Ready set, ready set let's go
</div>
<div class="temptext3-post"><img src="IMGURL">
<p>

</p>
</div>
<table class="ooc">
<td class="chat">OOC</td> <td class="wc">000+</td>
</table>
</div>
<style>
.temptext3 {width:100%;margin:0px auto; float:center;}
.temptext3-name {font-size:30px; text-align:center; font-family: Georgia;}
.temptext3-lyrics {text-align:center; font-size:14px;font-family: 'Times'; line-height:13px;}
.temptext3-post {border-top: 1px dashed;margin:10px;}
.temptext3 p {font-family: 'Georgia', serif; font-size:16px;text-align:left; text-indent:30px;line-height:120%;}
.temptext3 b {font-family: 'Times', serif;font-size:18px;}
.temptext3 table.ooc {width:100%;text-align:center; border-top:1px dashed;}
.temptext3 td.chat {width:75%; font-family: 'Courier', monospace; font-size:15px;}
.temptext3 td.wc {font-family: 'Comic Sans MS'; font-size:18px;text-align:right;padding-right:15px;}
.temptext3 img {margin:5px; float:right; max-width:250px;max-height:400px;}
</style>
[/html]

User avatar
Silverfrost
Luperci Healer, Scavenger The Brotherhood: Master of Tooth and Claw
You've spent a life time stuck in silence
What I wanna save I will try

POSTED: Tue Sep 18, 2018 4:04 pm

Here is the re-done version of the old template I did a while ago with edits since I was dumb the first time and a version with space for a character image that automatically resizes to 33%! Let me know if something doesn't work!

Name
OOC000

"Nullam bibendum, tellus a mollis mattis," ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

Lyrics
Table by Silverfrost!


Code: Select all
[html]<div class="CHARtext">
<div class="CHARtext-name">Name</div>
<table class="ooc"><tr class="notes"><td class="chat">OOC</td><td class="wc">000</td></tr></table>
<div class="CHARtext-body"><p>
<b>"Nullam bibendum, tellus a mollis mattis,"</b> ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros. </p><p>Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.
</p>
</div>
<div class="CHARtext-lyrics">Lyrics</div>
</div>
<center><span style="text-align:center; font-family: 'Calibri'; font-size:13px; opacity:0.7;">Table by Silverfrost! </span></center>
<style>
.CHARtext {width:99%; margin:0px auto;float:center;}
.CHARtext-name {font-family: 'FONT', serif; text-align:center;  background-color:#COLOR; float:center;font-size:50px; color:#COLOR;padding:5px;letter-spacing:5px;}
.CHARtext-body {padding:10px;}
.CHARtext table.ooc {width:100%;background-color:#COLOR;}
.CHARtext .notes {padding:0px;}
.CHARtext td.chat {width:90%; text-align:center; font-family: 'FONT', serif; font-size:16px; padding:5px;}
.CHARtext td.wc {font-size:25px; font-family: 'FONT'; text-align:center;}
.CHARtext p {font-family: 'FONT', serif; font-size:16px; text-align:left; text-indent: 30px;}
.CHARtext b {color:#COLOR; font-family: 'FONT', serif;}
.CHARtext-lyrics {font-family: 'FONT', serif; text-align:center;  background-color:#COLOR; float:center;font-size:30px; color:#COLOR;padding:5px;letter-spacing:5px;}
</style><link href="https://fonts.googleapis.com/css?family=Philosopher|Cinzel|Noto+Serif|Rochester|Amatic+SC" rel="stylesheet">[/html]


Name
OOC000

"Nullam bibendum, tellus a mollis mattis," ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

"Nullam bibendum, tellus a mollis mattis," ex arcu pellentesque purus, ac vestibulum lectus ex id diam. Ut ultricies dui et neque malesuada vestibulum. Pellentesque fringilla aliquam magna ut aliquam. Nulla vitae mattis nisi. Duis a accumsan mauris, et molestie sapien. Duis viverra eleifend vestibulum. Suspendisse elit elit, ornare vitae aliquam sit amet, porttitor vitae libero. Cras lacinia molestie nisi eu cursus. Nam posuere turpis eros.

Fusce nulla enim, viverra non lectus sed, maximus mollis metus. Vestibulum sollicitudin lacinia ex in tempor. Donec non efficitur nunc. Etiam dapibus justo nec varius hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi vitae augue blandit, imperdiet ex non, feugiat risus. Nullam volutpat sodales sodales.

Lyrics
Table by Silverfrost! Art by Player!


Code: Select all
[html]<div class="CHARtext">
<div class="CHARtext-name">Name</div>
<table class="ooc"><tr class="notes"><td class="chat">OOC</td><td class="wc">000</td></tr></table>
<div class="CHARtext-body">
<img src="IMGURL">
<p>

</p>
</div>
<div class="CHARtext-lyrics">Lyrics</div>
</div>
<center><span style="text-align:center; font-family: 'Calibri'; font-size:13px; opacity:0.7;">Table by Silverfrost! Art by Player!</span></center>
<style>
.CHARtext {width:99%; margin:0px auto;float:center;}
.CHARtext-name {font-family: 'FONT', serif; text-align:center; background-color: #COLOR; float:center;font-size:50px; color:#COLOR;padding:5px;letter-spacing:5px;}
.CHARtext-body {padding:10px;}
.CHARtext table.ooc {width:100%;background-color:#COLOR;}
.CHARtext .notes {padding:0px;}
.CHARtext td.chat {width:90%; text-align:center; font-family: 'FONT', serif; font-size:16px; padding:5px;}
.CHARtext td.wc {font-size:25px; font-family: 'FONT'; text-align:center;}
.CHARtext img {float:right; margin:2px; max-width:33%;}
.CHARtext p {font-family: 'FONT', serif; font-size:16px; text-align:left; text-indent: 30px;}
.CHARtext b {color:#COLOR; font-family: 'FONT', serif;}
.CHARtext-lyrics {font-family: 'FONT', serif; text-align:center; background-color:#COLOR; float:center;font-size:30px; color:#COLOR;padding:5px;letter-spacing:5px;}
</style><link href="https://fonts.googleapis.com/css?family=Philosopher|Cinzel|Noto+Serif|Rochester|Amatic+SC" rel="stylesheet">[/html]

User avatar
Silverfrost
Luperci Healer, Scavenger The Brotherhood: Master of Tooth and Claw
You've spent a life time stuck in silence
What I wanna save I will try

Templates