Forum Roleplaying Resource Downloads

Downloads: Responsive Flexible Table

Preview

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

/* speech */	
.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; }

/*"lang" class denotes languages other than english, especially useful if you do not use a translator*/
.PLAYER-responsive-text-table b.lang { }
.PLAYER-responsive-text-table b.lang:before { content:'<'; }
.PLAYER-responsive-text-table b.lang:after { content:'>'; }

/* NPC speech -- one, low opacity and bold/italic */
.PLAYER-responsive-text-table b.npc-one { 
	font-style:italic;
	font-weight:bold;
		filter:alpha(opacity=65%);
			opacity:.65;
}

/* NPC speech -- two, low opacity and italic */
.PLAYER-responsive-text-table b.npc-two { 
	font-style:italic;
	font-weight:normal;
		filter:alpha(opacity=65%);
			opacity:.65;
}
/* used for Word of the Day */
.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;
}
/* insert three asterisks into your post with:

<p class="time"></p>
	
used to denote an instance of passed time.*/
.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: ''; }
/* Desktops and laptops ----------- */
@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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

Downloads: Lyrical Free RPG Template

Preview

Information

Code

<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, erat at egestas congue, leo felis ultricies sapien, quis pretium mi nibh nec erat. Nullam a venenatis risus. Vestibulum fermentum ultrices semper. <b>“Donec pellentesque condimentum pretium.”</b>
</p>

<div class="freetable-a01-header">
	Character Name
	<p>
		hello i am a line of lyrics;
	</p>
	<p>
		hello i am a second line of even better lyrics.
	</p>
</div>

</div>
</div>
<style>
.freetable-a01 .ft-ooc {
	font-style:italic;
}
.freetable-a01 p {
	padding:3px 20px 3px 20px; 
	margin:0px; 
	text-indent:35px;
}
.freetable-a01-header {
	font-size:25px; 
	text-align:right; 
	padding:10px 20px; 
	text-transform:lowercase; 
	color:#FFCC00; 
	text-shadow:#4C2D11 0px 0px 5px;
}
.freetable-a01-header p {
	padding:0;
	text-indent:0;
	text-align:right;
	color:#3e3215;
	font-size:12px;
	text-shadow:none;	
}
.freetable-a01-header p:nth-of-type(1) { 
	padding-top:3px;
}
.freetable-a01 b {
	color:#3e3215; 
	letter-spacing:-.2px;
}
.freetable-a01 {
	background-color:#FED365; 
	background-image:url(/resources/images/rpg-templates/free-rpg-template-lyrical.png); 
	background-position:bottom center; 
	background-repeat:no-repeat; 
	padding:10px 0px 50px 0px; 
	border:1px solid #FFCC00; 
	font-family: georgia, serif; 
	font-size:12px; 
	color:#6E571D; 
	letter-spacing:.4px; 
	word-spacing:.3px; 
	line-height:16px; 
	width:400px; 
	text-align:justify; 
}
.freetable-a01-border {
	width:402px; 
	border:1px solid #000000; 
	margin:0px auto; 
}
.freetable-a01 .ft-separator{
	width:250px; 
	border-bottom:1px dotted #A67C15; 
	margin:0px auto;
}
</style>
<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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

Downloads: Multiple Character Free RPG Template

Preview

Information

Text-shadow effects are applied to the In Character and Out of Character headers on this free RPG template. More importantly, you can also use the different bold classes to assign as many different NPC/other character speech colors as you’d like. This is great for players in RPGs with many NPCs or side-characters.

Code

<div class="freetable-c03-b">
		<div class="freetable-c03">
		<div class="freetable-c03-header">
			Out of Character
		</div>
		<p class="freetable-c03-ooc">
			ooc text. 
		</p>
		<div class="freetable-c03-header">In Character</div>
		<p>
			ic text. <b>speech</b>. <b class="npc">npc speech</b>. <i>thoughts</i>.
		</p>
	</div>
