So I heard you’d like to make some borders for the Roll20 Character Sheet. That’s great, how about I tell you how to do it!
Basically, you just need a simple image that follows a few rules about dimensions. Think about a grid, specifically the hashtag or tic-tac-toe. All I need is an image, then it is cut into that grid automatically by the magic of HTML and CSS to create the border around anything used on the Character Sheet.
So for example, these are the 2 images currently being used for output to chat and to surround the Character Information box in the background section of the sheet.
The code on the site will automatically make the borders by 10 pixels wide and/or tall, but as youc an see, you can make the images bigger. In the case of the paper border above, it is designed for 10 pixels out of the box, where as the other border is designed at 25 pixels. That’s fine, as long as I know that.
Grids
From each line, it is 25 pixels to the edge of the image. This then creates a grid to define what each corner of a border is. The part of the border that will “stretch” or “copy” itself is between each corner. The middle is ignored.
You can actually make the image be wider or taller, and that’s fine up to a point, more so for the width. The borders need to be able to stretch or adapt to fit what it is around. With the new sheet, I will be making the max width of most borders be 250 pixels. With a border of 10 pixels, that means the top and bottom “inbetween” graphic can be 230 pixels if you wanted to create it unique and fancy across the whole width
10 pixel Top Left Corner :: 230 pixel Top Center :: 10 pixel Top Right Corner
If you make the original image larger, like above, then you just have to multiple those numbers (yeppie math), in this case by 2.5 (since 10 pixel is the desired border, and the image is making it 25).
25 pixel Top Left Corner :: 575 pixel Top Center :: 25 pixel Top Right Corner
Confused yet? You might be, and that’s ok. It took me a hot minute to understand it.
The most Basic thing you need to do
Make sure that the border is uniform around the edges of your image with a single number.
Ideally this is 10 pixels from any edge of the image fits what you want for the border. You can make this larger, and I can make the CSS auto-downscale it to 10 pixels and keep all of the border, but I’ll need to know what you designed it with in mind.
Images should be either JPG or PNG, if the outer border is jagged or other, PNG so transparent, like the paper example above. This way for output to chat, it’s transparent on the outside edges.
If you use a different color for the inner background of the border (like on the modern if I had made the background purple instead of white) then include the HEX code for the color, as I’ll have to modify that into it. This might be harder, but I’m pretty sure it should be doable.
If you want a better technical breakdown of how the CSS works and such, you can look at the article I used to figure it out:
SO, if you want to submit an image to be used as a border design in the sheet on roll20, do so my lovelies!!!
I would go ahead and make more than the 2 I have down above, but I’m more focused on several other projects, and my colorblindness affects making interesting/unique borders sometimes. I’d be happy to take into consideration other borders the community would like to provide for free (I’m not paid to do any of this, and thus, I’m not in a position to pay you for it), so if it’s a labor of love, go for it. I’ll certainly include your name (if you so desire) and possible twitter handle if your border design is included.
I’ll probably not be able to accept everything, simply b/c we don’t want decision paralysis, and might leave it up to a community vote.
I also might look for a few unique ones too for a full set. So a generic border, but then for some of the areas having a slight variation on the same design (such as a header for Attributes, or to more distinguish HP from other areas on the sheet).
Themes for Borders
Plain
- This is no graphics, and just colored lines
Fantasy
- Probably scrolls, or paper looking, like what I’m already using above
Modern
- Not really sure, but something modern feeling?
Future/Sci-Fi
- Maybe like the 2nd image I’m using above?
Steampunk
- I dunno, maybe?
Cyberpunk
- Might just fit into Future/Sci-fi though
Post-Apoc
- would be cool to have
Thos are the main ones I was thinking of eventually having, though open to more ideas if people have them. Let me know what you think!
