Blackthorn Dark Theme Demo

by Blckthorn

Search GM Binder Visit User Profile

Blackthorn Dark Theme

A theme for GM binder by blckthorn

(/u/blckthorn).

There is also a light version.

I'd love to hear any questions, criticisms,

comments or suggestions


 About this theme  -  Changes,  Use Statblocks  -  Monster, Vehicle Using Art  -  Full Page Stains, DIY
 Basic elements   -  Note Blocks,  Tables Footers    -   Footer Options Credits     -  Credits and Thanks
              -  Headings,  Class Blocks Extras     -  Divider Images, etc.

Example Note Block

Note Block headings are white, text is black

Informative info goes here

And here

Yet more random text

Description Block Example

I reduced the line spacing for the Description Block

Headings are inherited from the main document

Unordered List Example
  • Some Stuff
  • More Stuff
  • Great Stuff
  • Obligatory Stuff
  • Stuff you don't need but still want

Changes

  • New and updated elements, including:
    footer images, part header, class tables, note block, description block, tables, and vehicle stat blocks
  • Color, font, heading and background changes

Theme Use

Use all or parts of this theme freely within GM Binder, even if it's something you're selling.  If you want to send me a link to what you've created, I like seeing the theme out in the wild

A credit is always nice too - just don't claim the theme as your own

To apply this theme

Copy the theme (and html) code section and paste into the top of your document. There are a lot of elements in the theme section you may not use - I tend to remove the ones I don't need

Table Example
Size   HP AC   Str Dex   Attack Damage
Tiny 20 18 4 18 +8 1d4 + 4
Small 25 16 6 14 +6 1d8 + 2
Medium 40 13 10 12 +5 2d6 + 1
Large 50 10 14 10 +6 2d10 + 2
Huge 80 10 18 6 +8 2d12 + 4
Footnote Example

Part 1

Part Header Example

Class Table Examples
Wide Class Table Example
Str Dex Con Int Wis Cha Traits Source
High Elf - - - +1 - - Elf Weapons,  Cantrip,  Extra Language PHB
Sober Elf - - - - +1 - Elf Weapons,  Fleet of Foot,  Mask of the Wild PHB
Drow - - - - - +1 Drow Weapons,  Superior Darkvision,
Sunlight Sensitivity,  Drow Magic		 PHB
Eladrin - - - - - +1 Fey Step MToF
Sea Elf - - +1 - - - Sea Elf Weapons,  Child of the Sea,
Friend of the Sea,  Language		 MToF
Shadar Kai - - +1 - - - Cantrip,  Blessing of the Raven Queen MToF

H2 Heading Example

H3 Heading Example

H4 Heading Example

H5 Heading Example
H6 Heading Example

Narrow Class Table Example
Level   Proficiency Bonus Features Deadliness Modifier
1st +2 angry chicken +3
2nd +3 fatal blunder +4
10th +4 deadly on Tuesday +10
20th +5 a true ninja +42
Note on Classblocks

