[CODE] Side Image Text Table
#1
[html]<blockquote>Another template! This one is relatively simple, you'll need a tall, skinny image (taller is better!). The one in the example table is 75px wide, with no borders (css takes care of those!).

You'll need to change the CHAR to your character's name, and edit the 'CHARsides1" height and width to match your images dimensions and the table will adjust accordingly!</blockquote>[/html]



[html]<link href='http://fonts.googleapis.com/css?family=Artifika' rel='stylesheet' type='text/css'>
<style>.CHARsides {width:650px; font:16px/1.50 Times New Roman; text-align:left; margin:0px auto;}
.CHARsides1 { background-image:url('http://ghostecho.net/souls/river.png'); background-position:center left; background-repeat:no-repeat; border:1px solid #000; width:75px; height:569px; border:1px solid black; outline:1px solid white; float:right; margin:30px; }
.CHARsides-ooc{font-family: 'Artifika', serif; font-size:13px; border-top:1px dotted; text-align:center;}
.CHARsides p {text-indent:60px;}
.CHARsides-ly {font-family: 'Artifika', serif; font-size:2em; text-align:center; border-bottom:1px dotted;}</style>

<div class="CHARsides">
<div class="CHARsides-ly">JEALOUS IS THE NIGHT</div>
<div class="CHARsides1"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio metus, pellentesque at est at, vulputate blandit diam. Proin elementum urna et hendrerit egestas. Donec eget erat posuere tortor gravida viverra et eget purus. Nunc eu tortor malesuada, tincidunt nisl hendrerit, ultrices ante. Phasellus laoreet aliquam libero in tincidunt. Suspendisse potenti. Donec egestas sodales magna, id dignissim eros dapibus non. Nam vel mattis nisl, et pellentesque augue. Pellentesque ornare semper mi vel scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio metus, pellentesque at est at, vulputate blandit diam. Proin elementum urna et hendrerit egestas. Donec eget erat posuere tortor gravida viverra et eget purus. Nunc eu tortor malesuada, tincidunt nisl hendrerit, ultrices ante. <b>"Phasellus laoreet aliquam libero in tincidunt. Suspendisse potenti. Donec egestas sodales magna, id dignissim eros dapibus non."</b> Nam vel mattis nisl, et pellentesque augue. Pellentesque ornare semper mi vel scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio metus, pellentesque at est at, vulputate blandit diam. Proin elementum urna et hendrerit egestas. Donec eget erat posuere tortor gravida viverra et eget purus. Nunc eu tortor malesuada, tincidunt nisl hendrerit, ultrices ante. Phasellus laoreet aliquam libero in tincidunt. Suspendisse potenti. Donec egestas sodales magna, id dignissim eros dapibus non. Nam vel mattis nisl, et pellentesque augue. Pellentesque ornare semper mi vel scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio metus, pellentesque at est at, vulputate blandit diam. Proin elementum urna et hendrerit egestas. Donec eget erat posuere tortor gravida viverra et eget purus. Nunc eu tortor malesuada, tincidunt nisl hendrerit, ultrices ante. Phasellus laoreet aliquam libero in tincidunt. Suspendisse potenti. Donec egestas sodales magna, id dignissim eros dapibus non. Nam vel mattis nisl, et pellentesque augue. Pellentesque ornare semper mi vel scelerisque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse odio metus, pellentesque at est at, vulputate blandit diam. Proin elementum urna et hendrerit egestas. Donec eget erat posuere tortor gravida viverra et eget purus. Nunc eu tortor malesuada, tincidunt nisl hendrerit, ultrices ante. Phasellus laoreet aliquam libero in tincidunt. Suspendisse potenti. Donec egestas sodales magna, id dignissim eros dapibus non. Nam vel mattis nisl, et pellentesque augue. Pellentesque ornare semper mi vel scelerisque.</p>
<div class="CHARsides-ooc">ooc stuff here | <b>[wc &mdash; ??]</b> template by <a href="http://www.soulsrpg.com/forum/viewtopic.php?f=37&t=12002">hilli</a></div>
</div>
[/html]


Code:
[html]<link href='http://fonts.googleapis.com/css?family=Artifika' rel='stylesheet' type='text/css'>
<style>.CHARsides {width:650px; font:16px/1.50 Times New Roman; text-align:left; margin:0px auto;}
.CHARsides1 { background-image:url('http://ghostecho.net/souls/river.png'); background-position:center left; background-repeat:no-repeat; border:1px solid #000; width:75px; height:569px; border:1px solid black; outline:1px solid white; float:right; margin:30px;  }
.CHARsides-ooc{font-family: 'Artifika', serif; font-size:13px; border-top:1px dotted; text-align:center;}
.CHARsides p {text-indent:60px;}
.CHARsides-ly {font-family: 'Artifika', serif; font-size:2em; text-align:center; border-bottom:1px dotted;}</style>

<div class="CHARsides">
<div class="CHARsides-ly">lyrics go here</div>
<div class="CHARsides1"></div>
<p></p>
<div class="CHARsides-ooc">ooc stuff here | <b>[wc &mdash; ??]</b> template by <a href="http://www.soulsrpg.com/forum/viewtopic.php?f=37&t=12002">hilli</a></div>
</div>
[/html]
[html]
<style>@import url('http://sleepyglow.net/rp/icons/signature-icons.css');</style>
<style>
#signature-icons a {
background-repeat: no-repeat;
display:inline-block;
position:relative;
margin:0;
opacity:.35;
filter:alpha(opacity=35%);
transition:200ms linear all;
-moz-transition:200ms linear all;
border-bottom: 3px solid transparent;

}
.belSigOuter #signature-icons a:hover,
.belSigOuter #signature-icons a:focus,
.belSigOuter #signature-icons a:active
{
opacity:1;
filter:alpha(opacity=100%);
border-bottom: 3px solid #D8C887; /* change the color under the icons when you hover over them on this line */
}</style>
<div class="belSigOuter">
<div style="margin:0px auto;text-align:center; font-family: 'Pt Serif'; font-size:10px; width:500px; "><table width="100%">
<tr>
<td valign="top">
<img src="http://ghostecho.net/souls/lilsabik.png">
</td>
<td valign="top">
<div style="font-family: 'Graduate', cursive; font-size:18px; text-shadow:0px 0px 3px #000;">
Run away-ay with me<BR>
Lost souls in revelry
</div>
<div id="signature-icons">
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.BellatrixD'Angelo" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a> <a href="#!" target="_blank" title="Character speaks german, denoted by italics and bold. When they speak English, it is with a slow, southern carolina drawl." class="foreign-language"></a> <a href="#!" class="optime-preference" title="OPTIME unless otherwise stated."></a> <a href="#!" class="skill-hunting" title="Bellatrix is a skilled fisher."></a> <a href="#!" class="skill-animals" title="Bellatrix is skilled with horses."></a> <a href="#!" class="skill-crafts" title="Bellatrix is a skilled blacksmith."></a> <a href="#!" class="skill-fighting" title="Bellatrix is a skilled spearman."></a>
</div>
</td>
<td valign="top">

<img src="http://ghostecho.net/souls/babybel.png">
</td>
</tr>
</table>
</div>
</div>
<link href='https://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
[/html]
  Reply


Forum Jump: