GM Binder Styling Reference

by Rhaenon

Search GM Binder Visit User Profile
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!

Contents

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.

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
}

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

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

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  

 

This document was lovingly created using GM Binder.


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