GM Binder Styling Reference

Introduction

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.

Snippet Symbols

⍰ = value goes here

Word of Warning

If you are completely unfamiliar with html and css, it is strongly recommended to at least get a grasp of the basics before proceeding. Codecademy is a great place to learn the languages we will be using in this document. CSS Validators can be useful for finding mistakes, but remember that you are overwriting an existing style.

If you do go ahead and want to play around with this, try it on a test document first. You could use the Theme Tester provided by /u/iveld.

When changing these things, it can happen that some features of GM Binder don't work as intended. For example, changing the page size doesn't necessarily result in a printable document. Keep this in mind when using these types of modifications. Certain snippets, like "notes" might no longer work when you change text sizes drastically.

If you are about to report a bug, try your basic formatting (without any styling) in a different testing document first. It could very well be your styling responsible for the bug!

Chapter 0: The Style Tag

To change anything, first you have to know where to put any of these changes. To write your documents, you use Markdown. But, when you want to change the colors of headers for example you use the <style> and </style> HTML tags. Between those tags you can put your CSS style changes. These will override the standard stylesheet. I recommend putting these at the start of your document.

Document or Page Style?

Sometimes you want to change styling for the entire document, but every so often you'll want to change just a single page.

If you'd to change the color of the h5 header ##### for the entire document, you would use the following code:

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

But when you would want to change the size of the h1 header (#) for only the front page, just to increase the size of your cover title, you can't use the code found above, as this will change h1 for the entire document. Instead, you would use the following code:

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

You could replace #p1 with any page number by just changing the 1 (#pXYZ).

Div Styling

It is also possible to change some of the styling within the html <div> tag. If you'd want to make a paragraph of text red:

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

As you can see here:

This text will be red.

Let's look at changing the look of things commonly used in D&D 5E homebrew content!

4Chapter 1: Common Questions
6Appendix A: Defaults
6Text
8Snippets
14Page Elements
15Other
- 15Table of Contents

Credits

Written by Rhaenon.

Special Thanks to

CobaltZephyr

Iveld,

metaBot,

& SwordMeow.

Cover Art:

Delve Into Madness by Bonify
[CC BY-NC-ND 3.0]

Chapter 1: Common Questions

After trying out the style snippets provided by GM Binder you were still not satisfied with the existing styles or were inspired to create your own. A good place to start is modifying and studying the existing snippets. If you're not familiar with CSS, I would recommend you do a little research into that. It is not as difficult as it might seem!

Below are some common things you might want to change, as snippets.

General Advice for GMB Styling
Only include as much as it would take to get your style across. If you like the look of PHB but with only a few changes, such as font and heading customization, only do that. If you want to overhaul it, keep the css streamlined and make sure it doesn't have unintended effects (such as making statblocks look weird). Basically do enough to achieve how you want it to look, but don't go overboard for the sake of doing it.

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

Variables

As you can see in the colors section, you can use variables to make the process easier. Declaring variables is done within the root selector, and you can use a variable by using var(--name). This will make playing around with colors a lot easier.

Fancy Table of Contents

If you'd like to use a fancy table of contents, like the one found in this document, scroll down to Appendix A: Table of Contents for the snippet.

Multi Page Styling

When wanting to change the styling for multiple changes at once, you can use the following selectors:

.phb#p1,.phb#p2,.phb#p3,...

However, if you are going to change 50 pages, this is not efficient. CobaltZephyr has worked on an Alternative PHB Styles document where each part has their own accent colors. CobaltZephyr found the following alternative to the aforementioned selection method.

This is an advanced method, which works best for footers, but can cause some issues when used with tables for example.

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){ }

Appendix A: Defaults

Text

Headers

Headers are used a lot throughout your content. They provide the structure that makes your homebrew easy on the eyes. Before changing the values, you'd first have to know what the default is.

H1 - H2 - H3 - H4

These properties and values apply for all of these headers. Change these values by using .phb h1, h2, h3, h4{;}

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

H1

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

H2

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

H3

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

H4

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

H5

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

H6

.phb h6{}

Paragraphs

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
}

Lists

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

