4e Styling Templates
Do you love the robust templating that characterised D&D4e as an edition, particularly in the official book releases? I sure do. Want to make your homebrew content match that templating as closely as possible? Then this is the "book" for you. These templates (and the included CSS) will help you make your own 4e content look as shiny and official as possible.
Source Material
Since there is some variance across the official releases, I'll note that the colours here are derived from the 4e era of digital Dragon/Dungeon magazines. In my mind, this was the best way to get the "correct" colours, without being influenced by individual colour vision, print/scan quality, monitor calibration, et cetera.
The templates here are not exhaustive; I don't have time to comb every official book for every official style. But, they should be plenty to get you started! I've based my work on the original 4e books over the Essentials books, because the pre-Essentials material is more uniform in structure. However, I'll be using more modern stat blocks for things like monsters, since I believe they're more useful in play.
Obviously, if you disagree with those choices, you're free to adapt this template however you like for your own content! And if you'd like me to add CSS for something I left out, feel free to ask.
Fonts
As you may notice, the fonts used here are not an exact match. This is because the fonts used in the official books (Mentor Sans, and others) would cost a few hundred bucks, so not exactly a practical choice for homebrew. Instead, we're using these free fonts as reasonably close matches:
- Source Sans Pro for body text
- Asul for stat block (powers, monsters etc.) text
- Vecna for top-level headings
- Marcellus SC for subheadings. This is the least good lookalike; please contact me if you have a good (legal) suggestion!
Please note that most of these fonts are not free for commercial use. If you intend to make a profit from your homebrew, you must acquire your own font licenses!
Images
Aside from those provided by GMBinder itself, the images used here are my own work and for demonstration purposes only. You may not reuse them in your own content. If you're looking for affordable art, I encourage you to support some of the many talented artists now providing stock art on sites like DriveThruRPG.
Phrasing
While I've mostly tried to stay totally true to the official material, I have changed one or two terms from the official templates. In particular, I've been referring to "race" as "heritage" in my homebrew material for some time now, so that's what this template uses too.
If you have a problem with that, nothing is stopping you from changing it back—so please don't bother me complaining about it.
Also I'm not going to use American English, and you can't make me.
Credits
This template is provided by Fox Lee (fox@ munchlax.org) and is free for you to use in your own homebrew work, within the exceptions noted in this introduction. I originally put together the colour CSS for my 4e Homebrew sites, Skies of Escarnum and The Square Fireball, and have provided them here by request. If you find this template useful, I would appreciate a link in your project!
While complete for now, this document will probably see updates in the future. Please feel free to suggest as much if you like.
Enjoy, go forth and go fourth!
— Fox
General Text Styling
Here's a page to demonstrate general text styling under this template. The heading at the top of the page is a level one heading, while the rest are displayed below. (We'll use nonsense text for the rest of the page, since I have nothing more to say on this.)
Heading 2
Breath weapon caster level check character cover deal damage difficulty class dodge bonus elemental type full normal hit points heat dangers melee miniature figure outsider type range penalty sorcerer special ability spell domain tiny touch attack.
Aberration type calling subschool coup de grace domain spell entangled ethereal plane fear cone improved grab initiative count light weapon living luck domain melee mentalism domain monstrous humanoid type morale bonus orc.
Heading 3
Animal domain circumstance bonus cross-class skill deflection bonus eladrin subtype exhausted extraplanar fire subtype glamer subschool gnome domain lethal damage one-handed weapon silver piece special quality stable strength subject subtype swift action telepathic link war domain.
Alternate form disabled end of round fate domain figment subschool heat dangers powerful charge spell domain staggered water subtype. Attack of opportunity burrow calling subschool caster level check character class feature command word subschool temporary hit points trade domain trickery domain turn undead vermin type.
Heading 4
Aquatic subtype chaotic subtype character level command undead coup de grace critical roll fear effect free action initiative check kind line of effect necromancy negative level off hand scalykind domain size spider domain time domain trample.
Heading 5
5-foot step bolster undead character class confused copper piece difficult terrain direct a spell energy damage environment extraplanar fey type reach weapon regeneration round saving throw sorcerer storm domain vermin type.
Aberration type ability check abjuration blindsense cure spell darkness domain gaseous form melee miniature figure prerequisite spell-like ability tiny water dangers.
Asides
Sidebar Content
I can't believe they won't detect heading markdown inside a div! How annoying. You'll have to use actual HTML to markup headings inside these sections. Don't worry, it's not too hard; just wrap your headings in appropriate tags. (eg. <h2> Heading text </h2>)
At least normal paragraphs still work. But it looks like for anything else you'll have to use real HTML.
Rules Block
Game Rule
Like asides, you will need to use real HTML markup inside these boxes.
Feature H2
Use real HTML for your <h2> heading and add the feature class to get this fancy styling used for important second-level headings. Adding full will make this style also span both text columns, as in heritage and class headings.
Tables
Although it's not exactly correct HTML usage, tables are definitely the easiest way to format 4e powers, items, monsters and traps within GMBinder. A few general caveats:
- You will need to wrap different types of tables in
<div>tags with the classfourthed(see document source for examples). - Add the flavourless class if your power has no flavour row.
- Add has-target and/or has-attack class if your power includes those entries.
- Because there appears to be no column-span in GMBinder, I've added a workaround for text which needs to floated to the upper right of a table header (e.g. the source/type/level text of a power). To use this, place floating text between
<span class="right">and</span>HTML tags (view source for example). This should work even within table markdown.
Powers
Pretty easy, since they have a predictable number of rows at the start. Just add the power class to the containing <div>. Add at-will, encounter or daily for appropriate colours.
| Example Power Source Type Level |
|---|
| Flavour text goes here. Better make it a bit longer since it normally takes up more than one line. |
| Usage ✦ Keywords |
| Action ✦ Range details |
| Target: Power details go here |
| Hit: Power details go here |
| Effect: Power details go here |
| At-Will Power Source Type Level |
|---|
| Flavour text goes here. Better make it a bit longer since it normally takes up more than one line. |
| Usage ✦ Keywords |
| Action ✦ Range details |
| Effect: Power details go here |
| Daily Power Source Type Level |
|---|
| Flavour text goes here. Better make it a bit longer since it normally takes up more than one line. |
| Usage ✦ Keywords |
| Action ✦ Range details |
| Effect: Power details go here |
Generic tables
Add the class alternating to use this table style.
| Column 1 head | Column 2 head |
|---|---|
| Row 1 Column 1 | Row 1 Column 2 |
| Row 2 Column 1 | Row 2 Column 2 |
Items
Unfortunately, because items have a non-standard number of rows, we'll need to split one item up into multiple tables. We'll keep it looking like the same table with some CSS magic.
- Wrap the whole item in a
<div>with theitemclass. The first table inside this dive will automatically be treated as the top section, with name/level and flavour text. - Wrap the price-per-level table, gear slot and enhancement bonus (if applicable) in a
divwith the classbasics. (Table headers in this section are invisible.) - Put each property and item power in its own table, all contained within one
divthat has thepropertiesclass.
| Magic Item Level x+ |
|---|
| Just by coming close to its magical aura, you can tell this item is extra strength broken. |
| Level 2 | +1 | 520 gp | Level 17 | +4 | 65,000 gp |
| Level 7 | +2 | 2,600 gp | Level 22 | +5 | 325,000 gp |
| Level 12 | +3 | 13,000 gp | Level 27 | +6 | 1,625,000 gp |
| Neck slot |
| Enhancement Bonus: Fortitude, Reflex, and Will |
| Property |
|---|
| This item is dangerously cool. It makes the rest of the party jealous. |
| Item Power ✦ Usage (action) |
|---|
| Trigger: Somebody accuses you of powergaming. |
| Effect: The accusation automatically fails. |
Monsters
Like items, monsters need to be handled with several different tables.
- Wrap each individual monster in a
<div>with themonsterclass. The first table inside themonsterdiv will be treated as the top section (name and basic statistics that follow predictable templating). - If the monster has traits, wrap them together in a single
<div>with thetraitsclass. Make a table inside this div for each trait. - Wrap all actions together in a single
<div>with theactionsclass. Make a table inside this div for each action. - Wrap the ability scores table in a
<div>with thechecksclass. If the skills section is required, place this in a paragraph above the table. Tables and paragraphs look the same in this section, and table headers in this section are invisible. - Wrap the alignment, language, equipment and and extra stuff (like appearance and tactics, if needed) in a
<div>with thetailclass. Tables and paragraphs look the same in this section, and table headers in this section are invisible.
Icons
You can use these by wrapping the appropriate character(s) in HTML markup like so: <span class="icon"> character </span>.
| Icon | Character | Icon |
|---|---|---|
| m | m | Attack (Melee) |
| r | r | Attack (Ranged) |
| c | c | Attack (Close) |
| a | a | Attack (Area) |
| M | M | Basic attack (Melee) |
| R | R | Basic attack (Ranged) |
| C | C | Basic attack (Close) |
| A | A | Basic attack (Area) |
| 1 | 1 | Recharge 1 |
| 2 | 2 | Recharge 2 |
| 3 | 3 | Recharge 3 |
| 4 | 4 | Recharge 4 |
| 5 | 5 | Recharge 5 |
| 6 | 6 | Recharge 6 |
| Monster Name Level + role |
|---|
| Size origin type (subtypes) XP value |
| HP xx; Bloodied xx; Inititiave: +x |
| AC xx, Fortitude xx, Reflex xx, Will xx Perception +9 |
| Speed x, alt mode x Vision type |
Traits
| Trait 1 name ✦ Aura 1 |
|---|
| Details of trait 1 |
| Trait 2 name |
|---|
| Details of trait 2 |
Standard Actions
| M Attack ✦ At-will |
|---|
| Attack: Melee 1 (one creature); +x vs. AC |
| Hit: xdx + x damage, and ongoing x damage (save ends). If this entry is long, the second line is indented. |
| R Attack (keyword, keyword) ✦ At-will |
|---|
| Effect: Text goes here |
| m Attack ✦ Encounter |
|---|
| Effect: Text goes here |
| r Attack ✦ Encounter |
|---|
| Effect: Text goes here |
Move Actions
| Move Action ✦ Recharge 6 |
|---|
| Details of move action 1 |
Minor Actions
| Minor Action (keyword) ✦ At-will |
|---|
| Details of minor action 1 |
Triggered Actions
| M Immediate Action (keyword) ✦ Recharge 56 |
|---|
| Trigger: Something happens |
| Effect (Immediate Reaction): Some things happen. |
Skills Arcana +0
| Str 10 (+0) | Dex 10 (+0) | Wis 10 (+0) |
| Con 10 (+0) | Int 10 (+0) | Cha 10 (+0) |
| Alignment Unaligned | Languages Common |
Equipment Not much
Traps/Hazards
Since traps and hazards are rather like cut-down monsters, making one of these is just like making a monster, but with fewer sections.
- Wrap each individual hazard in a
<div>with thehazardclass. The first table inside the this will be treated as the top section. - Place each action in its own table, and wrap them all in a single shared
<div>with theactionsclass. A<h2>element in this section will look like a table header. - Place a the countermeasures table in a
<div>with thecountersclass.
| Hazard Name Level + role |
|---|
| Type (subtypes) XP value |
| Detect Skill DC Inititiave: +x |
| Immune Stuff that doesn't effect traps |
Triggered Actions
| M Attack (keyword) ✦ At-will |
|---|
| Attack: Melee 1 (one creature); +x vs. AC |
| Hit: xdx + x damage, and ongoing x damage (save ends). If this entry is long, the second line is indented. |
| Countermeasures |
|---|
| Disable: Thievery DC x (action type). Success: Effect. Failure: Effect. |
Complex Tables
- Extra headers: GMBinder markdown only permits one header row in tables. To get around this, any heading elements inside the wrapper
<div>are styled to look like part of the table. You can use this to (for example) have a header row for the table that spans your column headers. - Wide tables: Add the
fullclass to your wrapper<div>for a table to make it extend across all columns.
Column Headers
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
|---|---|---|---|---|
| Ability drained | Attack of opportunity | Circumstance bonus | Critical hit | Ability check |
| Dragon type | Ethereal | Fear | Ray | Archon subtype |
| Inherent bonus | Lethal damage | Magic domain | Miniature figure | Blinded |
| Protection domain | Starvation | Water dangers | Electrum | Melee weapon |
| Orc domain | Plant domain | Scalykind domain | Standard action | Stunned |
| Antimagic | Arcane spell failure | Damage reduction | Dwarf | Domain |
Page with Feature Image

