Preface

I wrote this guide for those wanting to personalize their documents, beyond the basic styling or the snippets provided by GM Binder. It is meant as an easy reference that can be used to change certain things quickly, as well as a guide for those new to styling! However, this will not be a guide to CSS.

Though you could do this by looking at the CSS stylesheet, I wanted this guide to be a little easier on the eyes. This document provides you with snippets, but also teaches you how to customize them to your own taste. This is why you are here after all!

This is however not a guide on formatting, there are already guides on that!

If you are interested in how something is made, both Homebrewery and GM Binder can display their source code, which you can play around with to see how certain things are done.

Also useful is looking at the references for CSS, as they explain the syntax, usage and effects of certain snippets. They also have a handy list of the properties you can change.

<style>.phb h5{color:#c9ad6a;}</style>

<style>.phb#p1 h1{font-size: 200px;}
</style>

<div style="color:red">This text will be red.</div>

Hide footer

On some pages, you'll want the footer to be gone.

.phb#p⍰:after{display:none;}

Change Footer

You can set a new footer using:

.phb:after{background-image:url(⍰);}

Display Page Number on Last Page

You have two ways of displaying a page number on the last page. At the end of your last page include one of these snippets. These don't update automatically, so add these last. I have included one here:

<div class="pageNumber">⍰</div>

Start Page Numbering at 'X'

If you want the page numbers to start at something else as 1, you can use the following snippet, where X is the page you want to start the numbering at, and Y the page number you want to start with minus 1.

.phb#pX {counter-reset: phb-page-numbers Y;}

Columnbreak Fix

When you are having trouble fitting your content on a page, columnbreak can be a little bit of a hassle sometimes. Here is a hack that enables you to break your columns where you want. Keep in mind text or content might run into the footer.

.phb{padding-bottom:0.5cm;}

Color Change

Easily change colors in normal D&D5e styling with this snippet. Place the desired color codes or rgba in place of the question boxes.

:root{
--header: ⍰; /* Headercolors for h1 - h4 */
--subheader: ⍰; /* H5 */
--accent: ⍰; /* Underline, footnote, pagenumber, links*/
--backing: ⍰;} /* tables, notes, etc */
}
.phb h1, .phb h2, .phb h3, .phb h4{color:var(--header);}
.phb h3{border-bottom: 2px solid var(--accent);}
.phb h5{color:var(--subheader);}
.phb .pageNumber{color:var(--accent);}
.phb .footnote{color:var(--accent);}
.phb blockquote {background-color:var(--backing);}
.phb table tbody tr:nth-child(odd){background-color:var(--backing);}
.phb hr+section blockquote tr:nth-child(odd) td {background-color:transparent;}
.phb a, .phb .footnote a:hover, .phb a:active, .phb a:focus{color: var(--accent);}

Hue Shifting

You can use filter:hue-rotate(0deg); to change the hues of images used in your docs. For example, to change the color of the cover splotch. Keep in mind this will affect the entire class. If you hue-rotate .classTable for example, the table rows inside will rotate with it. Using variables will greatly reduce the number changing.

.cover-splotch{
  filter: hue-rotate(90deg);
  filter: saturate(5);
  -webkit-filter: hue-rotate(90deg) saturate(5);
  -moz-filter: hue-rotate(90deg) saturate(5);
  -o-filter: hue-rotate(90deg) saturate(5);
}

If you wanted a style to start on page 4, you'd use the following snippet. You can use :nth-child(odd/even) as well. For a more indepth look, I will refer you to the aformentioned fantastic document by CobaltZephyr.

.phb:nth-child(n+4){ }

Text