Snippets

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
}

Notes

Note

.phb blockquote {
    font-family: ScalySans;
    box-sizing: border-box;
    margin-bottom: 1em;
    margin-top: 9px;
    padding: 5px 10px;
    background-color: #e0e5c1;
    border-style: solid;
    border-width: 11px;
    border-image: url('/assets/img/note-wrap.png') 11;
    border-image-outset: 9px 0;
    box-shadow: 1px 4px 14px #888
}
.phb blockquote em {
    font-family: ScalySans;
    font-style: italic
}
.phb blockquote strong {
    font-family: ScalySans;
    font-weight: 800;
    letter-spacing: -0.02em
}
.phb blockquote p,
.phb blockquote ul {
    font-size: .352cm;
    line-height: 1.1em
}
.phb pre+blockquote,
.phb h2+blockquote,
.phb h3+blockquote,
.phb h4+blockquote,
.phb h5+blockquote {
    margin-top: 13px}
.phb blockquote h5 {
    margin-top: 0}

Descriptive Text Box

Catchy Title

Useful information

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

Monster Stat Block

.phb hr+section blockquote {
    position: relative;
    padding-top: 15px;
    background-color: #FDF1DC;
    border-style: solid;
    background-image: url('/assets/img/blockquote-bg.png');
    border-image: url('/assets/img/blockquote-wrap.png');
    background-position: center;
    border-width: 8px;
    border-image-slice: 20
}
.phb hr+section blockquote h2 {
    margin-top: -8px;
    margin-bottom: 0
}
.phb hr+section blockquote h2+p {
    padding-bottom: 0
}
.phb hr+section blockquote h3 {
    font-family: ScalySans;
    font-weight: 400;
    border-bottom: 1px solid #58180D
}
.phb hr+section blockquote hr+ul {
    color: #58180D
}
.phb hr+section blockquote ul {
    font-family: ScalySans;
    padding-left: 1em;
    font-size: .352cm
}
.phb hr+section blockquote ul em {
    font-family: ScalySans;
    font-style: italic
}
.phb hr+section blockquote ul strong {
    font-family: ScalySans;
    font-weight: 800;
    letter-spacing: -0.02em
}

