Blackthorn Dark Theme Demo

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

/* #, ##, ###,  ####*/
.phb h4, .phb h2, .phb h1 {font-weight: 100; color: #d3e5da;}
.phb h3 {font-weight: 100; color: #d3e5da; border-bottom: 2px solid #d9b257}
.phb h5 {color: #e1e5e3;}

/* Main Text, Links, First Letter after # */
.phb {color: #edf2ef;}
.phb a{color: #d9b257;}
.phb h1+p::first-letter{color:#e1e5e2;}

/* Class Block - Transparent */
.phb .classTable
{
    border-image-outset: 25px 10px !important;
    align:center;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    line-height:11px;
    border-image-source: url(https://www.gmbinder.com/images/SgEeH1u.png);
    background-color: inherit;
}

/* Tables */
table tr:nth-child(odd) td {background-color: #454d47;}

/* Notes Block*/
.phb blockquote {background-color: #748078; color: #000;}
.phb blockquote h1 {font-weight: 100; color: #FFF;}
.phb blockquote h2 {font-weight: 100; color: #FFF;}
.phb blockquote h3 {font-weight: 100; color: #FFF;}
.phb blockquote h4 {font-weight: 100; color: #FFF;}
.phb blockquote h5 {font-weight: 100; color: #FFF;}

/*Description Block*/
.phb .descriptive{background-color:#171a18; border-image:url(https://www.gmbinder.com/images/W2snoqV.png); border-image-outset:4px}
.phb .descriptive {color: #FFF}
.phb .descriptive h1 {font-weight: 100; color: #d1e5d7}
.phb .descriptive h2 {font-weight: 100; color: #d1e5d7}
.phb .descriptive h3 {font-weight: 100; color: #d1e5d7}
.phb .descriptive h4 {font-weight: 100; color: #d1e5d7}
.phb .descriptive h5 {font-weight: 100; color: #d1e5d7}

/* Monster Statblock */
.phb hr+section blockquote
{
    background-image: url('https://www.gmbinder.com/images/VlOUbjY.png');
    border-image: url('https://www.gmbinder.com/images/kIjTWRV.png');
    background-position: center;
}
 
.phb hr+section blockquote hr {background-image: url(https://www.gmbinder.com/images/nyuK5zP.png)} 
.phb hr+section blockquote table tr:nth-child(odd) td {background-color: inherit;}
.phb hr+section blockquote {box-shadow: none;}
 
.phb hr+section blockquote {color: #000;}
.phb hr+section blockquote h1 {color: #000;}
.phb hr+section blockquote h2 {color: #000;}
.phb hr+section blockquote h3 {font-family:Calibri;border-bottom:1px solid #000;color: #000}
.phb hr+section blockquote h4 {color: #000;}
.phb hr+section blockquote h5 {color: #000;}
.phb hr+section blockquote hr+ul {color: #000;}
.phb hr+section blockquote table {color: #000;}

/* Part Page Header Text Color */
.phb .partpage {background-image:url(https://www.gmbinder.com/images/6mU9UPK.png);}
.phb .partpage {color: #171a18;}
.phb .partpage h1{color: #171a18;}
.phb .partpage h2{color: #171a18;}
.phb .partpage h3{color: #171a18;}
.phb .partpage h4{color: #171a18;}
.phb .partpage h5{color: #171a18;}

.phb .partpage-dmg {background-image:url(https://www.gmbinder.com/images/TkOugaQ.png);}
.phb .partpage-dmg {color: #222623;}
.phb .partpage-dmg h1{color: #e1e5e3;}
.phb .partpage-dmg h2{color: #e1e5e3;}
.phb .partpage-dmg h3{color: #e1e5e3;}
.phb .partpage-dmg h4{color: #e1e5e3;}
.phb .partpage-dmg h5{color: #000;}

/* Footer */
.phb:nth-child(odd):after{ 
    content          : '';
    position         : absolute;
    bottom           : -12px;
    left             : 20px;
    z-index          : 100;
    height           : 336px;
    width            : 99%;
    background-image : url('https://www.gmbinder.com/images/HQdqQI2.png');
    background-size  : cover;
}
.phb:nth-child(even):after{ 
    content          : '';
    position         : absolute;
    bottom           : -12px;
    left             : -12px;
    z-index          : 100;
    height           : 336px;
    width            : 99%;
    background-image : url('https://www.gmbinder.com/images/WRvKgzu.png');
    background-size  : cover;
}

/* Footnote */
.phb .footnote{
    position   : absolute;
    right      : 80px;
    bottom     : 32px;
    z-index    : 150;
    width      : 700px;
    text-align : right;
    color      : #8fa898;
    font-size  : 13pt;
    letter-spacing: 0.5px;
    font-variant: small-caps;
}

/* Page Number */
.phb .pageNumber.auto{
    font-size: 13pt;
    color: #8fa898;
    position   : absolute;
    bottom     : 32px;
    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 Demo

This is a demo of the blackthorn theme, a relatively complete theme for GM binder by /u/blckthorn.

## A Work in Progress

This me trying my hand at a custom/new theme.  
___
I started looking at existing themes and when I couldn't figure something out, I exported the web page code to .html and looked at the GM binder CSS code.
___
Then I just played with the pieces until they worked the way I wanted.  There is also a light version of this theme that I personally find easier to read

##### Class Block Wide

| Level | Proficiency Bonus | Features | More Features | Some Modifier |
|:---:|:---:|:--:|:---:|:---:
| 1st | +2 | something cool goes here | this feature exists | +35
| 2nd | ─ | ─ | — |
| ... | ─  | ─ | ─ |
| 20th | ─ | ─ | ─ |

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

### Changes

- Most of the changes have been subtle color changes.

- I redid the monster block and got a version I don't hate

- I created a section break image - this can be seen on pg 3

<BR>

#### A note or 2 when making themes

**Back up your work** - I copy my code to Notepad regularly
___
Elements not explicity defined are populated from the original GM binder CSS code

<BR>

##### A Really important table
<div style='margin-top:12px;'></div>

| d20   | Importance of Info |
| :-:   | :----------------- |
| 1-15  | useless trivia
| 16-17 | well, at least it's interesting
| 18    | starting to get good here
| 18-19 | you can pay attention now
| 20    | don't miss this

\columnbreak

### Note Blocks

<BR>

> ##### Note Block headings are white
> Text is black
> <BR>
> All headings are white
> ___
> ## A Bigger Heading
> Headings used in note blocks are thinner than in the main document

<div class='descriptive'>
 
 
 ##### Description Block Headings are colored
 Text is white
 <BR>
 Headings are thin here too
 
 <BR>
 
 </div>

<div class='footnote'>Footnote Goes Here</div>

\pagebreakNum

# PART II
##### More Features

</div>

### Monster Blocks
I themed the monster block.  I'm bordering on happy with it
___
You can remove the custom Statblock from this theme by removing the "Monster Statblock" section in the code

___
> ## Monster Name
>*Size, Alignment*
> ___
> - **Armor Class** AC
> - **Hit Points** Hitpoints
> - **Speed** Speed
>___
>|STR|DEX|CON|INT|WIS|CHA|
>|:---:|:---:|:---:|:---:|:---:|:---:|
>|Str (Mod)|Dex (Mod)|Con (Mod)|Int (Mod)|Wis (Mod)|Cha (Mod)|
>___
> - **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

\columnbreak

### Part Headers

The PHB and DMG part headers have been themed though I think the DMG part header goes better with this theme.  The text colors are easily changed.

### Other snippet examples

<BR>

## Class Features
As a class_name, you gain the following class features
#### Hit Points
___
- **Hit Dice:** 1d10 per class_name level
- **Hit Points at 1st Level:** something
- **Hit Points at Higher Levels:** something_higher

#### Proficiencies
___
- **Armor:** armor
- **Weapons:** weapons
- **Tools:** tools

___
- **Saving Throws:** saving_throws
- **Skills:** Choose two from skills

#### Equipment
You start with the following equipment, in addition to the equipment granted by your background:
- *(a)* a item1 or *(b)* item2
 
<BR>

#### Spell Name
*Spell Type*
___
- **Casting Time:** Casting Time
- **Range:** Range
- **Components:** V, S
- **Duration:**  Duration
___
A description bursts from the caster's fingers and spreads at the speed of the reader's comprehension.

<div class='footnote'>Look, Another Footnote!</div>

\pagebreakNum

# PART III
##### Extras and Credits

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

### Transparent Class Block Option

There is also a transparent class block
___
To see what it looks like, replace the section titled

<div class='descriptive'>
/* Class Block Opaque Light */*
</div>

with:

##### Copy the code from the left panel
<BR>

/* Class Block - Opaque Dark*/
.phb .classTable
{
    border-image-outset: 25px 10px !important;
    align:center;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    line-height:11px;
    border-image-source: url(https://www.gmbinder.com/images/rBRFSuY.png);
    background-color: #171a18;
}

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

### Section Break Line Art

Below, you will find an image you can use to delineate sections
___
Link to the image:
<BR>
[https://www.gmbinder.com/images/YzRGlwW.png](https://www.gmbinder.com/images/YzRGlwW.png "section break line")

<BR>

> ## Credit where credit is due
>
> A big thanks to the [GMbinder](https://www.reddit.com/r/gmbinder "GMbinder reddit page") developers for a powerful and easy to use tool.
>
> Check out their [Patreon Page](https://www.patreon.com/gmbinder "GMbinder Patreon page")
>
> ___
>
> ##### 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")
> ___
> Texture used to create the Monster Statblock and the Part Headers can be found at: [Texture King](https://www.textureking.com/10_5520/ "Free Textures")
> ___
> Xanathar style borders were modified from the SwordMeow theme

</div>

<div class='footnote'>Blackthorn Dark Theme by /u/blckthorn</div>