-
-
Save joesinghaus/28173990b3235365f6e13fb9f834aa5d to your computer and use it in GitHub Desktop.
A better default roll template for Roll20
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Smaller margins - remove these if you want the huge default left margin */ | |
.sheet-rolltemplate-custom { | |
margin-left: -37px; | |
} | |
.withoutavatars .sheet-rolltemplate-custom { | |
margin-left: -7px; | |
} | |
.sheet-rolltemplate-custom .sheet-container { | |
border: 1px solid; | |
/* by default, the border is the same color as the header. You can change this here, e.g. to black */ | |
border-color: var(--header-bg-color); | |
} | |
/* Header formatting - title and subtitle */ | |
.sheet-rolltemplate-custom .sheet-header { | |
background-color: var(--header-bg-color); | |
/* change text-align to center to center the header text */ | |
text-align: left; | |
color: var(--header-text-color); | |
padding: 5px; | |
} | |
.sheet-rolltemplate-custom .sheet-title { | |
font-size:1.1em; | |
} | |
.sheet-rolltemplate-custom .sheet-subtitle { | |
font-size:.9em; | |
} | |
/* example colors */ | |
.sheet-rolltemplate-custom .sheet-container { | |
/* this is the default color */ | |
--header-bg-color: rgba(112,32,130,1); | |
--header-text-color: #FFF; | |
} | |
.sheet-rolltemplate-custom .sheet-container.sheet-color-red { | |
--header-bg-color: #F00; | |
} | |
.sheet-rolltemplate-custom .sheet-container.sheet-color-green { | |
--header-bg-color: #0F0; | |
--header-text-color: #000; | |
} | |
/* Allprops part */ | |
.sheet-rolltemplate-custom .sheet-content { | |
display: grid; | |
background: #FFF; | |
/* Header formatting - modify the column layout below */ | |
grid-template-columns: auto auto; | |
/* Line height to match default roll template */ | |
line-height:1.4em; | |
} | |
.sheet-rolltemplate-custom .sheet-content > div { | |
padding: 5px; | |
} | |
/* Left column */ | |
.sheet-rolltemplate-custom .sheet-content .sheet-key { | |
font-weight: bold; | |
padding-right: 10px; | |
text-align: right; | |
} | |
/* Empty rule, use this if you want to change the right column | |
.sheet-rolltemplate-custom .sheet-value { | |
} | |
*/ | |
/* Make even-numbered rows grey */ | |
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3), | |
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) { | |
background:#EEE; | |
} | |
/* Description field */ | |
.sheet-rolltemplate-custom .sheet-desc { | |
grid-column: span 2; | |
padding: 5px; | |
text-align: center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<rolltemplate class="sheet-rolltemplate-custom"> | |
<div class="sheet-container sheet-color-{{color}}"> | |
<div class="sheet-header"> | |
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}} | |
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}} | |
</div> | |
<div class="sheet-content"> | |
{{#allprops() title subtitle desc color}} | |
<div class="sheet-key">{{key}}</div> | |
<div class="sheet-value">{{value}}</div> | |
{{/allprops() title subtitle desc color}} | |
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}} | |
</div> | |
</div> | |
</rolltemplate> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment