Blackthorn Theme Demo

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

/* #, ##, ###,  ####*/
.phb h4, .phb h2, .phb h1 {color: #35402d;}
.phb h3 {color: #35402d; border-bottom: 2px solid #d9b257}
.phb h5 {color: #000;}

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

/* Class Block Opaque Light */
.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/8W4JC1B.png);
    background-color: #e3e5e4;
}

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

/* Note Block */
.phb blockquote {background-color: #8b9990;}
.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: #2c3330; border-image:url(https://www.gmbinder.com/images/0mKT8Mn.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/TocQ9gg.png');
    border-image: url('https://www.gmbinder.com/images/WCB7l02.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 Heading Text Color */
.phb .partpage {background-image:url(https://www.gmbinder.com/images/6mU9UPK.png);}
.phb .partpage {color: #171a18;}
.phb .partpage h1 {color: #e1e5e3;}
.phb .partpage h2 {color: #e1e5e3;}
.phb .partpage h3 {color: #e1e5e3;}
.phb .partpage h4 {color: #e1e5e3;}
.phb .partpage h5 {color: #171a18;}

.phb .partpage-dmg {background-image:url(https://www.gmbinder.com/images/TkOugaQ.png);}
.phb .partpage-dmg {color: #171a18;}
.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: #171a18;}

/* 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/Vjq0KhB.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/ySad6mT.png');
    background-size  : cover;
}

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

/* Page Number */
.phb .pageNumber.auto
{
    font-size: 13pt;
    color: #434d46;
    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 Theme Demo

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

## A little about the theme 
This is where I ramble on about my theme.  Feel free to jump ahead, or better yet, look at the code and make your own.
___

Really, I just wanted to try my hand at creating a theme.  I looked at existing themes and when I couldn't figure something out, I exported a simple document to .html and looked at the original GM binder CSS code.  I then played with the pieces I wanted to alter until they worked.  Then, to make my life difficult, I created a dark and a light version.

<BR>

### Creating your own themes
I tried to include all the major elements and to organize it logically.  This is still a work in progress.
___

When digging around in the original CSS, only copy and alter the specific pieces/tags/elements you want to change, the rest is carried through from the GM binder CSS code in the background.
___

**Make sure to back up your work** in a seperate Notepad or Text Editor doc as you go.

<BR>

#### About Headings
Above, you can see headings '#' through '####'.  They have a little color and their font is thicker.  
___
Headings in note blocks and description blocks are thinner.  Heading '#####' is black.
___
If you prefer thinner headings, add 'font-weight:100;' to the approprate section

<BR>

##### A Really important table

| 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

##### Class Block
| Level | Proficiency Bonus | Features | Some Modifier |
|:---:|:---:|:---|:---:|
| 1st | +2 | Something | — |
| 2nd | ─ | ─ | — |
| ... | ─  | ─ | ─ |
| 20th | ─ | ─ | ─ |

</div>

##### Transparent Class Block Option

I created a standard (opaque) class block and a transparent class block.  The opaque version can be seen above.
___
To use the transparent class block, replace the 
___
/* Class Block Opaque Light */*
___
section with the following:
___

`
/* 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;
}
`

<BR>

### Note Blocks

<BR>

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

<BR>

<div class='descriptive'>
 
 ##### Headings are colored
 Text is white.  Headings are thin
 
 </div>

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

\pagebreakNum

# PART X
##### Summary of Content

</div>

### Monster Blocks
I themed the monster block.  I'm not 100% happy with it, but I wanted to include it as an example.  
___
To go back to the default Monster Statblock, remove the Monster Statblock section in the theme 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.

<BR>

### 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 X
##### Summary of Content

</div>

> ## 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 class='footnote'>Blackthorn Theme by /u/blckthorn</div>