.phb hr+section blockquote hr+table {
    margin: 0;
    column-span: 1;
    background-color: transparent;
    border-style: none;
    border-image: none;
    -webkit-column-span: 1
}
.phb hr+section blockquote hr+table tbody tr:nth-child(odd),
.phb hr+section blockquote hr+table tbody tr:nth-child(even) {
    background-color: transparent
}
.phb hr+section blockquote table {
    color: #58180D
}
.phb hr+section blockquote p+p {
    margin-top: 0;
    text-indent: 0;
    margin-bottom: 7px
}
.phb hr+section blockquote hr {
    visibility: visible;
    height: 6px;
    margin: 4px 0;
    background-image: url('/assets/img/arrow-right.png');
    background-size: 100% 100%;
    border: none

Wide Monster Stat Block

.phb hr+hr+section blockquote {
    column-count: 2;
    column-fill: auto;
    column-gap: 1cm;
    column-width: 7.68cm;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-width: 7.68cm;
    -moz-column-width: 7.68cm;
    -webkit-column-gap: 1cm;
    -moz-column-gap: 1cm
}

Images

.phb .image-top{
    position:absolute;
    left:0;
    top:0;
    width:824px
}
.phb .image-right{
    position:absolute;
    right:0;
    top:0;
    height:1066px
}
.phb .image-bottom{
    position:absolute;
    left:0;
    bottom:0;
    width:824px
}
.phb .image-left{
    position:absolute;
    left:0;
    top:0;
    height:1066px
}
.phb .image-top-left{
    position:absolute;
    left:0;
    top:0
}
.phb .image-top-right{
    position:absolute;
    right:0;
    top:0
}
.phb .image-bottom-right{
    position:absolute;
    right:0;
    bottom:0
}
.phb .image-bottom-left{
    position:absolute;
    left:0;
    bottom:0
}
.phb img{
    z-index:-1
}

Cover (Front)

.phb .cover-header{
    position:absolute;
    font-family:NodestoCaps,nodesto,sans-serif;
    transform:scale(2, 2) !important;
    font-weight:normal;
    font-size:36px;
    color:white;
    width:700px;
    text-shadow:1px 1px 2px #000000,-1px 1px 2px #000000,1px -1px 2px #000000,-1px -1px 2px #000000;
    transform:scaleY(3) scaleX(1);
    top:50px;
    text-align:center
}
.phb .cover-image{
    position:absolute;
    top:0;
    left:0;
    width:824px
}
.phb .cover-diamond{
    background-image:url('/assets/img/DiamondDD.png');
    background-size:400px;
    background-repeat:no-repeat;
    position:absolute;
    left:210px;
    top:115px;
    width:400px;
    height:12px
}
.phb .cover-splotch{
    background-image:url('/assets/img/UNR8ilF.png');
    background-size:350px;
    position:absolute;
    left:0;
    bottom:180px;
    width:345px;
    height:56px
}
.phb .cover-footer{
    position:absolute;
    font-family:ScalySans;
    font-size:20px;
    color:white;
    bottom:50px;
    right:55px;
    width:700px;
    text-shadow:1px 1px 2px #000000,-1px 1px 2px #000000,1px -1px 2px #000000,-1px -1px 2px #000000;
    filter:opacity(100%);
    text-align:center

Cover (Back)

.phb .back-cover-image{
    position:absolute;
    height:1066px;
    left:0;
    top:0;
    width:475px;
    background-image:url('/assets/img/backcover-bg.png');
    background-size:475px 1066px;
    z-index:-1
}
.phb .back-cover-diamond{
    background-image:url('/assets/img/DiamondDD.png');
    background-size:280px;
    background-repeat:no-repeat;
    position:absolute;
    left:90px;
    top:110px;
    width:280px;
    height:8px
}
.phb .back-cover-logo{
    background-image:url('https://www.gmbinder.com/assets/img/logo-stacked-light.png');
    background-size:120px;
    position:absolute;
    left:165px;
    bottom:95px;
    width:120px;
    height:74px
}
.phb .back-cover-logo-link{
    text-align:center;
    font-family:sans-serif;
    position:absolute;
    bottom:30px;
    left:145px
}
.phb .back-cover-logo-link p{
    font-family:ScalySans,sans-serif;
    line-height:1.6em !important;
    font-size:16px;
    padding-bottom:25px
}
.phb .back-cover-logo-link a{
    color:#fff;
    text-decoration:none
}

.phb .back-cover-header{
    color:#ff2a1a;
    font-family:NodestoCaps,sans-serif;
    font-size:64px;
    text-align:center;
    text-shadow:1px 1px 2px #000000,-1px 1px 2px #000000,1px -1px 2px #000000,-1px -1px 2px #000000
}
.phb .back-cover-header p{
    text-indent:0;
    padding-bottom:15px
}
.phb .back-cover-header p+p{
    text-indent:0
}
.phb .back-cover-text{
    color:#fff;
    font-family:sans-serif
}
.phb .back-cover-text a{
    color:#AC8F66
}
.phb .back-cover-text p{
    font-family:ScalySans,sans-serif;
    line-height:1.6em !important;
    font-size:16px;
    padding-bottom:25px
}
.phb .back-cover-text p+p{
    text-indent:0
}
.phb .back-cover-close{
    color:#fff;
    text-align:center;
    font-family:sans-serif
}
.phb .back-cover-close a{
    color:#AC8F66
}
.phb .back-cover-close p{
    font-family:ScalySans,sans-serif;
    line-height:1.6em !important;
    font-size:16px;
    padding-bottom:25px
}
.phb .back-cover-close p+p{
    text-indent:0
}
.phb .back-cover-right{
    padding-left:60px
}

Part header

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
}

Page Elements

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
}

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

Other

.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

Popular override by /u/calculuschild:

.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*/}

Welcome to your next campaign binder!

Overview on Creating

GMBinder uses markdown for its primary content. To learn about Markdown and its supporting syntax, check this out