</div>
<style>
.freetable-c03 p {
	padding:0px 20px 10px 20px; 
	margin:0px; 
	text-indent:30px;
}
.freetable-c03 b {
	color:#171816;
}
.freetable-c03 b.npc {
	color:#dcdcdc;
}
.freetable-c03-b {
	width:402px; 
	border:1px solid #000000; 
	margin:0px auto;
}
.freetable-c03-header {
	font-family:georgia, serif; 
	color:#DDE6CF; 
	text-shadow:#1C0A00 0px 0px 4px; 
	float: right; 
	margin:5px; 
	text-transform:uppercase; 
	font-size:15px; 
	font-weight:bold; 
	letter-spacing:1px;
}
.freetable-c03-header:nth-of-type(2) { 
	clear:both; 
}
.freetable-c03-ooc {
	font-family:verdana, sans-serif; 
	font-size:11px; 
	letter-spacing:.4px; 
	font-style:italic; 
}
.freetable-c03 {
	background-color:#ABAEA6; 
	padding:0px 0px 10px 0px; 
	border:1px solid #DDE6CF;
	font-family: georgia, serif; 
	font-size:12px; 
	color:#474844; 
	letter-spacing:.3px; 
	word-spacing:2px; 
	line-height:14px; 
	width:400px; 
	text-align:justify; 
	background-image:url(http://forumroleplay.com/resources/images/rpg-templates/free-rpg-template-multiple-characters.png); 
	background-position:bottom center; 
	background-repeat:no-repeat; 
	padding:10px 0px 240px 0px; }
</style>
<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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

Downloads: Character Thoughts Free RPG Template

Preview

Information

A simpler free RPG template using text-shadow and font color effects to give an outlined appearance to the character’s name. It also offers customized italics tags for your character’s thoughts. When styling character thoughts, it helps if your thought tags aren’t as emphasized (color and style wise) as your speech tags.

Code

<div class="freetable-d04-b">
	<div class="freetable-d04">
		<p class="freetable-d04-ooc">
			ooc text.
		</p>
		<p>
			ic text. <b>speech</b>. <i>thoughts</i>.
		</p>

<div class="freetable-d04-name">
			Character Name
		</div>

</div>
</div>
<style>
.freetable-d04 p {
	padding:0px 20px 10px 20px; 
	margin:0px; 
	text-indent:30px;
}
.freetable-d04 b {
	color:#171816;
}
.freetable-d04-b {
	width:402px; 
	border:1px solid #000000; 
	margin:0px auto;
}
.freetable-d04 i {
	color:#b6d682; 
}
.freetable-d04-name {
	font-family:georgia, serif; 
	color:#768D50; 
	text-shadow:#000000 0px 0px 1px; 
	margin:5px; 
	text-transform:uppercase; 
	font-size:25px; 
	font-weight:bold; 
	letter-spacing:1px; 
	text-align:right; 
	padding:0px 25px;
}
.freetable-d04-ooc {
	font-family:arial, helvetica, sans-serif; 
	font-size:12px; 
	letter-spacing:.4px; 
	font-style:italic; 
}
.freetable-d04 {
	background-color:#768D50; 
	border:1px solid #DDE6CF; 
	font-family: georgia, serif; 
	font-size:12px; 
	color:#2A331A; 
	letter-spacing:.3px; 
	word-spacing:2px; 
	line-height:14px; 
	width:400px; 
	text-align:justify; 
	padding: 3px 0px;
}
</style>
<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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

Downloads: Rounded Border Free RPG Template

Preview

Information

Another table using CSS3 effects, including text shadow and rounded corners.

Code

<div class="freetable-e05-b">
	<div class="freetable-e05">
		<div class="freetable-e05-name">
			Out of Character
		</div>
		<p class="freetable-e05-ooc">
			ooc text. 
		</p>
		<div class="freetable-e05-name">
			In Character
		</div>
		<p>			
			ic text. <b>speech</b>. <i>thoughts</i>.
		</p>
	</div>
</div>
<style>
.freetable-e05 p {
	padding:0px 20px 10px 20px; 
	margin:0px; 
	text-indent:30px;
}
.freetable-e05 b {
	color:#C6DAED;
}
.freetable-e05-b {
	width:402px; 
	border:1px solid #000000; 
	margin:0px auto;
	border-radius:6px;
		-webkit-border-radius: 6px; 
		-moz-border-radius: 6px; 
	}
.freetable-e05-name {
	font-family:georgia, serif; 
	color:#D3E2F1; 
	text-shadow:#09121A 0px 0px 5px; 
	margin:5px; 
	text-transform:uppercase; 
	font-size:16px; 
	font-weight:bold; 
	letter-spacing:1px; 
	text-align:center; 
	padding:0px 25px;
}
.freetable-e05-ooc {
	font-family:arial, helvetica, sans-serif; 
	font-size:12px; 
	letter-spacing:.4px; 
	font-style:italic; 
}
.freetable-e05 {
	background-color:#465B6E; 
	border:1px solid #C6DAED; 
	font-family: georgia, serif; 
	font-size:12px; 
	color:#141B21; 
	letter-spacing:.3px; 
	word-spacing:2px; 
	line-height:14px; 
	width:400px; 
	text-align:justify; 
	padding: 3px 0px; 
	border-radius:6px;
		-webkit-border-radius: 6px; 
		-moz-border-radius: 6px; 
}
</style>
<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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

Downloads: Lifted Name Free RPG Template

Preview

Information

This one raises the name up above the table using negative margins. Also uses CSS3.

Code

<div class="freetable-f06-name">
	Character Name
</div>
<div class="freetable-f06-b">
	<div class="freetable-f06">
	<p class="freetable-f06-ooc">
		ooc text.
	</p>
<div class="freetable-f06-divider"></div>

<p>
	ic text. <b>speech</b>. <i>thoughts</i>.
</p>

</div></div>
<style>
.freetable-f06 p {
	padding:5px 20px; 
	margin:0px; 
	text-indent:30px;
}
.freetable-f06 b {
	color:#E5CDB6;
}
.freetable-f06-b {
	width:402px; 
	border:1px solid #000000; 
	margin:0px auto;
	border-radius:6px;
		-webkit-border-radius: 6px; 
		-moz-border-radius: 6px; 
}
.freetable-f06-name {
	font-family:georgia, serif; 
	color:#27180A; 
	text-shadow:#F8E1CA 0px 0px 5px; 
	margin:-7px auto; 
	text-transform:uppercase; 
	font-size:25px; 
	font-weight:bold; 
	letter-spacing:1px; 
	text-align:right; 
	padding:10px 25px 0px 0px; 
	width:350px;
}
.freetable-f06-ooc {
	font-family:arial, helvetica, sans-serif; 
	font-size:12px; 
	letter-spacing:.4px; 
	font-style:italic; 
}
.freetable-f06 {
	background-color:#8F7154; 
	border:1px solid #E5CDB6; 
	font-family: georgia, serif; 
	font-size:12px; 
	color:#352516; 
	letter-spacing:.3px; 
	word-spacing:2px; 
	line-height:14px; 
	width:400px; 
	text-align:justify; 
	padding: 3px 0px; 
	border-radius:6px;
		-webkit-border-radius: 6px; 
		-moz-border-radius: 6px; 
}
.freetable-f06-divider {
	border-bottom:1px dotted #E5CDB6; 
	width:85%; 
	margin:0px auto;
}
</style>
<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; } 
  /* Reminder: do not remove this credit link, as per the terms of Forum Roleplay's licenses (http://forumroleplay.com/about/license/)*/
  </style>

RPG Resource Downloads

Do Not Remove Credit

Download Category: Post Templates

Downloads: Responsive Flexible Table

Preview

Information

Code

Downloads: Lyrical Free RPG Template

Preview

Information

Code

Downloads: Multiple Character Free RPG Template

Preview

Information

Code

Downloads: Character Thoughts Free RPG Template

Preview

Information

Code

Downloads: Rounded Border Free RPG Template

Preview

Information

Code

Downloads: Lifted Name Free RPG Template

Preview

Information

Code