This style, with half the page occupied by a feature image, is generally used for heritage and class writeups in the core books.
To use this template:
- Wrap your feature image in a
<div>with thefeature-imageclass. - Add the
leftclass to put the feature image in the left-hand column, orrightto place it on the right. - Place a
\columnbreakbetween your imagedivand your text (either before or after your text, depending on which side you have the image on). - Add the
featureandfullclasses to your top<h2>heading.
The official books also sometimes pair this opposite a full-page image that extends the illustration, to create a two-page spread. To make a feature image take up the whole page, just don't add the left or right class, and leave out the column break. (It's up to you to slice your image into two appropriate pieces!)
Heritage Template

A summary of this creature, in a single sentence or so
Heritage Traits
- Average Height: x'x" – x'x"
- Average Weight: xxx–xxx lb.
- Ability Scores: +2 Stat1, +2 Stat2 or Stat3
- Size: Medium
- Speed: x squares
- Vision: Normal
- Languages: Common
- Skill Bonuses: +2 Skill1, +2 Skill2
- Defence Bonuses: +2 Reflex or something
- Unique Trait 1: A property or ability unique to this species. This means something something whatever.
- Unique Trait 2: Something else that makes this creature special.
- Unique Trait 3: If you're lucky you might even get a third trait.
- Heritage Power: You have the thisthing's gimmick heritage power.
| Thisthing's Gimmick Thisthing heritage power |
|---|
| Flavour text goes here. Better make it a bit longer since it normally takes up more than one line. |
| Usage ✦ Keywords |
| Action ✦ Range details |
| Effect: Power details go here. immediate action incorporeal subtype manufactured weapons medium natural |
An introductory paragraph about this heritage. This is where we summarise its place in the campaign world and explain what's so exciting about it compared to other creatures.
Play this creature if you want...
- To have this core appeal
- To use this cool gimmick
- To have synergy with these classes
Physical Qualities
What this creatures looks like, and how those traits play into its mechanical attributes. Breath weapon caster level check character cover deal damage difficulty class dodge bonus elemental type full normal hit points heat dangers melee miniature figure outsider type range penalty sorcerer special ability spell domain tiny touch attack.
Action bonus charm cold domain cowering disabled fey type giant type illusion manufactured weapons negative energy plane nonplayer character plant type player character resistance bonus shaken target turning check unconscious. Charm climb critical hit dazed disabled earth domain energy drain fear effect grapple check grappling hit points immediate action incorporeal subtype manufactured weapons medium natural reach paralyzed planning domain prerequisite profane bonus psionics reflex save stack strength summoning subschool swim tanar'ri subtype teleportation subschool treasure unarmed strike.
5-foot step arcane spell failure automatic hit base save bonus command undead conjuration enhancement bonus evasion extraplanar subtype fatigued force damage gold piece incorporeal mundane nauseated plant domain ranged attack roll rogue size modifier special quality spell preparation tanar'ri subtype threat threatened square turning damage water subtype.
Ability drained air subtype breath weapon character dazed domain spell falling force damage half speed lawful monk ooze type outer plane reptilian subtype sacred bonus strength domain thirst threat range touch spell war domain.
Playing a Thisthing
Aberration type ability modifier acid effects attack cast a spell charisma cure spell elf domain fire domain frightful presence goblinoid subtype good subtype heat dangers inflict spell living luck bonus native subtype nonplayer character renewal domain spider domain subschool supernatural ability temporary hit points turning check water subtype.
Balance domain chaos domain dispel check effective character level insight bonus native subtype point of origin reach weapon scent teleportation subschool threat range. Adventuring party armor bonus attack of opportunity attack roll calling subschool darkvision energy drain failure gaze natural ability scent spell immunity.
Base save bonus change shape check class compulsion subschool diminutive earth domain energy drained energy plane exhausted fascinated frightened inflict spell metal domain miss chance paralysis paralyzed plant domain portal domain special ability spell immunity square trample transmutation turn undead.
Adventuring party armor bonus attack of opportunity attack roll calling subschool darkvision energy drain failure gaze natural ability scent spell immunity.
Thisthings are perceived as... trait, characteristic, tendency, adjective, strength, weakness
Example Thisthing Names: I suppose you could divide these into male and female if you're some sort of basic-ass gender cop.
Class Template

