Alternative Player's Handbook Styles
This is a showcase of slight modifications to the default PHB style that covers the other styles used in the Player's Handbook updated with GMBinder image links. These modifications change the colour of 3 things; notes, tables and the corners.
Technical Nonsense
When combining multiple styles in a single there are things you need to be aware of; styles overwrite each other when they are in the same range; for smaller documents it is easier to define the range as a list, for larger documents it is easier to use 2 nth-child() selectors to define a range.
Example: We want to select every page after 4 that is an even page number.
List:
.phb#p4,.phb#p6,.phb#p8,.phb#p10...,.phb150:after{}
Nth-Child Selector:
.phb:nth-child(n+4):nth-child(even):after{}
The 4 in (n+4) means page 4 in this case.
The first selector sets the first number in the range, and the second selector tells it to choose even numbers only.
As you can see the listing method is easier to use and understand, however it gets very unwieldy the more pages you need to select. Whereas the nth-child method is more complex and unwieldy for smaller amounts of pages, but it becomes easy to define larger ranges.
Player's Handbook Part 2 Style
This is the style for part 2 of the Player's Handbook.
Note Example
This is the colour of a Part 2 note.
Table Example
| d8 | Loot |
|---|---|
| 1 | 100gp |
| 2 | 200gp |
| 3 | 300gp |
| 4 | 400gp |
| 5 | 500gp |
| 6 | 600gp |
| 7 | 700gp |
| 8 | 1000gp |
The Style for Part 2
<style>
/* Notes */
.phb:nth-child(n+3) blockquote {background-color: #d6f8ff}
.phb:nth-child(n+3) hr + blockquote tr:nth-child(odd) td {background-color: #fdf1dc;}
/* Tables */
.phb:nth-child(n+3) table tr:nth-child(odd) td {background-color: #d6f8ff}
/* Footer */
.phb:nth-child(n+3):nth-child(odd):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/SrlGWc0.png');
background-size : cover;
}
.phb:nth-child(n+4):nth-child(even):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/SrlGWc0.png');
background-size : cover;
transform: scaleX(-1);
}
</style>
PHB Part 3 Style
This is the style for Part 3 of the Player's Handbook.
Note Example
This is the colour of a Part 3 note.
Table Example
| d8 | Loot |
|---|---|
| 1 | 100gp |
| 2 | 200gp |
| 3 | 300gp |
| 4 | 400gp |
| 5 | 500gp |
| 6 | 600gp |
| 7 | 700gp |
| 8 | 1000gp |
The Style for Part 2
<style>
/* Notes */
.phb:nth-child(n+4) blockquote {background-color: #e9e3ed}
.phb:nth-child(n+4) hr + blockquote tr:nth-child(odd) td {background-color: #fdf1dc;}
/* Tables */
.phb:nth-child(n+4) table tr:nth-child(odd) td {background-color: #e9e3ed}
/* Footer */
.phb:nth-child(n+4):nth-child(odd):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/hOdwYQn.png');
background-size : cover;
}
.phb:nth-child(n+5):nth-child(even):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/hOdwYQn.png');
background-size : cover;
transform: scaleX(-1);
}
</style>
PHB Appendix Style
This is the style for the Appendices of the Player's Handbook.
Note Example
This is the colour of an appendix note.
Table Example
| d8 | Loot |
|---|---|
| 1 | 100gp |
| 2 | 200gp |
| 3 | 300gp |
| 4 | 400gp |
| 5 | 500gp |
| 6 | 600gp |
| 7 | 700gp |
| 8 | 1000gp |
The Style for the Appendices
<style>
/* Notes */
.phb:nth-child(n+7) blockquote {background-color: #e0d8ba}
.phb:nth-child(n+7) hr + blockquote tr:nth-child(odd) td {background-color: #fdf1dc;}
/* Tables */
.phb:nth-child(n+7) table tr:nth-child(odd) td {background-color: #e0d8ba}
/* Footer */
.phb:nth-child(n+7):nth-child(odd):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/RhGLT0t.png');
background-size : cover;
}
.phb:nth-child(n+8):nth-child(even):after{
content : '';
position : absolute;
bottom : 0px;
left : 0px;
height : 55px;
width : 100%;
z-index : -10;
background-image : url('https://www.gmbinder.com/images/RhGLT0t.png');;
background-size : cover;
transform: scaleX(-1);
}
</style>
Thanks
For
Reading
Written
Special Thanks
u/Rhaenon - For helping me find the default page styling and art assets used by GMBinder
u/Iveld - Who along with the folks over at We Write Code made this wonderful program
u/JorgeRMH & u/AeronDrake - Whose styles/themes helped point me in the right direction when modifying the base PHB style.
Art
Footer Art - GMBinder
I am not perfect. I am also not confident in the colours I have picked for the notes and the tables. If you have any recommendations for specific colours or any other recommendation for that matter, message me on Reddit or on Discord where my name is Cobalt#5245.