Writing Better Roleplay Code

Warning! Advanced resource, tutorial, or technique.

This is different from the other RPG template tutorials in that it is intended for general improvements and expanding knowledge. You won’t find any RPG templates here, unfortunately. This tutorial aims to build on top of RPG Templates Tutorial Part One and RPG Templates Tutorial Two. It offers general CSS coding knowledge and is useful beyond just roleplaying code. The information herein can be used anywhere you code CSS.

And, hopefully, this will help un-teach some bad practices from prior tutorials and roleplay code resources Forum Roleplay once offered!


Format Your Code

One of the biggest problems with prior versions of offered roleplay codes was a simple one: the formatting and code spacing was bad. There were a lot of examples and resources with poorly formatted code! Let’s take an example from RPG Templates Tutorial Two:

.op-tbl .ooc {font-style:italic; }
.op-tbl p {padding:2px 0px; margin:0px; text-indent:35px;}
.op-tbl b {color:#CBCACA; letter-spacing:-.2px; text-shadow:#000000 2px 2px 2px; }
.op-tbl {background-color:#000000; background-image:url(http://forumroleplay.com/resources/images/rpg-templates/free-rpg-template-opacity.png); background-position:top center; background-repeat:no-repeat; border:2px solid #FFFFFF; font-family: georgia, serif; font-size:12px; color:#FFFFFF; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:475px; text-align:justify; }
.op-tbl-border {width:479px; border:1px solid #000000; margin:0 auto;}
.op-tbl .inner {margin:120px 10px 10px 10px; padding:10px; background-image:url(http://forumroleplay.com/resources/images/rpg-templates/png-pixels/25pct-white.png); border:1px solid #000000; border-radius:20px;-moz-border-radius:20px; -webkit-border-radius:20px;}

Super-fun to read, right? No!

From 2009-2010, Forum Roleplay’s webmaster coded ‘Souls RPG forum profiles with custom CSS. The fun was that the forum software automatically inserted line breaks into character profiles. This meant code needed to look like this to work properly in profiles:

<style>.op-tbl .ooc{font-style:italic;}.op-tbl p{padding:2px 0px; margin:0px; text-indent:35px;}.op-tbl b{color:#CBCACA; letter-spacing:-.2px; text-shadow:#000000 2px 2px 2px;}.op-tbl{background-color:#000000;background-image:url(http://forumroleplay.com/resources/images/rpg-templates/free-rpg-template-opacity.png); background-position:top center; background-repeat:no-repeat; border:2px solid #FFFFFF; font-family: georgia, serif; font-size:12px; color:#FFFFFF; letter-spacing:.4px; word-spacing:.3px; line-height:16px; width:475px; text-align:justify;}.op-tbl-border {width:479px; border:1px solid #000000; margin:0 auto;}.op-tbl .inner {margin:120px 10px 10px 10px; padding:10px; background-image:url(http://forumroleplay.com/resources/images/rpg-templates/png-pixels/25pct-white.png); border:1px solid #000000; border-radius:20px;-moz-border-radius:20px; -webkit-border-radius:20px;}</style>

That’s atrocious, yes? Yeah, it is — editing code like that is not fun! It’s definitely not intuitive at first, but there are methods of spacing, indenting, and otherwise formatting your code to lend easy readability for humans when they edit your code (namely, you — but this is also useful if you ever want to put your code out there for others to use, too).

Let’s take just a piece of the prior stylesheet and give it some formatting:

.op-tbl .inner {
	margin: 120px 10px 10px 10px;
	padding: 10px;
	background-image: url(http://forumroleplay.com/resources/images/rpg-templates/png-pixels/25pct-white.png);
	border: 1px solid #000000; 
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;

Look at how much nicer it is when you give some indent to your CSS properties. Space between the property and the value is optional — CSS beginners may find spacing more readable. Alternatively, you may find it more readable to hit space three times to indent instead of tab. It doesn’t really matter how you format your CSS (if it’s just a snippet of CSS for you — if it’s a project with multiple people, you should set down some rules for CSS formatting before you write a single line to avoid esoteric formats or multiple formats in the same stylesheet). Just make sure it’s readable, and be consistent.

The same thing applies to HTML:

<div class="op-tbl-border"><div class="op-tbl"><div class="inner">
<p class="ooc">OOC here!</p>

<p>Lorem ipsum dolor sit amet...</p>


<div class="op-tbl-border">
    <div class="op-tbl">
        <div class="inner">
            <p class="ooc">
            OOC here!
            Lorem ipsum dolor sit ...

It’s now much easier to edit this HTML and replace your “OOC here!” with OOC text when you use this RPG template. It’s much easier to keep your roleplay separate from your roleplay code. Many writers, even those proficient with HTML and CSS, find it jarring to go from writing to coding (even minor tags). If you are making a post template for someone unused to HTML and coding, this is typically very helpful. They will find it easier to use your roleplay code.

Organize Your CSS

You can also organize your CSS properties. Some people like to do it alphabetically, but I kind of like chunking them by what they do. Again, as with formatting, your chosen method of property organization shouldn’t matter too much as long as it’s consistent. The point is to list similar things together (e.g., fonts and text styles in one group, then borders and backgrounds in another group). It saves time, especially when you have a very long list of properties. Again, This doesn’t really matter for the brief snippets of CSS you write for post templates, again, but it’s an excellent habit to get into if you ever want to write longer stylesheets.

In fact, because roleplay code is generally so brief, to better illustrate the point: a few snippets of CSS (LESS, actually, but the difference is minute — just don’t try and use this as regular CSS, it won’t work) from the Forum Roleplay website itself:

#toc {
	padding: 15px; 
	margin: 10px;
	width: 250px;	
	float: right;
	background-color: @offWhite;
	border: 1px solid @jadeGreen;
	font-size: 13px;
	text-align: left;
	line-height: 18px;

All of your foundational properties are in the first group, your foundational colors in the second, your fonts and text stylings in the third.

The point is, you’ll also organize your other selector properties in this manner. You’ll always know to adjust the foundational elements, you look at the first group; to adjust colors and font sizes and other thematic things, you’ll look at the next group. Some CSS coders also group large properties (e.g., gradients with fallback for all browsers) together in their own separate group.

Though this is admittedly a difficult system to implement if you’re used to writing code willy-nilly, it is recommended. Beginners especially, who will need to troubleshoot frequently, may find a more streamlined system of organization better for their needs.

More on CSS Organization and Efficiency

These resources are quite advanced and very useful beyond roleplay code. Beginners may not want to risk a click!

Expand and Improve

Right Now!

If you still do these things, stop doing them and get some instant improvement.

  • Stop writing in Notepad. Go get Notepad++.
  • Stop worrying about IE6. There’s no reason to do so outside of some extremely specific applications anymore, or if you know your userbase frequents IE6. Most roleplayers are technically efficient enough to at least be using the most recent version of IE, if not Chrome or Firefox. Roleplay code, therefore, should be designed for IE 8 and above (as of 2012, anyway).
  • Stop guessing what style goes where. In Chrome and Firefox, right click on a page element (anything — headers, backgrounds, etc.) and click Inspect Element to bring up your developer tools. This will tell you exactly what that element is and how to write CSS targeting it. (Caveat: don’t write CSS like #wolf-table #header p.header-paragraph strong).


If you’re content just taking roleplay codes and modifying them, that’s fine. If you want to go beyond, though, and maybe get into making websites, or coding really complicated things? Start tinkering. Make your own project, and start putting work into it. Don’t be afraid to Right Click and View Source to see how someone coded something. Curiosity is a huge and sometimes not-so-obvious part of learning.

Make sure you ask before you use any “borrowed code” in a public project (and especially if you use it in a paid project). Personal tinkering — e.g., making a private to-do list on your own web server, using a piece of code you took from someone’s website — should be fine. If you’re tinkering for the public eye and showing off your work, use free resources instead of borrowing.

Even with free resources, make sure you give credit where credit is due — you’ll notice Forum Roleplay has an entire Credit section dedicated to just this.

Save and Revert

Afraid to tinker with roleplay code? One thing I run into over and over again with computer and technical related things — people are really afraid to experiment, especially as they’re learning. There are two important things to remember on a computer:

  • Saving the current state of your work’s progress. Did you do something that works, but it only partially accomplishes your intent? Okay — save a separate, working copy of your file. Then, keep working.
  • Reverting to your prior, part-working version if, during your working and continued experimentation, you’ve broken things irreparably (or if it simply becomes easier to undo it all in one fell swoop). It’s essentially a save point in your game — just as when playing Fallout if you said the wrong thing during an interaction, you can revert to before the interaction and try again.

This works for a variety of things — coding, images, etc. There are even neat programs that allow you to save various states and revert easily, especially for code. For images, just save your image as something like filename_ver1 or whatever’s most sensible to you.

Fear of experimenting is probably pretty natural because in the real world, if you screw something up you could break it entirely. It also applies to computer hardware, which is grounded in the real world, unfortunately. However, once you’re actually on a computer and interacting with software — whether that’s learning how to use a mouse your first time or creating a script from scratch — there’s the loveliness of saving your state and reverting if something goes wrong.

Go Beyond Roleplay Code

The tutorials offered here at Forum Roleplay are the absolute bare minimum. Aside from that, they are written especially as roleplay code. The snippets you’ll find on this site are very specific and restricted in terms of functionality. They’re not complicated pieces of HTML or CSS. One of the best things you can do is to start going through CSS tutorials outside of this site.

Stay away from most “big tutorial” sites (e.g., any site that purports to teach you all of CSS, etc.). If there’s something specific you want to do, Google it — someone has probably made a tutorial specific for the thing you want to do. Those are much more useful for understanding concepts and explanations than “big tutorial” sites. The only thing you may need a tutorial for is understanding the very basic parts of CSS (e.g., definitions of selectors, properties, values, etc.).

This is intentionally vague and in hopes of avoiding recommending specific sites — Google should be your first resource. The reason is simple — while a site may be great in general, there’s no way a huge site (or even a small one) can be entirely free of error. There is little advantage to using an internal site search unless you are already aware of the resource’s existence on that site.

That said, css-tricks.com is excellent for everything, and you can’t go wrong with stackoverflow.com if you have a question (someone has probably asked it before).

Leave a Reply

Your email address will not be published. Required fields are marked *