.phb h1, .phb h2, .phb h3, .phb h4{
margin-top:         .2em;               
margin-bottom:      .2em;
font-family:        MrJeeves;
font-weight:        800;
color:              #58180D;}

.phb h1{
column-span:        all;                
font-size:          .987cm;
-webkit-column-span:all;
-moz-column-span:   all;}

.phb h2{
font-size:          .705cm;             
}

.phb h3{
font-size:          .529cm;
border-bottom:      2px solid #c9ad6a   
}

.phb h4{
margin-bottom:      0;                  
font-size:          .458cm
}

.phb h5{
margin-bottom:      .2em;               
font-family:        ScalySansSmallCaps;
font-size:          .423cm;
font-weight:        900
}

.phb h6{}

P

.phb p{
line-height:        1.3em;}             

P+P

.phb p+p{
margin-top:         -0.8em;}            

Text Indentation

.phb p+p,                               
.phb ul+p,
.phb ol+p {
    text-indent:    1em
}

Text Decoration

.phb strong {
    font-weight:    bold;               
    letter-spacing: .03em
}
.phb em {
    font-style:     italic
}
.phb sup {
    vertical-align: super;
    font-size:      xx-small;
    line-height:    0
}
.phb sub {
    vertical-align: sub;
    font-size:      smaller;
    line-height:    0
}

First Letter after H1

.phb h1+p::first-letter {
    float:          left;
    font-family:    Solberry;
    font-size:      10em;
    color:          #222;
    line-height:    .8em
}

UL

.phb ul{
margin-bottom:      .8em;               
padding-left:       1.4em;
line-height:        1.3em;
list-style-position:outside;
list-style-type:    disc;
}

OL

margin-bottom:      .8em;               
padding-left:       1.4em;
line-height:        1.3em;
list-style-position:outside;
list-style-type:    decimal

Tables

.phb table {                            
    font-family: ScalySans;
    width: 100%;
    margin-bottom: 1em;
    font-size: 10pt;
    line-height: 1.1em
}
.phb table em {
    font-family: ScalySans;
    font-style: italic
}
.phb table strong {
    font-family: ScalySans;
    font-weight: 800;
    letter-spacing: -0.02em
}
.phb table thead {
    font-weight: 800
}
.phb table thead th {
    vertical-align: bottom;
    padding-bottom: .3em;
    padding-right: .1em;
    padding-left: .1em
}
.phb table tbody tr td {
    padding: .3em .1em
}
.phb table tbody tr:nth-child(odd) {
    background-color: #e0e5c1
}

Spell Lists

.phb .spellList{
 font-family:ScalySans;
 column-count:4;
 column-span:all;
 -webkit-column-span:all;
 -moz-column-span:all}
.phb .spellList em{font-family:ScalySans;font-style:italic}
.phb .spellList strong{font-family:ScalySans;font-weight:800;letter-spacing:-0.02em}
.phb .spellList ul+h5{margin-top:15px}
.phb .spellList p,.phb .spellList ul{font-size:.352cm;line-height:1.3em}
.phb .spellList ul{margin-bottom:.5em;padding-left:1em;text-indent:-1em;list-style-type:none;-webkit-column-break-inside:auto;column-break-inside:auto}

Class Table

.phb .classTable{
    margin-top:25px;
    margin-bottom:40px;
    border-collapse:separate;
    background-color:white;
    border:initial;
    border-style:solid;
    border-image-outset:25px 17px;
    border-image-repeat:round;
    border-image-slice:150 200 150 200;
    border-image-source:url('/assets/img/table-wrap.png');
    border-image-width:47px
}
.phb .classTable h5{
    margin-bottom:10px
}

Note

Descriptive Text Box

.phb .descriptive{
    display:block-inline;
    margin-bottom:1em;
    background-color:#faf7ea;
    font-family:ScalySans;
    border-style:solid;
    border-width:7px;
    border-image:url('/assets/img/sidebars.png') 12 round;
    border-image-outset:4px;
    box-shadow:0 0 6px #faf7ea
}
.phb .descriptive p{
    display:block;
    padding-bottom:0;
    line-height:1.5em
}
.phb .descriptive p+p{
    padding-top:.8em
}
.phb .descriptive em{
    font-family:ScalySans;
    font-style:italic
}
.phb .descriptive strong{
    font-family:ScalySans;
    font-weight:800;
    letter-spacing:-0.02em
}
.phb pre+.descriptive{
    margin-top:8px
}

PHB Part page

.phb .partpage{
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    right:0;
    background-image:url('/assets/img/pph.png');
    background-size:cover;
    background-position:center;
    height:217px
}
.phb .partpage h1{
    font-family:NodestoCaps;
    font-size:64pt;
    font-weight:normal;
    letter-spacing:-2px;
    margin:12px 0 -17.5px 0
}
.phb .partpage h5{
    font-family:ScalaSans;
    font-size:13pt;
    color:#58180D
}

DMG Part page

.phb .partpage-dmg{
    text-align:center;
    position:absolute;
    top:0;
    left:0;
    right:0;
    background-image:url('/assets/img/pph-dmg.png');
    background-size:cover;
    background-position:center;
    height:206px
}
.phb .partpage-dmg h1{
    font-family:NodestoCaps;
    font-size:64pt;
    font-weight:normal;
    letter-spacing:-2px;
    margin:12px 0 -12.5px 0
}
.phb .partpage-dmg h5{
    font-family:ScalaSans;
    font-size:13pt;
    color:black
}

Document

.phb{
    color:#000;
    column-count:2;
    column-fill:auto;
    column-gap:1cm;
    column-width:8cm;
    -webkit-column-count:2;
    -moz-column-count:2;
    -webkit-column-width:8cm;
    -moz-column-width:8cm;
    -webkit-column-gap:1cm;
    -moz-column-gap:1cm;
    counter-increment:phb-page-numbers;
    position:relative;
    z-index:15;
    box-sizing:border-box;
    overflow:hidden;
    height:279.4mm;
    width:215.9mm;
    padding:1cm 1.7cm;
    padding-bottom:1.5cm;
    background-color:#EEE5CE;
    background-image:url('/assets/img/phb_bg.png');
    font-family:BookSanity;
    font-size:.317cm;
    text-rendering:optimizeLegibility;
    page-break-before:always;
    page-break-after:always;
    margin:30px auto;
    box-shadow:1px 4px 14px #000
}

Footer

.phb:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 55px;
    width: 100%;
    background-image: url('/assets/img/footer.png');
    background-size: cover
}
.phb:nth-child(even):after {transform: scaleX(-1)}
.phb:nth-child(even) .pageNumber {left: 2px}
.phb:nth-child(even) .footnote {
    left: 80px;
    text-align: left
}