In addition, GM Binder allows for HTML content within your document. However, "User Beware" warnings apply. Especially now in this early stage. Using HTML for things like images and links is pretty safe. However, structured HTML like divs, tables, etc, may have undesired consequences.

GMBinder Specific

Page Breaks

Using \pagebreak will result in a page break. Or press Ctrl+; or Cnd+; to insert this.
Using \pagebreakNUm will result in a page break with page number. Or press Ctrl+' or Cnd+' to insert this.

Images

There are a couple ways you can place images. If you would like something positioned like you see on this page, you will need to provide the appropriate styles to do so. For example:

<img src='https://www.gmbinder.com/assets/img/books.jpg' style='position:absolute;bottom:45px;right:30px;width:380px; mix-blend-mode:multiply;' />

If you would like to place an image in-line within your content, simply providing an image tag with an external URL will be sufficient. Do be aware that your images should be sized appropriately for the content.

Wrapping to Column Two

Sometimes you want your content in column 1 to be cut short and continue on to column 2. The simplest way to accomplish this is to use:

\columnbreak

You can also press Ctrl+. or Cnd+. to insert this.

Footnotes

This is an example of using html and built in styles to get a desired output.

<div class='footnote'>Part 1 | Introduction</div>

Part 1 | Tutorial

Basic Editor Shortcuts

Find and Replace

Ctrl+F or Cmd+F - Find
Alt+Ctrl+F or Alt+Cmd+F - Find & Replace

Editing

Ctrl+Z or Cmd+Z - Undo
Ctrl+Shift+Z or Cmd+Shift+Z - Redo
Ctrl+D or Cmd+D - Remove current line
Ctrl+U - Uppercase current selection
Ctrl+Shift+U - Lowercase current selection

Content Folding

F2 - Fold / Unfold a block of content
Ctrl+Cmd+Alt+0 Fold everything
Shift+Cmd+Alt+0 UnFold everything

And Much More...

Ctrl+Alt+H or Cmd+Alt+H Shows all Editor Shortcuts

Ready. Set. Go!

This is your playground. Feel free to remove this and the content above, or keep it around for a reference.

Part 2 | Your Introduction

Add a

touch

of style

People love to see pretty documents when searching for new homebrew content. With the power of a dark magic known to Earth as CSS, you create beautiful templates to use for your content.

Use this reference to personalize your documents for your game and needs. Practice good practices, like useful naming conventions and not repeating yourself. Smaller is faster.

When you're ready to share with the community, don't forget to mark your document as public so people can find it in the GM Binder Search

Created for

WWW.GMBINDER.COM

This document was lovingly created using GM Binder.

If you would like to support the GM Binder developers, consider joining our Patreon community.

Updated GM Binder Styling Reference

Introduction

Preface

Snippet Symbols

Word of Warning

Chapter 0: The Style Tag

Document or Page Style?

Div Styling

Contents

4Chapter 1: Common Questions

6Appendix A: Defaults

6Text

8Snippets

14Page Elements

15Other

Credits

Chapter 1: Common Questions

Hide footer

Change Footer

Display Page Number on Last Page

Start Page Numbering at 'X'

Columnbreak Fix

Color Change

Hue Shifting

Variables

Fancy Table of Contents

Multi Page Styling

Appendix A: Defaults

Text

Headers

H1 - H2 - H3 - H4

H1

H2

H3

H4

H5

H6

Paragraphs

P

P+P

Text Indentation

Text Decoration

First Letter after H1

Lists

UL

OL

Snippets

Tables

Spell Lists

Class Table

Notes

Descriptive Text Box

Catchy Title

Monster Stat Block

Wide Monster Stat Block

Images

Cover (Front)

Cover (Back)

Part header

PHB Part page

DMG Part page

Page Elements

Document

Footer

Page Number

Footnote

Other

Table of Contents

Popular override by /u/calculuschild:

Welcome to your next campaign binder!

Overview on Creating

GMBinder Specific

Page Breaks

Links

Table of Contents

Images

Wrapping to Column Two

Footnotes

Basic Editor Shortcuts

Find and Replace