[CODE] Triple Bar Table
#1
Got bored, made a template! This is intended for you to grab color schemes from somewhere like [html]<a href="https://kuler.adobe.com/create/color-wheel/">Kuler</a> and mix and match to get a nice table! You can go light or dark with this,[/html] and still come out with good results. Its imageless at the moment but I could come up with an image friendly version if anyone is interested! This has quite a few div tags, please don't forget to keep them closed!

Different fonts can be substituted/etc. Please remember to change the "CHAR" to your character's name to avoid two people using the same code in one thread!

If you want to remove the fancy first letter of paragraphs, that's easily done by just snipping out these two lines from the code

Code:
.bars p:first-letter {font-size:2em; color:#45637A; font-family: 'Felipa', cursive;}
.bars p:first-line { line-height: 100%; }

[html]<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Felipa' rel='stylesheet' type='text/css'>
<style>
.CHARbars {width:650px; background-color:#fff; font:15px/1.50 Pt Serif; text-align:left; margin:0px auto;}
.CHARbart {padding:20px;}
.CHARbar1 {border-right:60px solid #45637A;}
.CHARbar2 {border-right:30px solid #BAD58A;}
.CHARbar3 {border-right:15px solid #E6B974;}
.CHARbbot {background-color:#0A0204; color:white; padding:3px; font-size:12px; text-align:right;}
.CHARbars p {text-indent:60px;}
.CHARbars p:first-letter {font-size:2em; color:#45637A; font-family: 'Felipa', cursive; font-weight:bold;}
.CHARbars p:first-line { line-height: 100%; }
.CHARbars b {color:#45637A; font-weight:600;}

</style>

<div class="CHARbars"><div class="CHARbar1"><div class="CHARbar2"><div class="CHARbar3"><div class="CHARbart">
<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></div></div></div>
<div class="CHARbbot">ooc stuff here | <stong>[wc &mdash; ??]</strong> template by <a href="">hilli</a></div>
</div>
[/html]

Code:
<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Felipa' rel='stylesheet' type='text/css'>
<style>.CHARbars {width:650px; background-color:#fff; font:15px/1.50 Pt Serif; text-align:left; margin:0px auto;}
.CHARbart {padding:20px;}
.CHARbar1 {border-right:60px solid #45637A;}
.CHARbar2 {border-right:30px solid #BAD58A;}
.CHARbar3 {border-right:15px solid #E6B974;}
.CHARbbot {background-color:#0A0204; color:white; padding:3px; font-size:12px; text-align:right;}
.CHARbars p {text-indent:60px;}
.CHARbars p:first-letter {font-size:2em; color:#45637A; font-family: 'Felipa', cursive; font-weight:bold;}
.CHARbars p:first-line { line-height: 100%; }
.CHARbars b {color:#45637A; font-weight:600;}</style>

<div class="CHARbars">

<div class="CHARbar1"><div class="CHARbar2"><div class="CHARbar3"><div class="CHARbart">
<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></div></div></div>
<div class="CHARbbot">ooc stuff here | <stong>[wc &mdash; ??]</strong> template by <a href="http://www.soulsrpg.com/forum/viewtopic.php?f=37&t=10829&p=85887#p85887">hilli</a></div>
</div>
[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
#2
I love this so much! @___@
[html]<div class="vessig">

<div class="bottom">
<div class="sigicons" id="signature-icons">
<a href="//wiki.soulsrpg.com/index.php?n=Players.Raze" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="ucp.php?i=pm&mode=compose&u=577" class="player-contact" title="CONTACT: PM Vicira"></a>
<a href="//wiki.soulsrpg.com/index.php?n=Players.RazeAdoptions" class="adoptables-available" title="ADOPTABLES available!"></a>
<a href="viewtopic.php?t=23974" target="_blank" title="POST LOG" class="post-log"></a>
<a href="#!" title="I prefer if you do NOT use graphical tables in our threads. Thanks!" class="no-tables"></a><br/>
<a href="//wiki.soulsrpg.com/index.php?n=Characters.Vesper" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="//imgur.com/a/X5Zf0" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a>
<a href="#!" class="lupus-preference" title="LUPUS unless otherwise stated."></a>
<a href="#!" class="accompaniment" title="Typically accompanied by a raven or two."></a>
<a href="LINK" class="permanent-disability" title="Crippled right hind leg."></a><br/>
<a href="#!" class="skill-fighting" title="Fighter mastered in feral combat."></a>
<a href="#!" class="skill-generic" title="Experienced survivalist able to scout, hunt, and navigate."></a>
<a href="#!" class="skill-animals" title="Able to talk to, care for, and train ravens."></a>
</div>

</div>
</div>

<style>
@import url('/images/icons/postsig/signature-icons.css');
#signature-icons a.permanent-disability { background-image: url('http://i.imgur.com/XVMFfdB.png'); }
</style>
<style type="text/css">
.vessig {
width:390px;
margin:0px auto;
background-image:url('https://cdnw.nickpic.host/osDfMd.png');
background-position:right center;
background-repeat:no-repeat;
height:200px;
}
.vessig .title {
margin:0px auto;
text-align:left;
padding:5px;
font-family:'Merriweather', serif;
font-size:11.8px;
letter-spacing:-.6px;
text-transform:lowercase;
opacity:0.7;
}
.vessig #signature-icon {margin:0px auto; text-align:center;}
.vessig .sigicons {
text-align:center;
margin:0px auto;
line-height:1em;
padding:50px 150px 2px 2px;
}
.vessig .packicons {
text-align:center;
margin:0px auto;
line-height:1em;
padding:2px 0px 2px 0px;
}
.vessig a {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
border-radius:7px;
}
.vessig a:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic' rel='stylesheet' type='text/css'>
[/html]
  Reply
#3
yoooooooooo I'm so stealing this
  Reply
#4
:D

other stuff is coming soon because PROCRASTINATION IS THE BEST THING EVER.
[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: