Blackthorn Dark Theme Demo

<style>

@media print {.phb {height: 279.4mm; width: 215.9mm;} }

/* Background */
.phb { background-image: url('https://www.gmbinder.com/images/guKfO3M.jpg') }
.phb { background-size: cover }

/* #, ##, ###,  ####*/
.phb h1 {-webkit-text-stroke-width: 0; color: #d3e5e3; font-family: "Quintessential";font-variant: small-caps; font-size: 3.5em; letter-spacing: 0.02em;
        text-shadow: 4px 4px 11px #687d7a, -4px 4px 11px #687d7a, -4px -4px 11px #687d7a, 4px -4px 11px #687d7a;}
.phb h2 {-webkit-text-stroke-width: 0; color: #ace5cb; font-family: "Quintessential";font-variant: small-caps; letter-spacing: 0.02em;
        text-shadow: 3px 3px 12px #000, -3px 3px 12px #000, -3px -3px 12px #000, 3px -3px 12px #000;}
.phb h3 {-webkit-text-stroke-width: 0; color: #d3e5e3; border-bottom: 2px ridge #668074; font-family: "EB Garamond";font-variant: small-caps; letter-spacing: 0.02em;
        text-shadow: 3px 3px 7px #687d7a, -3px 3px 7px #687d7a, -3px -3px 7px #687d7a, 3px -3px 7px #687d7a;}
.phb h4 {color: #000; font-family: "ScalySansSmallCaps"; font-size: 1.55em;
        text-shadow: 1px 1px 7px #8e9997, -1px 1px 7px #8e9997, -1px -1px 7px #8e9997, 1px -1px 7px #8e9997;}
.phb h5 {font-weight: 100; color: #8fb3a2;}
.phb h6 {font-weight: 600; font-family: "Quintessential"; font-size: 2.5em; color: #000; line-height: .8em; font-variant: small-caps; text-align: center;
        text-shadow: 3px 3px 7px #687d7a, -3px 3px 7px #687d7a, -3px -3px 7px #687d7a, 3px -3px 7px #687d7a;}

/* Main Text, Lists, Links, First Letter after # */

p {font-family: "Source Sans Pro"; letter-spacing: 0.02em; margin-bottom: 0.8em;}
ul {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}
.phb {color: #dfe5e2;}
.phb a{color: #5c997d;}
.phb h1+p::first-letter{color:#73807a; line-height: 0.86em;}

/* Center, Pad left, Pad right */
.center         {text-align: center}
.tab            {padding-left: 30px; }
.doubletab      {padding-left: 60px;}
.padright       {padding-right: 30px}
.doublepadright {padding-right: 60px}

/* Table of Contents - Fancy Border*/
.phb .TOC
{
    box-shadow: 0px 0px 36px 7px #687d7a;
    background-color: #151717;
    border-image-outset: 40px 68px 42px 68px;
    border-image-slice: 134 0 fill;
    border-image-source: url(https://www.gmbinder.com/images/TdNm6gK.png);
    border-image-width:47px;
    line-height:11px;
    padding: 2px 2px 2px 2px;
    width:95%;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
    margin-bottom:40px;
}
.phb .TOC h5 {color: #a1b3b0; line-height:11px;}

/* Wide Class Table - Branches*/
.phb .wideclassTable
{
    box-shadow: 0px 0px 32px 7px #687d7a;
    background-color: #151717;
    border-image-outset: 51px 70px;
    border-image-slice: 118 0 fill;
    border-image-source: url(https://www.gmbinder.com/images/4NJ3PL3.png);
    border-image-width:58px;
    border-style:solid;
    border-collapse:separate;
    padding: 6px 2px 6px 2px;
    width:95%;
    line-height:11px;
    margin-top:25px;
    margin-bottom:40px;
    margin-left:auto;
    margin-right:auto;
}
.phb .wideclassTable h5 {color: #a1b3b0; line-height:11px;}

/* Narrow Class Table - Branches*/
.phb .classTable
{
    background-color: #151717;
    border-image-outset: 36px 9px 36px 9px;
    border-image-slice: 150;
    border-image-source: url(https://www.gmbinder.com/images/4NJ3PL3.png);
    border-style:solid;
    box-shadow: 0px 0px 26px 5px #687d7a;
    padding: 6px 2px 6px 2px;
    width:95%;
    margin-top:25px;
    margin-bottom:40px;
    margin-left:auto;
    margin-right:auto;
}
.phb .classTable h5 {color: #a1b3b0; line-height:11px;}

/* Tables */
table tr:nth-child(odd) td {background-color: #454d4b;}
    .phb table thead th {color: #6b9984;}
    .phb table { font-family: "Alegreya Sans"; font-size: 1.1em; color: #e1e5e3;}
    .phb table em {font-family: "Alegreya Sans";}
    .phb table strong {font-family: "Alegreya Sans";}

table.table2 tbody tr td {padding: .1em .1em}
    table.table2 {font-family: "Alegreya Sans"; font-size: 1.1em; color: #d3e5df;}
    table.table2 tr:nth-child(odd) td {background-color: #151717;}
    table.table2 tr:nth-child(even) td {background-color: #151717;}
    table.table2 td {vertical-align: top;}

/* Note Block*/
.phb blockquote {
    box-shadow: 0px 0px 20px 4px #687d7a;
    background-color: #858c8b; font-size: 1em;
    border-image-outset: 10px 0px;
    border-image-slice: 90 100 fill;
    border-image-source: url('https://www.gmbinder.com/images/KCaupPc.png');
    border-image-width: 3.2;
    border-style:solid;
    padding: 8px 10px 10px 10px;
}
.phb blockquote h1 {font-weight: 100; color: #FFF; text-shadow: none;}
.phb blockquote h2 {font-weight: 100; color: #FFF; text-shadow: none;}
.phb blockquote h3 {font-weight: 100; color: #FFF;}
.phb blockquote h4 {font-weight: 100; color: #FFF;}
.phb blockquote h5 {font-weight: 100; color: #FFF;}
.phb blockquote ul {font-size: 1em; color: #000;}
.phb blockquote p {font-size: 1em; color: #000;}
.phb blockquote strong {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}
.phb blockquote em {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}
.phb blockquote a {color: #004022;}

/*Description Block*/
.phb .descriptive {
    background-color:#131414;
    border-image: initial;
    border-color: #131414;
    box-shadow: 0px 0px 20px 4px #687d7a;
    padding: 0px 2px 0px 2px;
}
.phb .descriptive h4 {font-weight: 100;}
.phb .descriptive h5 {line-height:14px;}
.phb .descriptive p {padding-bottom:0; line-height:1.3em}
.phb .descriptive U {color: #bcccc4;}
.phb .descriptive p+p {padding-top:0em}
.phb .descriptive strong {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}
.phb .descriptive em {font-family: "Source Sans Pro"; letter-spacing: 0.02em;}

/* Code Block */
.phb code{border:none; font-family: "Alegreya Sans"; line-height: 1.2em; background-color: #919995; color: #000; letter-spacing: -0.02em;}
.phb pre{background-color: #919995;}

/* Monster Statblock */
.phb hr+section blockquote {
    background-image: url('https://www.gmbinder.com/images/oO5HTJm.png');
    border-image: url('https://www.gmbinder.com/images/kIjTWRV.png');
    background-position: center;
    border-image-slice: 20
}
.phb hr+section blockquote hr {background-image: url(https://www.gmbinder.com/images/nyuK5zP.png);
    height: 5px; margin: 7px 0;
} 
.phb hr+section blockquote {box-shadow: 0px 0px 18px 2px #687d7a;}
.phb hr+section blockquote {color: #000;}
.phb hr+section blockquote table thead th {color: #000;}
.phb hr+section blockquote h2 {color: #000; text-shadow: none;}
.phb hr+section blockquote h3 {font-family:"Source Sans Pro"; border-bottom:1px solid #000; color: #000; text-shadow: none;}
.phb hr+section blockquote h4 {color: #000;}
.phb hr+section blockquote h5 {color: #000;}
.phb hr+section blockquote p {color: #21332b; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: 0.02em; font-size: 1.02em;}
.phb hr+section blockquote p em {color: #000; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: 0.02em; font-size: 1.02em;}
.phb hr+section blockquote p strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote hr+ul {color: #21332b; font-family: "Alegreya Sans"; font-size: 1.1em; letter-spacing: -0.02em}
.phb hr+section blockquote hr+ul strong {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote hr+ul em {color: #000; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb hr+section blockquote table {color: #000;  line-height:6px; padding-bottom: 4px; padding-top: 6px;}
.phb hr+section blockquote table tr {letter-spacing: 0.02em;}
.phb hr+section blockquote table td {background-color: inherit; color: #21332b;}

/* Vehicle Statblock - Narrow */
.phb .vehicle {
    box-shadow: 0px 0px 19px 1px #687d7a;
    position: relative; padding-top: 15px; padding-bottom: 5px;
    background-image: url('https://www.gmbinder.com/images/jGEntT8.png');
    background-position: center;
    border-style: solid; border-image: url('https://www.gmbinder.com/images/HjCnrtA.png');
    border-width: 20px; border-image-slice: 50; border-image-outset: 6px 0px;
}
.phb .vehicle hr {visibility: visible;
    height: 6px; margin: 4px 0;
    background-image: url('https://www.gmbinder.com/images/oYkgcAN.png');
    background-size: 100% 100%; border: none;
} 
.phb .vehicle {color: #c8ccca;}
.phb .vehicle h2 {color: #5c997d; margin-top: -8px; margin-bottom: 0;  text-shadow: none;}
.phb .vehicle h2+p {padding-bottom: 0}
.phb .vehicle h3 {color: #a1b3b0; font-family: "Source Sans Pro"; font-variant: small-caps; font-weight: 500;border-bottom:1px solid #29664a;
        text-shadow: 1px 1px 7px #556663, -1px 1px 7px #556663, -1px -1px 7px #556663, 1px -1px 7px #556663;}
.phb .vehicle p {color: #a1b3b0; font-family: "Source Sans Pro"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehicle p em {color: #c8ccca; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehicle p strong {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle p+p {margin-top: 0; margin-bottom: 7px; text-indent:0;}
.phb .vehicle hr+ul {color: #a1b3b0;; font-family: "Alegreya Sans"; letter-spacing: -0.02em}
.phb .vehicle hr+ul strong {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle hr+ul em {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehicle table {margin: 0;
    line-height: 6px;
    padding-bottom: 4px; padding-top: 6px;
    column-span: 1;
    background-color: transparent;
    border-style: none; border-image: none;
    -webkit-column-span: 1}
.phb .vehicle table tr {letter-spacing: 0.02em; background-color: inherit;}
.phb .vehicle table td {background-color: inherit; color: #a1b3b0}
.phb .vehicle hr+table tbody tr:nth-child(odd) {background-color: inherit}

/* Vehicle Statblock - Wide */
.phb .vehiclewide
{   column-span: all; column-fill: auto; column-gap: 1cm; column-width: 7.68cm;
    position: relative; padding-top: 15px; padding-bottom: 10px;
    background-image: url('https://www.gmbinder.com/images/Ug4HW9z.png');
    background-position: center;
    border-style: solid; border-image: url('https://www.gmbinder.com/images/HjCnrtA.png');
    border-width: 20px; border-image-slice: 50; border-image-outset: 6px 0px;
}
.phb .vehiclewide hr {visibility: visible;
    height: 6px; margin: 4px 0;
    background-image: url('https://www.gmbinder.com/images/oYkgcAN.png');
    background-size: 100% 100%; border: none;
} 
.phb .vehiclewide {box-shadow: 0px 0px 19px 1px #687d7a;}
.phb .vehiclewide {color: #c8ccca;}
.phb .vehiclewide h2 {color: #5c997d; margin-top: -8px; margin-bottom: 0;  text-shadow: none;}
.phb .vehiclewide h2+p {padding-bottom: 0}
.phb .vehiclewide h3 {color: #a1b3b0; font-family: "Source Sans Pro"; font-variant: small-caps; font-weight: 500;border-bottom:1px solid #29664a;
        text-shadow: 1px 1px 7px #556663, -1px 1px 7px #556663, -1px -1px 7px #556663, 1px -1px 7px #556663;}
.phb .vehiclewide p {color: #a1b3b0; font-family: "Source Sans Pro"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehiclewide p em {color: #c8ccca; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb .vehiclewide p strong {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide p+p {margin-top: 0; margin-bottom: 7px; text-indent:0;}

.phb .vehiclewide hr+ul {color: #a1b3b0;; font-family: "Alegreya Sans"; letter-spacing: -0.02em}
.phb .vehiclewide hr+ul strong {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide hr+ul em {color: #c8ccca; font-family: "Lato"; font-size: 0.93em; letter-spacing: 0.02em}
.phb .vehiclewide table {margin: 0;
    line-height: 6px;
    padding-bottom: 4px; padding-top: 6px;
    column-span: 1;
    background-color: transparent;
    border-style: none; border-image: none;
    -webkit-column-span: 1}
.phb .vehiclewide table tr {letter-spacing: 0.02em; background-color: inherit;}
.phb .vehiclewide table td {background-color: inherit; color: #a1b3b0}
.phb .vehiclewide hr+table tbody tr:nth-child(odd) {background-color: inherit}

/* Part Page Header */
.phb .partpage {background-image:url(https://www.gmbinder.com/images/EpeGK5R.png);
    height: 266px;
    background-size:cover;
    background-position:center;
    z-index: -1;
}
.phb .partpage h1{font-weight: 100; color: #d3e5e3; font-family: "Quintessential"; font-variant: small-caps; font-size: 3.5em; 
        line-height:1.2em; letter-spacing: 0.02em; text-align: center; padding-top:16px; 
        text-shadow: 4px 4px 11px #687d7a, -4px 4px 11px #687d7a, -4px -4px 11px #687d7a, 4px -4px 11px #687d7a;}
.phb .partpage h5{font-weight: 100; color: #d3e5e3; font-family: "Quintessential"; font-variant: small-caps; letter-spacing: 0.02em; line-height:2em;
        text-shadow: 3px 3px 7px #687d7a, -3px 3px 7px #687d7a, -3px -3px 7px #687d7a, 3px -3px 7px #687d7a;}

/* Footer Image - Odd*/
.phb:nth-child(odd):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/SPUz1Zn.png');
    background-size: cover;
}

/* Footer Image - Even*/
.phb:nth-child(even):after
{ 
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/tVxbE45.png');
    background-size  : cover;
}

/* Center Footer - No Side Tree*/
.phb:nth-child(  ):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/zvc1QXN.png');
    background-size: cover;
}

/* Right Tree Only */
.phb:nth-child(  ):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/coZEaRo.png');
    background-size: cover;
}

/* Left Tree Only */
.phb:nth-child(  ):after
{ 
    content          : '';
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : url('https://www.gmbinder.com/images/dTaqAl5.png');
    background-size  : cover;
}

/* No Footer */
.phb:nth-child(  ):after
{
    content          : "";
    position         : absolute;
    bottom           : 0;
    left             : 0;
    z-index          : -1;
    height           : 392px;
    width            : 100%;
    background-image : none;
    background-size: cover;
}

/* Footnote */
.phb .footnote{
    content    : '';
    position   : absolute; 
    right      : 80px;
    bottom     : 34px;
    z-index    : 150;
    width      : 400px;
    text-align : right;
    color      : #8fb3a2;
    font-family: "ScalySansSmallCaps";
    font-size  : 13pt;
    letter-spacing: 0.5px;
    font-variant: small-caps;
}

/* Page Number */
.phb .pageNumber.auto{
    font-size: 13pt;
    color: #8fb3a2;
    position   : absolute;
    bottom     : 34px;
    width      : 50px;
    text-align : center;
}
.phb:nth-child(even) .pageNumber.auto{
    left       : 5px;
}
.phb:nth-child(odd) .pageNumber.auto{
    right      : 5px;
}

</style>

# Blackthorn Dark Theme

A theme for GM binder by blckthorn

(/u/blckthorn).

There is also a [light version](https://www.gmbinder.com/share/-LKYV_m9l2ZxQ2iGnxh3 "Blackthorn Theme").

I'd love to hear any questions, criticisms,

comments or suggestions

<div class='wide'

<tr>
    <td>  About this theme  -  <a href="#changes">Changes</a>,  <a href="#use">Use</a> </td>
    <td> Statblocks  -  <a href="#monster">Monster</a>, <a href="#vehicle">Vehicle</a></td>
    <td> Using Art  -  <a href="#stains">Full Page Stains</a>, <a href="#diy">DIY</a></td>
    </tr>
  <tr>
    <td>  Basic elements   -  <a href="#noteblocks">Note Blocks</a>,  <a href="#tables">Tables</a> </td>
    <td> Footers    -   <a href="#foottrees">Footer Options</a> </td>
    <td> Credits     -  <a href="#credits">Credits and Thanks</a></td>
    </tr>
  <tr>
    <td>               -  <a href="#headings">Headings</a>,  <a href="#classblocks">Class Blocks</a> </td>
    <td> Extras     -  <a href="#divider">Divider Images</a>, <a href="#etc">etc.</a></td>
    <td></td>
    <tr>

</table>

</div>
</div>

> ##### Example Note Block
> Note Block headings are white, text is black
> ___
> Informative info goes here
> 
> And here
>
> Yet more random text
<div style="margin-top:80px;"></div>

## Description Block Example
<div style='margin-top:8px;'></div>

I reduced the line spacing for the Description Block

Headings are inherited from the main document
___

##### Unordered List Example
<div style='margin-top:8px;'></div>

- Some Stuff
- More Stuff
- Great Stuff
- Obligatory Stuff
- Stuff you don't need but still want

</div>

\columnbreak

### Changes

- New and updated elements, including:
<BR>
footer images, part header, class tables, note block, description block, tables, and vehicle stat blocks
- Color, font, heading and background changes
<div style='margin-top:36px;'></div>

### Theme Use </div>
<div style='margin-top:8px;'></div>

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
<div style="margin-top:18px;"></div>

##### 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
<div style='margin-top:52px;'></div>

##### <font color=#a1b3b0> Table Example </font> </div>
<div style='margin-top:12px;'></div>

| 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 |

<div class=footnote>Footnote Example</div>

\pagebreakNum

# Part 1
##### Part Header Example

</div>

</div>

###### Class Table Examples
<div style="margin-top:48px;"></div>

##### Wide Class Table Example
<div style='margin-top:18px;'></div>

|           | | 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, <div style="word-wrap: break-word"> </div> Sunlight Sensitivity,  Drow Magic | PHB
| Eladrin   | | -   | -   | -   | -   | -   | +1  | Fey Step | MToF
| Sea Elf   | | -   | -   | +1  | -   | -   | -   | Sea Elf Weapons,  Child of the Sea, <div style="word-wrap: break-word"> </div> Friend of the Sea,  Language | MToF
| Shadar Kai| | -   | -   | +1  | -   | -   | -   | Cantrip,   Blessing of the Raven Queen | MToF

</div>
</div>

## H2 Heading Example </div>
<div style="margin-top:24px;"></div>

### H3 Heading Example
<div style="margin-top:28px;"></div>

#### H4 Heading Example
<div style="margin-top:28px;"></div>

##### H5 Heading Example
<div style="margin-top:34px;"></div>

###### H6 Heading Example

\columnbreak

##### 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

</div>
<div style='margin-top:48px;'></div>

##### 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.

\pagebreakNum

<BR>

### Monster Stat Blocks </div>
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.
<BR>
___
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.

\columnbreak

<BR>

## 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
<BR>
**Move.** movement

### Hull
**Armor Class** 10
<BR>
**Hit Points** 0 (damage threshold 0)

### Control: Type
**Armor Class** 10
<BR>
**Hit Points** 0

How vehicle moves

### Movement: Type1
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Movement: Type2
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Weapon: Weapon1
**Armor Class** 10
<BR>
**Hit Points** 0
<BR>
*Attack Type:* +0 to hit, range 0/0 ft. *Hit:* 0 (0d0) damage

Weapon description

</div>

\pagebreakNum

<BR>

## 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
<BR>
**Move.** movement

### Hull
**Armor Class** 10
<BR>
**Hit Points** 0 (damage threshold 0)

### Control: Type
**Armor Class** 10
<BR>
**Hit Points** 0

How vehicle moves

### Movement: Type1
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Movement: Type2
**Armor Class** 10
<BR>
**Hit Points** 0; -0 ft. speed per 0 damage taken
<BR>
**Speed (land or water)** 0 ft.

### Weapon: Weapon1
**Armor Class** 10
<BR>
**Hit Points** 0
<BR>
*Attack Type:* +0 to hit, range 0/0 ft. *Hit:* 0 (0d0) damage

Weapon description

</div>

### Section Divider Images </div>

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 </div>

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>
~~~

\columnbreak

<BR>

~~~
<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%' />
~~~

\pagebreakNum

<BR>

### Footers </div>
<div style='margin-top:12px;'></div>

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:
<div style='margin-top:18px;'></div>

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

### Working with Images </div>
<div style='margin-top:16px;'></div>

#### Full Page Watercolor Stains
<div style='margin-top:8px;'></div>

I've adapted the full-page watercolor stains by [FallenWyvern](https://www.reddit.com/user/FallenWyvern/ "FallenWyvern") to work with this theme:
<div style='margin-top:20px;'></div>

[Blackthorn Dark Watercolor Stains](http://bit.ly/BlackthornDarkWatercolor)
<div style='margin-top:20px;'></div>

</div>
</div>

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/-L4Yt8ZSxmhwqt--yNRT)
[https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq](https://www.gmbinder.com/share/-Kx5i9fuxhuci6BUrbJq)

#### Photoshop/GIMP Stains </div>
<div style='margin-top:8px;'></div>

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](https://dnd-5e-homebrew.tumblr.com/post/134421010799/phb-homebrewing-tutorial),   [Direct Link to resource file](https://t.umblr.com/redirect?z=https%3A%2F%2Fmega.nz%2F%23%21DMcEhRQI%21RdV02Wqy4hThUxcxQVg1_pz_OGZARFgibZ38moSc5p8&t=YWU5ODRiZTMwNGIzYmJiMGVjM2YzYjAwOTU1M2RlYjE1YWJlYzFiMix4Nmd2cmdaZw%3D%3D&b=t%3AiwpyZfVra5yckXL7sTcK2w&p=https%3A%2F%2Fdnd-5e-homebrew.tumblr.com%2Fpost%2F134421010799%2Fphb-homebrewing-tutorial&m=1)

\columnbreak

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
~~~

<font color=#8fb3a2> **Step 1 - Get rid of the smooth edge** </font>

- 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
___
<font color=#8fb3a2> **Step 2 - Create a semi-transparent edge** </font>

- 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
___
<font color=#8fb3a2> **Step 3 (optional) - Create a faded stain under the edge** </font>

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

\pagebreakNum

<BR>

> ## Credits and thanks
>
> Thank you to the [GMbinder](https://discord.gg/e8W266q "GMbinder Discord") 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 ](http://www.myfreetextures.com/worn-parchment-paper-5/ "Some Old Gray Worn Paper Background")
> ___
> Textures used to create the Monster and Vehicle Statblock backgrounds were found at: [Texture King](https://www.textureking.com/10_5520/ "Free Textures")
> ___
> Branch and tree image elements created using my own photos.  Celtic knots from the Book of Kells

</div>