RPG Templates Two

So you’ve read over the first part of the forum roleplaying game template tutorial and now you’d like to go deeper into template creation — maybe they’re even your new favorite type of RPG graphic. This second part of the tutorial teaches you to build several different styles of RPG post template — using HTML, CSS, and an image. Hand-built templates are perfect for setting the mood to your individual RPG posts, and can be easily customized to your roleplay character.

Note: This RPG graphics tutorial assumes you have read and are familiar with the CSS Tutorial. You’ll need to have an understanding of what we’re doing over there first.

Opacity Template

These RPG templates mimic the style of scroll style tables — without the scrolling.

The best part of the Funky Opacity RPG template is the background image for the inner section — it is a low-opacity (25%) white .PNG. This allows a transparent background without using CSS transparency. CSS transparency is easy enough to code and is now widely supported; however, CSS transparency has a big drawback. Child elements inherit opacity — if you make your main div tag lower opacity, there is simply no way to make the text contained within that div of a higher opacity. Using a transparent .PNG eliminates that issue.

The nice thing about these templates is that your inner section container is independent of your outer section. You can style it to your heart’s content and do some really fun things with it! Opacity templates are great for those who like really fancy RPG graphics — you can use a normal-sized PNG with some flourishes or some grunge brushing. Whatever you want, really!

Preview

Opacity Template Preview Image

Code

How Does it Work?

There’s one key difference — the .inner class.

.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;
}

The most important part is the background-image. For your convenience, Forum Roleplay offers a 25%, 50%, and 75% opacity, 1 pixel-sized, .PNG-formatted image in both black and white:

You can get a bit more intricate if you use colored .PNGs, too, but black and white images can be recycled through multiple tables. Remember, your .PNG image does not need to be larger than 1 pixel — repeating backgrounds make large images unnecessary, and the smaller your image, the less load time users sit through.

Here, we use the margin of the inner container to set where we want our transparent background to begin. We also give the inner container some padding since we don’t want it the text butting up against the edge of the container. We can also control our border — I’ve set both the border style as well as the border-radius (a CSS 3 trick which may not work in all browsers) here.

Scrolling Templates

Adding a scroll is fairly easy. In fact, this example uses the same base RPG template code as the previous template.

Warning! Caution! Take heed!

Scroll-style tables are unavoidably harder to read. Combine them with a few amateur mistakes such as low contrast or tiny font size — and you get an RPG template that is virtually unreadable. The only place scroll belongs is in an extremely long list information. Scroll-styled templates inhibit readability — no matter what you do. Their use outside of extremely long lists of information (e.g., a post log or thread archive list) is not recommended.

Preview

Scrolling RPG Templates Preview Image

Code

How it Works

height:350px; overflow:auto;

This tells the inner container to have a height of 350 pixels, and any overflow (content that is longer than the specified height) to scroll. This method, using both the transparent .PNG as well as the scrolling code, allows for easy positioning of the inner container for a set-sized RPG template.

Issues

Again — there aren’t enough ways to emphasis this — scrolling RPG templates are best utilized for long lists of information, not your roleplaying posts. The above method, using a gradient on the image and an inner div without scroll, nearly duplicates the look. If not for post logs and archives possibly needing to add scroll, this style of template would not be included in this tutorial.

  • Seriously, by default and design, they are simply harder to read and harder to use. It’s really important to remember the reader when you’re designing a template. They have to read your RPG post, after all. If they’re distracted by your table, it can be very frustrating.
  • Setting your height lower than 300 pixels severely impairs readability. The more a reader has to scroll, the harder it is to read the roleplay within your template.
  • On some mobile devices, scrolling templates do not function.

Separator Image Template

This is a rather versatile style of RPG template. You can style in not only a header, but you also get a image that separates your OOC and IC content. Without image gradients, too, this table will (probably) render correctly regardless of the user’s settings or outdated hardware. There’s never a guarantee, but the simpler you do things, the better chance of it working everywhere, so!

Preview

Separator Image RPG Template Preview Image

Code

How It Works

.freetable-b02-charname {} is just the styling for the “Character Name” portion, which can probably be clipped if you’re customizing the image in your table with a name.

