Blackthorn Theme Demo

<html>
  <head>
    <link rel="stylesheet"
         href="https://fonts.googleapis.com/css?family=EB Garamond|PT Serif|Source Sans Pro|Alegreya Sans|Lato"
  		<link rel='stylesheet' type='text/css' href='/assets/modal/styles.css' />
			<script>!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init', '1382286345172414');fbq('track', 'PageView');</script><noscript><img height='1' width='1' style='display:none' src='https://www.facebook.com/tr?id=1382286345172414&ev=PageView&noscript=1'/></noscript>
	</head>
</html>

<style>

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

/* #, ##, ###, ####*/
.phb h2, .phb h1 {color: #35402d; font-family: "EB Garamond";font-variant: small-caps; letter-spacing: 0.02em;}
.phb h3 {color: #35402d; border-bottom: 2px solid #d9b257; font-family: "EB Garamond"; font-variant: small-caps; letter-spacing: 0.02em}
.phb h4 {color: #000; font-family: "EB Garamond";font-variant: small-caps; letter-spacing: 0.02em;} 
.phb h5 {color: #000;}

/* Main Text, Lists, Links, First Letter after # */
p {font-family: "PT Serif", serif; font-size: 0.97em;}
ul {font-family: "PT Serif", serif; font-size: 0.97em;}
.phb {color; #000;}
.phb a{color: #204d01;}
.phb h1+p::first-letter{color:#04260a; vertical-align: text-top; line-height: 0.9em; padding-right: 1px}

/* 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/GEbo6n3.png);
    background-color: #d4d9d7;
}

/* Tables */
table tr:nth-child(odd) td {background-color: #a3adaa;}
.phb table {font-family: "Alegreya Sans";}
.phb table em {font-family: "Alegreya Sans";}
.phb table strong {font-family: "Alegreya Sans";}

/* Note Block */
.phb blockquote {background-color: #99a29f; font-size: 1em;}
.phb blockquote strong {font-family: "Source Sans Pro", letter-spacing: 0.02em;}
.phb blockquote italics {font-family: "Source Sans Pro", serif; letter-spacing: 0.02em;}
.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;}
.phb blockquote p {font-size: 1em; font-family: "Source Sans Pro"; letter-spacing: 0.02em; color: #000;}

/*Description Block*/
.phb .descriptive{background-color:#171a18; border-image:url(https://www.gmbinder.com/images/W2snoqV.png) 12 round; border-image-outset:4px;}
.phb .descriptive {color: #d4d9d6}
.phb .descriptive strong {font-family: "Source Sans Pro", serif; letter-spacing: 0.02em;}
.phb .descriptive italics {font-family: "Source Sans Pro", serif; letter-spacing: 0.02em;}
.phb .descriptive h1 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h2 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h3 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h4 {font-weight: 100; color: #d1e5d9}
.phb .descriptive h5 {font-weight: 100; color: #c3e5d4}
.phb .descriptive p {font-family: "Source Sans Pro"; font-size: 1em; letter-spacing: 0.02em; color: FFF;}

/* 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;
    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 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:"Source Sans Pro"; 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 p {color: #000; font-family: "Alegreya Sans"; letter-spacing: 0.02em; font-size: 1.02em;}
.phb hr+section blockquote p em {color: #000; font-family: "Lato"; font-size: 1em; letter-spacing: 0.02em}
.phb hr+section blockquote p strong {color: #000; font-family: "Lato"; font-size: 1em; letter-spacing: 0.02em}
.phb hr+section blockquote hr+ul {color: #000; font-family: "Alegreya Sans"; 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;}

/* 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          : -1;
    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          : -1;
    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      : #3b403e;
    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.

## Version 1.0

I'm finally (mostly) happy with this theme, I'll still make changes as needed
___
I've learned a lot about CSS code doing this - if you find yourself trying to figure out how to do something,  [w3schools.com](https://www.w3schools.com "A great CSS resource") is a pretty good resource
___
There is also a dark version of this theme [here](https://www.gmbinder.com/share/-LKYVliROX20cBbSI0r3 "Blackthorn Dark theme")

##### Class Block Wide

| Level | Proficiency Bonus | Features | More Features | Some Modifier |
|:---:|:---:|:--:|:---:|:---:
| 1st | +2 | something cool goes here | this feature exists | +3
| 2nd | +3 | another feature | running out of ideas | +4
| ... | +4  | unique homebrew feature | copied and pasted | +5
| 20th | +5 | godlike feature | ribbon ability | +42

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

### Changes

- More color changes
- Monster block has been redone
- I created a section break image - this can be seen on pg 3
- I used embedded google fonts for text and headings
- Lists use the same font

<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>
> Headings are white
> ___
> ## A Bigger Heading
> The heading font is carried over

##### Description Block Headings are colored

Text is off-white to improve readability on a dark background
 ___
 Headings fonts are carried over here too

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

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

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

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

\columnbreak

### Section Break Line Art

Here are divider images you can use to delineate sections
___
Link to the images:
<BR>
[https://www.gmbinder.com/images/YzRGlwW.png](https://www.gmbinder.com/images/YzRGlwW.png "section break line")
<BR>
[https://www.gmbinder.com/images/qPOuyuc.png](https://www.gmbinder.com/images/qPOuyuc.png "section break line")

\pagebreakNum

<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 Theme by /u/blckthorn</div>