"Quote from this class, to get us excited for it!"
Class Traits
- Role: Class role. Brief justification of why this would be so.
- Power Source: Class's power source. Brief justification of why this should be so.
- Key Abilities: Stat1, Stat2, Stat3
- Armor Proficiencies: Armour type 1, Armour type 2
- Weapon Proficiencies: Group 1, group 2
- Implement: Type 1, Type 2
- Bonus to Defense: +2 Will or something
- Hit Points at 1st Level: x + Constitution score
- Hit Points per Level Gained: x
- Healing Surges per Day: x + Constitution modifier
- Trained Skills: Skill 1 and Skill 2. From the class skills list below, choose x more trained skills at 1st level. Class Skills: Skill1 (Stat1), Skill2 (Stat2), Skill3 (Stat3), Skill4 (Stat4)
- Build Options: Build 1, Build 2
- Class Features: Feature 1, Feature 2, Feature 3
An introductory section about this class. This is where we summarise its place in the campaign world and explain what's so exciting about it compared to other classes.
Action bonus charm cold domain cowering disabled fey type giant type illusion manufactured weapons negative energy plane nonplayer character plant type player character resistance bonus shaken target turning check unconscious. Charm climb critical hit dazed disabled earth domain energy drain fear effect grapple check grappling hit points immediate action incorporeal subtype manufactured weapons medium natural reach paralyzed planning domain prerequisite profane bonus psionics reflex save stack strength summoning subschool swim tanar'ri subtype teleportation subschool treasure unarmed strike.
Ability drained air subtype breath weapon character dazed domain spell falling force damage half speed lawful monk ooze type outer plane reptilian subtype sacred bonus strength domain thirst threat range touch spell war domain.
Since the class writeup doesn't use anything unique after modelling a heritage writeup, I wont bother to add all the rest here. Add your own subheadings and power lists as necessary!