[CODE] Transparent Top/Bottom Image Table

POSTED: Fri Sep 06, 2019 4:04 pm

hi, everyone! recently Miranda and i have been on a bit of a table kick, and while fiddling with some table code, i have a little thing i wanted to share! this table is inspired heavily by Hilli's opaque top/bottom image table, found here. a huge thanks to her for giving me the ok to post this and also providing an awesome base!
the difference between the two is that this one is transparent and still readable for those that don't prefer graphical tables, and it also allows you to add your character's name or lyrics to the top and bottom image. how cool is that?

a few things to note:

• this is my first time posting a template so if there is anything that is out of place or messing up when you try to adjust it please please please let me know and we can figure it out! i am by no means a code expert, but i want to share pretty, relatively simple tables for everyone to enjoy <3

• replace the .topbottom to your character's name!

• there are three (line) height values found here:
Code: Select all
.topbottomimg {LINE-HEIGHT:80px; background-image:url('https://imgur.com/4IYHlpS.png'); border:1px solid #000; background-repeat:no repeat; HEIGHT:80px; background-position: top center; border-radius: 10px 10px 10px 10px;}
.topbottomimgbot {LINE-HEIGHT:80px; background-position:bottom center;}

make sure that they are all the same value! this is what is centering the lyrics in the top and bottom image, so if they are not the same, the lyrics/name/etc. will be off-center. ^^;

• when changing the lyrics, this is the line you want to look for. it's before and after the main body. alternatively, if you don't want lyrics at all, feel free to just take them out.
Code: Select all
<div class="topbottomLYRICS">i am a sinner who's probably gonna sin again</div>
...
<div class="topbottomLYRICS">lord forgive me, things i don't understand</div>


• if you wanna add automatic quotations to your speech, plug this lil' code into the style section!
Code: Select all
.topbottom b:before {content:open-quote;}
.topbottom b:after {content:close-quote;}


onto the table!

ooc here! [+000]
i am a sinner who's probably gonna sin again

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sem massa, posuere ac hendrerit quis, eleifend nec ex. "Mauris blandit aliquam molestie." Mauris vehicula, libero nec consectetur pellentesque, erat tellus efficitur nunc, vel tempor nisi purus a felis. Sed dapibus pretium leo, at maximus dolor posuere sit amet. Nulla facilisi. Phasellus malesuada faucibus magna euismod finibus. In lacus mi, volutpat laoreet velit nec, faucibus vulputate dolor. Nunc mauris neque, porta et finibus ac, facilisis vel arcu. Donec at placerat velit. Maecenas ac tempor lectus. Duis vel accumsan eros. Quisque orci lectus, laoreet et est a, convallis fringilla nulla. Nullam efficitur tincidunt venenatis. Proin sit amet lectus erat.

"Ut augue enim, ultrices quis nisi vel, venenatis iaculis nibh." Aliquam a odio nunc. Donec commodo, nisl ac porttitor ornare, turpis sapien sodales neque, eu tempor lacus mi nec tellus. Aenean eget odio in ante ornare faucibus. In felis risus, tempor in ornare ut, faucibus in enim. Quisque quis turpis lobortis, lacinia est eget, pharetra metus. Maecenas lobortis, risus ac elementum interdum, dui nisl congue risus, non volutpat ante tortor a dolor. Cras sapien nisl, ultrices elementum magna in, laoreet porta mauris.

Fusce sit amet enim et massa porttitor sodales. Integer lobortis commodo risus vel mattis. Ut maximus nunc et volutpat tincidunt. Curabitur purus ligula, varius eu mollis non, varius sed elit. Ut ornare consequat ex, vel condimentum felis ultrices ut. Maecenas vitae sagittis velit, vitae commodo mi. Mauris pellentesque nisl lacus, sed finibus quam tincidunt a. Aliquam et diam rhoncus, varius velit eu, suscipit est. Ut rhoncus dolor orci. Ut a fermentum felis, pharetra facilisis massa.

lord forgive me, things i don't understand
template by veldt, image by @hitobywong


Code: Select all
[html]
<style>
.topbottom      {width:625px; margin:0px auto; font-family:'cairo';}
.topbottombody      {padding:0px; text-align:justify;}
.topbottom p      {margin:4px; font-size:17px; line-height:25px; padding:10px 0px 10px;}
.topbottomimg      {line-height:80px; background-image:url('https://imgur.com/4IYHlpS.png'); border:1px solid #000;
                background-repeat:no repeat; height:80px; background-position: top center; border-radius: 10px 10px 10px
             10px;}
.topbottomimgbot   {line-height:80px; background-position:bottom center;}
.topbottomlyrics      {vertical-align:middle; font-family:'merienda one'; font-size:26.5px; letter-spacing:0px; text-align:center;
             color:#f0efed; text-shadow:1px 1px 2px #000, 0px 0px 25px #969696, 0px 0px 15px #fff;}
.topbottom b      {font-size:18px;}
.topbottom b.npc   {filter:alpha(opacity=75%); opacity:.75;}
.topbottom-bar      {line-height:25px; width:100%; margin:0px auto; border-collapse:collapse;}
.topbottom-ooc      {font-size:13px; font-family:'cairo'; text-align:left; width:70%; text-indent:5px; vertical-align:middle;}
.topbottom-wc      {font-size:20px; font-family:'unica one'; text-align:right; width:30%; letter-spacing:4px; padding:5px;}
.topbottom-credit   {font-size:13px; text-align:center; padding-top:5px;}
</style>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Cairo|Unica+One|Caveat|Merienda+One"/>
<div class="topbottom"><table class="topbottom-bar">
<tr>  <td class="topbottom-ooc">ooc here!
</td><td class="topbottom-wc">[+000]
</td></tr></table>
<div class="topbottomimg"><div class="topbottomlyrics">i am a sinner who's probably gonna sin again</div></div><div class="topbottombody">


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sem massa, posuere ac hendrerit quis, eleifend nec ex. <b>"Mauris blandit aliquam molestie."</b> Mauris vehicula, libero nec consectetur pellentesque, erat tellus efficitur nunc, vel tempor nisi purus a felis. Sed dapibus pretium leo, at maximus dolor posuere sit amet. Nulla facilisi. Phasellus malesuada faucibus magna euismod finibus. In lacus mi, volutpat laoreet velit nec, faucibus vulputate dolor. Nunc mauris neque, porta et finibus ac, facilisis vel arcu. Donec at placerat velit. Maecenas ac tempor lectus. Duis vel accumsan eros. Quisque orci lectus, laoreet et est a, convallis fringilla nulla. <i>Nullam efficitur tincidunt venenatis.</i> Proin sit amet lectus erat.
</p><p>
<b class="npc">"Ut augue enim, ultrices quis nisi vel, venenatis iaculis nibh."</b> Aliquam a odio nunc. Donec commodo, nisl ac porttitor ornare, turpis sapien sodales neque, eu tempor lacus mi nec tellus. Aenean eget odio in ante ornare faucibus. In felis risus, tempor in ornare ut, faucibus in enim. Quisque quis turpis lobortis, lacinia est eget, pharetra metus. Maecenas lobortis, risus ac elementum interdum, dui nisl congue risus, non volutpat ante tortor a dolor. Cras sapien nisl, ultrices elementum magna in, laoreet porta mauris.
</p><p>
Fusce sit amet enim et massa porttitor sodales. Integer lobortis commodo risus vel mattis. Ut maximus nunc et volutpat tincidunt. Curabitur purus ligula, varius eu mollis non, varius sed elit. Ut ornare consequat ex, vel condimentum felis ultrices ut. Maecenas vitae sagittis velit, vitae commodo mi. Mauris pellentesque nisl lacus, sed finibus quam tincidunt a. Aliquam et diam rhoncus, varius velit eu, suscipit est. Ut rhoncus dolor orci. Ut a fermentum felis, pharetra facilisis massa.</p>


</div><div class="topbottomimg topbottomimgbot"><div class="topbottomlyrics">lord forgive me, things i don't understand</div></div>
<div class="topbottom-credit"</div>template by <a href="https://soulsrpg.com/forum/viewtopic.php?f=37&t=44065">veldt</a>, image by <a href="https://unsplash.com/@hitobywong">@hitobywong</a></div></div>
[/html]
Last edited by Fennore on Thu Sep 12, 2019 9:20 pm, edited 1 time in total.
New Caledonia
High Lady of Dawn
User avatar
veldt
'Souls Soldier of Love Luperci Magister III, Diplomat III, Stylist I
• moonwraith •
twilight princess

POSTED: Mon Sep 09, 2019 11:38 pm

I love these!

I will have to play with one for Mateo :D
did we light too many matches?
turn ourselves into these ashes?
Salsola
Indentured Servant
User avatar
Amanda

straight through the smoke

Templates