The wide and a narrow Class Blocks use different code (the borders didn't look right otherwise). Use the "wide" tag when using the wide version.


Monster Stat Blocks

Works for narrow and wide

Monster Name

Size, Alignment

  • Armor Class  AC
  • Hit Points  Hitpoints
  • Speed  Speed
STR DEX CON INT WIS CHA
4 (-3) 16 (+3) 10 (+0) 2 (-4) 10 (+0) 1 (-5)
  • Saving Throws  saving_throws
  • Skills  skills
  • Damage Vulnerabilities  damage_vulnerabilities
  • Damage Resistances  Resistances
  • Damage Immunities  Damage_Immunities
  • Condition Immunities  condition_Immunities
  • Senses  Senses
  • Languages  Languages
  • Challenge  Challenge and Xp

Actions

Multiattack.  The Creature Name makes Number and type of attacks

Ability Description.  Attack Style:  Attack Bonus to hit, Reach/Range, one target. Hit:  Damage Damage Type damage

General Ability Description.  General Attack Description

Vehicle Blocks

Ghosts of Saltmarch introduced Vehicle statblocks.

Note that since there is no snippet, you will need to copy the examples found in this theme to use them. The following narrow and wide vehicle statblocks are templates

Since the vehicle statblocks do take up a few lines of code, I normally delete those style sections from the theme when not using them.


Narrow Vehicle Block

Size of vehicle (0 ft. by 0 ft.)

  • Creature Capacity 0 crew, 0 passengers
  • Cargo Capacity 0 tons
  • Travel Pace 0 miles per hour (0 miles per day)
STR DEX CON   INT    WIS   CHA
10 (+0) 10 (-0) 10 (+0) 0 0 0
  • Damage Immunities immunities
  • Condition Immunities immunities

Actions

On its turn...

Fire Weapon. weapon
Move. movement

Hull

Armor Class 10
Hit Points 0 (damage threshold 0)

Control: Type

Armor Class 10
Hit Points 0

How vehicle moves

Movement: Type1

Armor Class 10
Hit Points 0; -0 ft. speed per 0 damage taken
Speed (land or water) 0 ft.

Movement: Type2

Armor Class 10
Hit Points 0; -0 ft. speed per 0 damage taken
Speed (land or water) 0 ft.

Weapon: Weapon1

Armor Class 10
Hit Points 0
Attack Type: +0 to hit, range 0/0 ft. Hit: 0 (0d0) damage

Weapon description


Wide Vehicle Block

Size of vehicle (0 ft. by 0 ft.)

  • Creature Capacity 0 crew, 0 passengers
  • Cargo Capacity 0 tons
  • Travel Pace 0 miles per hour (0 miles per day)
STR DEX CON   INT    WIS   CHA
10 (+0) 10 (-0) 10 (+0) 0 0 0
  • Damage Immunities immunities
  • Condition Immunities immunities

Actions

On its turn...

Fire Weapon. weapon
Move. movement

Hull

Armor Class 10
Hit Points 0 (damage threshold 0)

Control: Type

Armor Class 10
Hit Points 0

How vehicle moves

Movement: Type1

Armor Class 10
Hit Points 0; -0 ft. speed per 0 damage taken
Speed (land or water) 0 ft.

Movement: Type2

Armor Class 10
Hit Points 0; -0 ft. speed per 0 damage taken
Speed (land or water) 0 ft.

Weapon: Weapon1

Armor Class 10
Hit Points 0
Attack Type: +0 to hit, range 0/0 ft. Hit: 0 (0d0) damage

Weapon description


Section Divider Images

Here are divider images you can use to delineate sections (code examples on the right).  I tend to measure from the top for spacing. Also, keep the "@media print" section of the theme, else the divider spacing won't be right when you print

Last Page Number

Adding the page number to the last page can be tricky.

Put the following code at the end of your document:

<div class='pageNumber auto'></div>


<img src='https://www.gmbinder.com/images/IkOxtit.png' 
  style='position:absolute; top:642px; left:0px; width:100%' />

<img src='https://www.gmbinder.com/images/WGq3LHJ.png' 
  style='position:absolute; top:892px; left:0px; width:100%' />


Footers

There are footer options in the style section if you don't like the tree branches on the side or if you need to remove the bottom part because it interferes with a picture, or if you want to remove the footer entirely.

For example, to remove the side tree, find the following section:

/* Footer Image - No Side Tree*/
.phb:nth-child(  ):after

Working with Images

Full Page Watercolor Stains

I've adapted the full-page watercolor stains by FallenWyvern to work with this theme:

Blackthorn Dark Watercolor Stains

How to use these is beyond the scope of this document, but here's some tutorials:

https://www.gmbinder.com/share/-L4Yt8ZSxmhwqt--yNRT https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq

Photoshop/GIMP Stains

For those who use Photoshop, here's an overview of the steps I use to create my own watercolor stains. GIMP works well too, though I'm not as familiar with it

Start by downloading and importing the brushes

(Resource zip file link in the following tutorial):

Tutorial,   Direct Link to resource file


To activate a footer option for a single page - type the page

number in between the parenthesis.

To activate an option for all pages - type n+1 in between the

parenthesis.  (n+3 would activate an option from pg 3 on).

To activate an option for multiple individual pages, add

additional statements, separated by commas:

.phb:nth-child( 4 ):after, .phb:nth-child( 9 ):after

Step 1 - Get rid of the smooth edge

  • Select the image and copy it into a new document with a transparent background
  • Select the eraser tool and set the mode to 'Pencil'
  • Choose a brush and erase just of the edge of the image, giving it a "torn paper" look. Don't drag the brush, just click. I vary the brush as I go

Step 2 - Create a semi-transparent edge

  • Change the eraser tool mode to 'Brush' and set the opacity to 50%
  • Use different brushes to erase a little bit more of the edge - this creates the semi-transparent look

Step 3 (optional) - Create a faded stain under the edge

  • Start a new layer and make sure it is underneath the original image
  • Select the brush tool, set it to 50% opacity and select a black color
  • Paint underneath the edge by clicking with your choice of brush
  • When you done, set the opacity of the underneath layer to between 25% and 40% depending on your preference
  • If using the dark theme, I do as above, but use Hue/Saturation to increase the layer's brightness by 60% so that it shows lighter against a dark background.

 

Credits and thanks

Thank you to the GMbinder developers for all their work

 

Art Used to create this theme:

Background was created by modifying 'Some Old Gray Worn Paper Background' by My Free Textures

Textures used to create the Monster and Vehicle Statblock backgrounds were found at: Texture King

Branch and tree image elements created using my own photos. Celtic knots from the Book of Kells

WWW.GMBINDER.COM

 

This document was lovingly created using GM Binder.


If you would like to support the GM Binder developers, consider joining our Patreon community.