RPG Templates One

Learn how to code a HTML and CSS RPG template. These RPG templates are flexible, easy to edit, and easy to use (when done correctly). They can be used to create a very basic style, or something more complicated.

Feel free to recycle the coding and the table exactly as it stands if you’d like. However, this tutorial should help you understand how it works so you can code your own RPG templates of all types. This isn’t just for posts — rules documents or forum skins as RPG admins, character thread archives, and so forth. The skills you learn herein can later be applied to a myriad of different projects!

The Most Basic HTML & CSS RPG Template (Ever)

Preview

RPG Post Templates Preview Image

Code

Section I: HTML Tags

<div class="character-a01">

This is your div. A “div” is a division of the page — your HTML code says, in English, this specific section of the page should have this CSS class applied. This snippet of code essentially establishes your RPG template on the page.

Naming Your CSS Class

Each of your RPG templates must have a unique class name — here it is “character-a01.” If you reuse the same class name twice, your layouts will overlap. I suggest your character’s name, and either a meaningful phrase — e.g., your roleplay characters’s name — or a randomized string like “a01” “b02” “c03” or whatever.

They just have to be unique for each RPG template you build in this manner. It doesn’t really matter if the name is meaningful or not; you don’t want a simple name like “table” because it’s possible that the page CSS already uses that simple class; this can cause strange and unexpected behavior. Generally, make it just unique enough without being insanely complicated — there’s no need to name it character04849294593495394534 or anything ridiculous like that.

Also, don’t start them with numbers. Some versions of Internet Explorer eat your class name if you start it with a number.

Out of Character Section

<p class="ooc">

This controls your out of character text. Obviously, this only appears once. This simply sets your paragraph of Out of Character text apart from the remainder of your RPG template’s text with a bit of different formatting.

<p> and <b> tags

The formatting for the RPG post itself is extremely simple. Use a <p> tag to start your paragraphs and give it that neat indent. Use a <b> tags for speech — no need to use individual color tags on your bold tags because of the way we define the bold tags within “character-a01” via CSS.

Style Tags

<style> tags

You write the CSS between these tags. This part is really important, so the next section covers everything herein.

Section II: CSS Styling

.character-a01 b {...}

This controls your speech formatting by applying a specific style to every bold tag within your RPG post template. Because you only need enclose your speech with <b> and </b> it’s a lot less complicated than trying to do everything with inline CSS (e.g., <b style=”font-color:white; text-shadow:1px 1px 0 #000;”>). Use the font formatting declarations found in the next section to set your speech font apart from the rest of your text.

.character-a01 p {...}

This controls every paragraph tag’s formatting within your RPG template. Basically, the only things you should change here are your indent and padding between the paragraphs. Padding and margin are very similar (especially to CSS beginners) so use one or the other. Padding is safer and generally easier for newcomers to CSS to figure out.

text-indent:25px;

This controls the indent on each of your paragraphs. 25 to 50 pixels generally works well for the indent. You don’t absolutely need a paragraph indent (especially if you have a lot of padding or margin between each of your paragraphs). Conversely, without spacing between your paragraphs, an intend is suggested to avoid “text-wall” styled posts. Indents help the reader determine where one paragraph ends and the next begins.

padding:5px 10px;

This tells the paragraphs to have 5px of padding before and after each paragraph, and 10px on the side of each paragraph. This is so you don’t have to use unnecessary line breaks between the paragraph tags. If you want different values on top and bottom, you can use top right bottom left type values, like so: padding: 10px 5px 20px 5px which gives 10px on the top, 5px on the right, 20px on the bottom, and 5px on the left.

margin:0px;

This makes sure the paragraph tags aren’t rendered with a margin. TIP: The “px” part is not necessary when setting a property to zero. It’s zero, so why does it matter how that zero is measured? Newcomers to CSS may find it easiest to retain the measurement, however.

.character-a01 .ooc {...}

This controls your out of character text. You can use the font formatting values found in the next section to set the OOC text in your RPG template apart from your IC text. The classes are nested, so that only the ooc CSS class within the RPG template (“character-a01”) are affected.

.character-a01 {...}

This is the real meat of the stylesheet. All of the values to control your RPG template are located here. Without this part of the CSS, your template would pretty much be the board’s normal text.

margin:0px auto;

This controls the centering of your table so you don’t have to use <div align=”center”> or <center> to center it. Centering the div itself could have unexpected consequences and requires a lot of extra formatting to get it to display correctly. The center tag is deprecated (that is, no longer recommended for use).

width:400px;

This controls how wide your table is. The maximum width of your RPG template depends on your RPG forum skin. Less than 300 pixels wide for may be too thin for easy readability, depending on your other text stylings.

background-color:#369FCC;

This controls your table’s background color. If you use a gradient in your image to fade the image into the RPG template’s solid background color, make sure this color matches the very end of your gradient’s color spectrum, otherwise it will appear to be mismatched.

background-image:url(http://forumroleplay.com/resources/images/rpg-templates/free-rpg-template.png);

This controls your table’s header or footer image and turns your RPG template into a true RPG graphic. This doesn’t require anything but that you replace the URL with your own image’s URL.

background-repeat:no-repeat;

You generally don’t want the RPG template’s header or footer image to repeat, so the only acceptable value is no-repeat, which makes the background image appear only once.

background-position:bottom center;

This controls the positioning of your header or footer image and decides whether it’s a header or a footer. For a header image at the top, use top center. For a footer image at the bottom of youir RPG template, use bottom center.

border:1px solid #000000;
other values: dotted, dashed, double, groove, ridge, inset, outset

This controls the border of your table. The most simple border styling is offered here — one pixel wide, solid, and in the color black. Changing the color should be sufficient for most people, but of course, there are infinite ways to get fancy here.

Shorthand

padding: 10px 0px 167px 0px;

Four-value properties are always clockwise — top right bottom left.

Longhand

padding: 0;
padding-top: 10px;
padding-bottom: 167px;

You don’t need padding:0; unless you are overriding some previous style applied (you probably aren’t). It may be most comfortable for you to explicitly declare zeroed values in CSS, but understand it’s not necessary when building a CSS class from scratch on elements like a div.

This controls the padding of your table. This code tells the table to have ten pixels on top (since we want some space between the beginning of the table and our text), zero pixels on the right, 167 pixels on the bottom, and zero pixels on the left.

The part about 167 pixels is important — this is the distance from the bottom of our image to where we want the text to start. Of course, if you have a header image, you’ll need to set the first value to 167 pixels (or whatever that variable is for your image) and the third value to 10 pixels to tell our table. Basically, this just inverts what we just did and makes it work for the top of the table rather than the bottom.

There’s a great extension, MeasureIt that allows you to take pixel measurements right within Firefox, but of course it’s possible to measure out the distance in your graphics editor or even just guessing and adjusting from there.

text-align:justify;
other values: left, right, center

This controls the alignment of your text. The default value is left, and it’s suggested you leave this alone. However, many people do like the look of justified text. It should be noted, however, that justified text can decrease readability for the user — especially in thin-width containers (which RPG templates usually are).

Right and center alignment should be avoided for paragraphical text intended to be read. They both decrease readability.

font-family, font-size, color, line-height, letter-spacing

This controls the primary text face of our table. See more on these in the next section.

Section III: Font Styling

Essentials

font-weight: bold;
other values: normal

Usually in an RPG template, you want your speech bolded, but if you don’t want your speech bolded, you can still use the <b> tag to set your speech apart and set the font-weight to normal.

color: #000000; 

Remember to include your number sign (#) otherwise your color may not display.

Remember not to use anything that jars against your background color too much; there are numerous testers available on the web to see how well your colors mesh together. Also remember to contrast accordingly — dark, dark gray on black might appear stylish, but it’s nearly impossible to read for others. Take the readers into consideration when you’re constructing post templates.

font-style:italic;
other values: normal, oblique

This is used primarily for setting fonts to italicized text. You can also use oblique, but it’s virtually indistinguishable from italics and is not supported as widely as italics, so beware. Normal is the default value.

Fonts in RPG Templates

font-family: georgia, serif;

Set your font face by specifying your font stack. Font stacks are, essentially, a list of different fonts the computer will run through — until it finds a font it has. If it does not find a matching font, the computer will default to whatever its default font is. The default font on a given computer can be wildly different from your font choice.

Make sure you specify a good font stack by using fonts that many computers have — known as web-safe fonts. Alternatively, you can use a font-embedding service such as Google Web Fonts.

Remember, specify the generic font font last (even when using an embedding service). If you use a serif font like Georgia, Palatino Linotype, or Times New Roman, specify serif after that. Or, if you’re going for Verdana, Arial, or Trebuchet MS, specify sans-serif.

When you use a font that has spaces in the name — e.g., Times New Roman or Trebuchet MS, enclose them with quotation:

"Times New Roman"
'Trebuchet MS'

Effects to Use Sparingly in RPG Templates

letter-spacing: 0px;

You can change your text’s letter spacing (the space between each character). Negative values and positive values are acceptable. Most fonts don’t look good with more than 1px either way, and playing with letter spacing can hurt readability. Decimal values are acceptable when you use ems — .03em or .2em for example, or -.2px or -.3px are also acceptable (note: decimal pixel values may not display properly).

word-spacing:1px;

You can change your RPG template’s text word spacing (the space between each word). This functions in the same way as letter-spacing, it just controls the space between the words. Again, playing with this can hurt readability. This sentence has a word spacing of negative 2 pixels, and this one has a word spacing of 4 pixels.

font-variant:small-caps;
other values: normal

This presents the font in all-caps. The beginnings of sentences and Other Capitalized Words appear larger than the rest of the text. It’s not good to use this for speech too often and it’s especially poor form to use this for all of your RPG template text. Instead, use it for IC and OOC headers or other decorative elements (lyrics, the character’s name, etc.).

text-transform:uppercase;
other values: none, lowercase, capitalize

This presents the font either in all-caps, all lowercase, or with the beginning of each word capitalized.

Use sparingly. It might “look good” to you for all lowercase in your posts, but it puts unnecessary strain on the users and can annoy the crap out of some peoples’ inner grammarians. These are rarely useful in making RPG templates. Again, reserve them for headers and decorative elements rather than roleplay text and other content that is meant to be read.

text-decoration:underline;
other values: none, overline, line-through

Text decoration is just that, decoration for your text: underlining text, giving text an overline, or a strike-through style.

There aren’t many uses for these. These should primarily be used for headers; you might like to underline your speech if you want to set it apart (it’ll probably look gross, though). However, none of these should be used for your primary text control as they’re distracting, eye-catching effects: they are contrary to readability by default.