.freetable-b02-b {} is an extra border around the primary border. Notice it is 402 pixels wide while our table is 400 pixels wide. If you guessed that’s to accomodate the inner div’s border, you’d be totally right. Note that this can now be accomplished with the (widely supported) outline property, which is a much simpler way of coding double borders. In some rare instances (aka generally not while coding an RPG template), you’ll still need a border wrapping div.

So, what does that leave us with?

.freetable-b02-separator {
   text-align:center;
   margin:2px 0px; 
   background-image:url(http://forumroleplay.com/resources/images/rpg-templates/free-rpg-template-separator-image.png); 
   height:193px; 
      border-width:1px; 
      border-style: solid none; 
      border-color:#F1AA58;
}

margin:2px 0px; tells the separator to have a margin (spacing between the outside of the div and whatever comes before or after it) of 2 pixels on top and 0 pixels on the bottom. background-image:url(…); is the image we wish to use as our table header.

height:193px; is the vertical height of our table image. It’s important to remember to change this variable, just like the padding on the inside of the div in part one.

The border is interesting — while we need a border on the top and bottom, if we put a border on the sides the table breaks and looks kind of funky. border-width:1px; border-style: solid none; border-color:#F1AA58; takes care of that. border-style: solid none; tells your header image to display a border on top and bottom and not on the sides. border-color is exactly what it sounds like — your desired border color. border-width is how wide your border is.

Issues

None. This RPG template is as readable as your color choices for the background and text colors.

Text Only RPG Template

Simple, “text-only” templates are awesome. Most of the time, text tables won’t even have an image. In this example, the image is a small, low opacity .PNG image in black. However, you don’t need an image with this style of table. They are intended only to modify the font, while leaving other aspects of the forum post alone.

Some roleplayers might look at text tables and wonder why they’d use something so plain and boring for their roleplay posts. Everyone loves fancy RPG graphics, right? In a sea of flashiness, you can focus on crafting good roleplay content. If your writing is blowing everyone else out of the water, who cares what their graphics look like? Additionally, it’s just refreshing sometimes to see pure roleplaying rather than an image with tiny tiny text, a big character name, and some flourish-y graphics. There’s more than one reason you might go with a text RPG template.

Preview

Text Only RPG Template Preview Image

Code

How It Works

There’s really not much to it — the div is set to have a margin of 0px on the bottom and 25px on each side, giving it a bit of padding from the edges of the post. The font is set via a few different styles, and the background is set. If you need further help understanding this table, you should probably go back over and read the other table tutorials first.

Do not change your font color when creating text RPG templates. As you are not changing the background color behind the font, if a user is on a different forum skin or if the RPG admin switches the skin, your text will not be readable. The whole point of these tables is for easy readability and simplicity; if you want colors and fancy styles, use a different type of table!

Issues

None, if done right. No, seriously — these RPG templates tend to have the fewest issues, provided users heed the font color rule. They are the least obtrusive and easily the most readable, and they can look really, really neat. Okay, so users on old versions of Internet Explorer still can’t see .PNG images — that’s their own fault for using a dinosaur-aged browser, right?

Auto-Generate Quotes for Any RPG Template

This is a technique that can be used across any RPG template. The :before and :after psuedo-selectors insert content before and after a specific element. Not only are they automatically generated, they’re curly quotes — the right kind of quotes (the ones we normally use on the computer keyboard aren’t really quotes!).

You can use “ and ” manually, sure, or even boring (incorrect) old “, but it’s so much better to automatically generate quotes. Automatically building quotes into your RPG templates allows you to focus on the important stuff — actually roleplaying.

Code

Preview

Auto-Quote RPG Post Preview Image

Code

Auto-Quote Example

OOC


ic text. speech. thoughts.

How This Works

It’s actually rather simple and really doesn’t require much explanation! Note that you can style your quotes differently than your bolded text. This is a neat added feature, but try not to go overboard — your quotes shouldn’t be too distracting and flashy.

#simple-text b:before { 
	content: open-quote; 
}
#simple-text b:after {
	content: close-quote;
}
#simple-text b:before,#simple-text b:after {
	font-family:'times new roman', times, serif;
	font-size:14px;
	font-weight:normal;
}