Physical Character Sheet Art into Custom Sheets

Be sure to read and follow the guidelines for our forums.

Feb 13, 2023 6:27 pm
I was learning about Mork Borg recently and was enjoying the creativity of the art/design and thought it would be great if we could include the art/design of physical character sheets with our digital custom sheets.

I've managed to create an interesting hybrid (HERE).
[ +- ] Original Screenshot
Updated Screenshot in response to comments:
https://i.imgur.com/dNMkYlB.jpg

It uses an image of the physical character sheet with fillable text fields layered on top and linked roll tables and extra details in spoilers underneath. I adapted some of nezzeraj's awesome design for the digital portion (HERE).

I've tested it in various conditions (light, dark, desktop, mobile) and it seems usable, but it's a pretty new format for me, so could have some bugs.

One issue is that it overflows if your browser window is significantly wider than GP's layout width (i.e. the width of posts/sheets), which happens on my desktop when I have my browser window maximized. It's still completely usable like that, just not as pretty. You can avoid this by adjusting the width of your browser window or zoom, but it would be nicer if it scaled properly. On my mobile, it seems to scale reasonably well. (Issue Solved by TheGenerator!)

I'm not sure it's complete/working enough to be a template, but I thought I'd share, so if anyone's interested in using or adapting any of the character sheet layout ideas inside, here's the code (updated with TheGenerator's CSS fix and nezzeraj's fillable empty slots):
[ +- ] Mork Borg Art
Unfortunately, it's a bit complicated with lots of nested f tags. It was a lot of trial and error, so I'm not even sure I fully understand how/why some of the code works, but if you have questions I can try to explain.

Regarding the overflow issue, if you set the width in the f tag on the fourth line to 100% instead of 80vw, then the image of the physical character sheet scales properly in all conditions, but the overlaying text fields don't, which is why I've kept it relative to the browser width for now. This is because the only way I've found to scale the text properly is relative to the browser width (i.e. viewport width).

But, if anyone knows how to scale font-size based on the character sheet width (i.e. container), let me know because that would fix the issue!
(Solved by TheGenerator)
Last edited February 16, 2023 7:15 am
Feb 13, 2023 10:23 pm
This is really cool, Chalry! :D

I did some messing around with your code and changed a bit of CSS to help your overflow problem. Try this change on the first few lines:
[f=display:block margin-left:50% transform:translateX(-50%) width:80vw]
[f=display:block position:relative padding-bottom:70.5% max-width:950px margin-left:auto margin-right:auto]
[f=position:absolute width:100% height:100% background-size:contain background-repeat:no-repeat 
background-image:url(https://i.imgur.com/SdcfBwk.jpg) max-width:950px]
[f=display:block line-height:100% font-nightshade bold color:red background-color:rgba(0,0,0,0) 
width:1vw height:1vw position:absolute left:12% top:min(9%,60px) font-size:min(2.5vw,200%)][_=Katla][/f]


You'd have to put in a min() for every text field though.

Example here
Last edited February 13, 2023 10:26 pm
Feb 14, 2023 4:49 am
TheGenerator says:
This is really cool, Chalry! :D

I did some messing around with your code and changed a bit of CSS to help your overflow problem.
Awesome, that did the trick! I've updated the code in the OP to make this fix.

Thanks @TheGenerator!
Feb 14, 2023 8:35 am
Any way to add form-fillable fields for the 2nd weapon, armor slot, powers and equipment?
Feb 14, 2023 9:28 am
Nice! You can also use themes to add art to character sheets.

Whilst not as dramatic as your styling, here, the D&D scroll graphic is applied behind blocks on character sheets.
https://i.imgur.com/NgfObr3.png
If you use certain styles a lot, then you can also use theme styling to create your own f attributes which can be used anywhere.

e.g. Dragonlance often uses Celtic knots in their artwork, so I wanted a common knotted parchment block.
https://i.imgur.com/mXs0xWq.png

e.g. Here I'm using my own fancy-knot and font-cyoa f attributes (cyoa for "choose your own adventure" because I can't remember how to spell "Benguiat").

https://i.imgur.com/V5EkHRA.png

These new attributes are defined by adding to my game's theme using a gpFormat- prefix. e.g.
https://i.imgur.com/Sy76lMd.png

The gargantuan drawback is that it only works for gamers who have theming installed.
Feb 14, 2023 11:56 am
That's so cool. Hopefully in GP v2 themes will be integrated and you can just choose or make your own and add them to a game like you do dice rules and character sheets.
Feb 14, 2023 2:29 pm
That is an awesome looking sheet!
Feb 15, 2023 7:32 am
nezzeraj says:
Any way to add form-fillable fields for the 2nd weapon, armor slot, powers and equipment?
Definitely, I don't have time tonight, but if you want to try yourself you just add another one of these:

[f=display:block line-height:100% font-nightshade bold color:red background-color:rgba(0,0,0,0) width:20vw height:1vw position:absolute left:72% top:14.25% font-size:min(2.5vw,200%)][_melee=Shortsword][/f]


Change "_melee" to "_ranged" or "_armor" and fiddle with the "left" and "top" percentages to move the text around until you get it in the right spot (left:0% top:0%, is the top left had corner of the background image).

Then you can update the Roll table with those var names instead of fillable text like I did with melee.

If I have time tomorrow, I might add an empty text field to each equipment slot too, so more can be added without having to edit the sheet.
Feb 15, 2023 7:46 am
Adam says:
Nice! You can also use themes to add art to character sheets.
That's very cool too! I keep forgetting to check out the tamper monkey stuff. I was quite busy when those tools dropped and forgot to check back. Thanks for the reminder.

Incidentally, does this mean you're planning a Dragonlance game? And if so, any chance you have a spot available? Dragonlance was my first foray into ttrpgs when I was young, so it would be very nostalgic to revisit Krynn. Having said that, I've only played D&D 5e once, LMoP, so I'm not very experienced if that matters. Anyways, keep me in mind if you're looking for players in the future.
Feb 15, 2023 7:46 am
Windyridge says:
That is an awesome looking sheet!
Thanks Windy!
Feb 15, 2023 8:51 am
Chalrytharendir says:
Incidentally, does this mean you're planning a Dragonlance game?
OOC:
Dunno, mate. Sometimes I set up games, art, maps, first posts, etc. just to see if I like the feel of them. But I'll bear you in mind.
Feb 15, 2023 4:00 pm
Adam says:
OOC:
Dunno, mate. Sometimes I set up games, art, maps, first posts, etc. just to see if I like the feel of them. But I'll bear you in mind.
I can relate to that, I have no immediately plans to run or play Mork Borg 😆 Just poking around and then had this idea and thought it would be worth sharing.
Feb 16, 2023 7:16 am
nezzeraj says:
Any way to add form-fillable fields for the 2nd weapon, armor slot, powers and equipment?
Updated in the original post.
Feb 16, 2023 7:47 am
Chalrytharendir says:
Updated in the original post.
Amazing!

You do not have permission to post in this thread.