Responsive Flexible RPG Post Template

Forum Roleplay > Roleplay Code > RPG Post Templates > Responsive Flexible RPG Post Template

Donate to stop seeing ads, and help support Forum Roleplay!

Downloads in Responsive Flexible RPG Post Template

Downloads: Responsive Flexible Table

Preview

Responsive Flexible Table Preview Image

Information

This post template’s key feature is that it is responsive — that is, it works and maintains readability whether the viewer is on a big desktop computer or a tiny mobile phone. Many old-school styled tables are not responsive and do not work for mobile roleplayers, who already struggle with text size and usability!

In addition to working well on mobile phones, this table has numerous text options — for displaying NPC speech, for displaying speech in a foreign language — allowing you to roleplay more complex situations without getting other roleplayers (or yourself!) confused regarding who is speaking.

Code

<style>.PLAYER-responsive-text-table{width:99%;margin:0 auto;font-size:22px;}
.PLAYER-responsive-text-table p{font-family:georgia, serif;font-size:1em;line-height:1.55em;padding:0;margin:1.5em 0;}
.PLAYER-responsive-text-table .sieImage + p{margin-top:0;}
.PLAYER-responsive-text-table p.sieImage{text-align:center;float:right;padding:0 0 2em 1em;text-indent:0;font-size:.845em;font-family:arial, helvetica, sans-serif;font-style:italic;max-width:230px;max-height:300px;}
.PLAYER-responsive-text-table p.sieImage img{display:block;max-width:230px;max-height:300px;margin-bottom:.5em;}
.PLAYER-responsive-text-table .txtooc{margin:0 auto 1.5em auto;}
.PLAYER-responsive-text-table .txtooc p{font-size:.845em;font-style:italic;font-family:arial, helvetica, sans-serif;font-weight:normal;filter:alpha(opacity=75);opacity:.75;}
.PLAYER-responsive-text-table .txtooc p:last-child{margin-bottom:0;padding-bottom:0;}
.PLAYER-responsive-text-table .txtooc .word{font-style:normal;font-size:.8em;display:block;text-transform:uppercase;}
.PLAYER-responsive-text-table .txtooc:after{margin:10px 0;content:'';filter:alpha(opacity=10%);opacity:.10;display:block;border-bottom:10px dotted #000;}
.PLAYER-responsive-text-table .txtooc .word:before{content:' words → ';}
.PLAYER-responsive-text-table b{}
.PLAYER-responsive-text-table b strong{font-weight:normal;text-decoration:underline;font-style:italic;}
.PLAYER-responsive-text-table b:before,
.PLAYER-responsive-text-table b.eng:before{content:open-quote;}
.PLAYER-responsive-text-table b:after,
.PLAYER-responsive-text-table b.eng:after{content:close-quote;}
.PLAYER-responsive-text-table b.lang{}
.PLAYER-responsive-text-table b.lang:before{content:'<';}
.PLAYER-responsive-text-table b.lang:after{content:'>';}
.PLAYER-responsive-text-table b.npc-one{font-style:italic;font-weight:bold;filter:alpha(opacity=65%);opacity:.65;}
.PLAYER-responsive-text-table b.npc-two{font-style:italic;font-weight:normal;filter:alpha(opacity=65%);opacity:.65;}
.PLAYER-responsive-text-table u.word{text-decoration:none;border-bottom:1px dotted #000;font-variant:small-caps;font-size:.85em;font-weight:bold;display:inline-block;margin:0 3px;line-height:.85em;}
.PLAYER-responsive-text-table u.word:hover,
.PLAYER-responsive-text-table u.word:focus,
.PLAYER-responsive-text-table u.word:active{cursor:help;}
.PLAYER-responsive-text-table p.time,.PLAYER-responsive-text-table p.time:after{content:'***';font-size:1.5em;text-align:center;line-height:1;margin:0;padding:0;text-indent:0;margin-bottom:-.5em;margin-top:-.5em;display:block;font-weight:bold;}
.PLAYER-responsive-text-table p.time{content:'';}
@media only screen 
and (min-width : 800px) {
.PLAYER-responsive-text-table{font-size:16px;}
.PLAYER-responsive-text-table .txtooc:after{border-bottom:3px dotted #000;}
}</style>
<div class="PLAYER-responsive-text-table">
<div class="txtooc">
<p> 
<span class="word">--</span>
your OOC text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque urna mauris, lacinia cursus neque in, porttitor consequat dolor. Mauris id tortor nisl. Nulla felis lacus, volutpat quis vulputate sed, imperdiet sit amet lacus.
</p>
<p>
you can even have multiple paragraphs of OOC text.
</p></div><p class="sieImage">
<img src="IMAGEURL HERE">
</p>
<p>
Lorem ipsum dolor sit amet, <u class="word" title="wotd">word of the day</u> adipiscing elit. Vivamus pharetra cursus iaculis. Donec dignissim, nulla vitae sagittis pulvinar, lectus mauris lobortis quam, eget fermentum ipsum ligula ac neque. Vivamus vestibulum ligula turpis, vel pulvinar leo mollis vel. Integer ac urna ac ipsum semper vestibulum. Etiam ultricies lectus eu odio varius cursus.
</p>
<p>
<b>Oh look your character is talking. You can <b>quote someone else</b> too, and fancy quotes make it nice. For emphasis, use <em>italics</em> or <u>underline</u>. Or, for real serious business emphasis, <strong>strong</strong>.</b> Donec ornare diam elementum orci ultrices, et auctor nulla dignissim. Mauris mattis molestie suscipit. <em>Now your character is just thinking.</em> Donec ornare diam elementum orci ultrices, et auctor nulla dignissim. Mauris mattis molestie suscipit.
</p>
<p>
<b class="npc-one">An NPC is talking.</b> Nullam sollicitudin felis nibh, et pharetra tortor tincidunt sed. Nulla semper rutrum tristique. Integer sollicitudin dolor et lacinia accumsan. 
</p>
<p>
<b class="npc-two">Another NPC is talking.</b> Nullam sollicitudin felis nibh, et pharetra tortor tincidunt sed. Nulla semper rutrum tristique. Integer sollicitudin dolor et lacinia accumsan. 
</p>
<p>
Integer sollicitudin dolor et lacinia accumsan.  <b class="lang">How about some foreign language text here if you don't use a translator and want to differentiate it? And hey, look, you can quote an English <b class="eng">word</b> in your foreign text, too.</b> Nullam sollicitudin felis nibh, et pharetra tortor tincidunt sed. Nulla semper rutrum tristique. Integer sollicitudin dolor et lacinia accumsan. 
</p>
<p>
<b class="npc-one lang">An NPC is talking in a foreign language.</b> Nullam sollicitudin felis nibh, et pharetra tortor tincidunt sed. Nulla semper rutrum tristique. Integer sollicitudin dolor et lacinia accumsan. 
</p>
<p class="time"></p>
<p>
Oh look, some time passed! Nunc viverra arcu at semper consectetur. Ut in est sed nulla tempor interdum.
</p>
<p>
<b class="npc-two lang">Another NPC is talking in a foreign language.</b> Nullam sollicitudin felis nibh, et pharetra tortor tincidunt sed. Nulla semper rutrum tristique. Integer sollicitudin dolor et lacinia accumsan. 
</p></div><div class="fr-credit-link"> Roleplay resource by <a href="http://forumroleplay.com">Forum Roleplay</a></div><style>.fr-credit-link{padding:10px 0;font-size:11px;font-style:italic;}</style>