Page Number

.phb .pageNumber{
    position:absolute;
    right:2px;
    bottom:23px;
    width:50px;
    font-size:.9em;
    color:#c9ad6a;
    text-align:center
}

Footnote

.phb .footnote{
    position:absolute;
    right:80px;
    bottom:37px;
    width:200px;
    font-size:.8em;
    color:#c9ad6a;
    text-align:right
}

Table of Contents

.phb .toc{
    -webkit-column-break-inside:avoid;
    column-break-inside:avoid
}
.phb .toc a{
    color:black;
    text-decoration:none
}
.phb .toc a:hover{
    text-decoration:underline
}
.phb .toc ul{
    padding-left:0;
    list-style-type:none
}
.phb .toc>ul>li{
    margin-bottom:10px

.toc a {
 color: inherit !important;	/*toc specifically wants black text. This resets the headers*/}
.toc li span:nth-child(2){ /*Allow dot leaders to fill remaining space but not overlap*/
 width: auto;
 overflow: hidden;
 white-space: nowrap; 
 display: block;}
.toc li span:nth-child(2):after{
 font-family: BookSanity; /*Remove any header styles from dot leaders*/
 font-size: 0.317cm;
 font-weight: normal;
 color: black;
 content:" ........................................" "........................................." ".........................................";}
.toc li span:first-child{ /*Remove any header styles from page numbers*/
 float: right;
 font-family: BookSanity;
 font-size: 0.317cm;
 font-weight: normal;
 color: black;
 margin-left: 1px; /*Leaves a small space between page numbers and dot leaders*/}
/*Special cases for headings*/    
.toc li h3 span:nth-child(2):after{content: " ";/*Remove dot leaders on h3*/}
.toc li h3 {
 margin-bottom: 4px !important;	/*Special spacing for h3*/
 margin-top: 10px !important;
 line-height: initial !important; /*For some reason Multi-line h3 line spacing changed*/}
.toc li h3 span:first-child{line-height: 1.8em !important;  	/*Line page numbers up with Multi-line h3 better*/}
.toc ul ul {margin-left: 10px !important; /*Original lists intented too much*/}
.toc>ul>li {margin-bottom: initial !important; /*margin for list items needs to be removed or 0*/}