Character Sheet – CSS Example

Finishing Up and Fine Tuning

That’s the sheet pretty much finished. I give it the once-over and do some fine-tuning. At this point, I notice some of my declarations are affecting the Attributes & Abilities tab:

It’s possible to restrict those styles to just the character sheet tab, by adding .charsheet (and thus limiting them to that tab), but I decide to leave them as is for fun.

The JSON Properties, especially useroptions

Creating a sheet.json is covered under Publishing To GitHub, but I also want to add a couple of default sheet settings, so my sheet.json file looks like this:

{
	"html": "falkenstein.html",
	"css": "falkenstein.css",
	"authors": "GiGs",
	"roll20userid": "157788",
	"preview": "falkenstein.jpg",
	"useroptions": [
		{
			"attribute": "cardvalue",
			"displayname": "Ask For Card Value: ",
			"type": "checkbox",
			"value": "?{Modifier?|0}",
			"checked": "checked",
			"description": "Ask for the value of the played cards when making rolls."
		},
		{
			"attribute": "show_name",
			"displayname": "Show Name On Rolls: ",
			"type": "select",
			"options": [
				"Show Name|{{name=**@{character_name}**}}",
				"Hide Name| "
			],
			"default": "{{name=**@{character_name}**}}",
			"description": "Show the character name when making rolls."
		}
	],
	"instructions": "A character sheet for the Castle Falkenstein game system, made for a Sheet Author tutorial series at https://cybersphere.me. Please don't edit this sheet, since it will be regularly updated for series over the course of this year (2022)."
}Code language: JSON / JSON with Comments (json)

Notice in the useroptions, I have declared the attribute on the sheet these options will be saved to, and the values are not simple 1/0 type values. Those attributes need fairly complex strings to work right.

Wiki Guide

As a final, optional, step, I added a page for the sheet over at the wiki.

Castle Falkenstein Sheet Wiki Page.

Anyone can create pages there, but you need to request permission to upload images. That’s just a matter of waiting a couple of days for confirmation the first time. After you have permission, you don’t need to ask again.

The Complete Code

And there we have it. The sheet is complete.

By the time you read this, the code is probably on roll20’s GitHub. But I’ve attached the entire contents HTML, CSS, JSON, sheet image and button images, to a zip file here.

Castle Falkenstein – CSS Sheet
Series Navigation<< Advanced Positioning

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.