HTML/CSS template for monsters

I figured this could come in handy for some people. It's a template for monster stat blocks in HTML and CSS. Basically, just copy the table and fill in the blanks. Copy any lines you might need more than 1 of (for example, powers).



I'm using attack icons are from Daelkyr's 4e D&D icon font. It's simple enough to replace it with images, if you have them.

[sblock=A note on classes to use with the power template]

Power type
Use the class of the thead tag to color the head according to color type.

<thead class=atwill>
<thead class=encounter>
<thead class=daily>

Indenting:

If your power makes a secondary attack, all the secondary potions should be indented.
Indent them by giving the tr the indent class

i.e. <tr class=indent>

Coloring:

The coloring of lines in the PHB is inconsistent, but generally seems to color every other line, starting with the hit line.
You have 3 options for coloring.

1. Solid color. Easiest. Doesn't require any images. Doesn't look so hot.
2. gif: Looks good but only works on a white background.
3. png: Looks good on any color background, but not supported by some browsers

if png works for you, I recommend going with that.

Solid colors:
Use the color and indentcolor classes
i.e. <tr class=color> and <tr class=indentcolor>

gifs:
Use the backgif and indentbackgif classes
i.e. <tr class=backgif> and <tr class=indentbackgif>

pngs:
Use the backpng and indentbackpng classes
i.e. <tr class=backpng> and <tr class=indentbackpng>

[/sblock]

Incidentally, does anyone else think it'd be cool to have an XML format for monsters? Would make it easy to share them and create programs for making and editing them.

Good idea, pretty nice. Think you could retrofit this to work with powers?

Working on it right now. Unfortunately, it's considerably more complex than the monster stat block, since there's tons of optional things. Plus, the formatting's not consistent. Instead of, for example, attack always being the same background color, the background colors alternate, meaning you need to manually take care of that yourself.

Ok, all done. I've included them in there.

Also, you've got 3 options for the backgrounds on the powers.

First, you can use a solid color. Doesn't look like the book, but it's easiest to do and doesn't require any images.

Second, you can use a gif. Only works on a white background, but it works with all browsers.

Third, you can use a png. Works on any color background, but not all browsers support it fully (notably, older version of Internet Explorer).

I included a png and gif image in the zip file for the background, as well as instructions for using each. You can see examples of all 3 in the screenshot, though the png and gif look identical because it's a white background. The png will blend into any colored background, though.

Very nice.