- Guide to the Guide
- Guide to CSS – Styling a Character Sheet
- HTML – The Building Blocks
- Sheet Workers – Automating The Sheet
Use HTML to build the essential functions of a sheet, then CSS to style it to make it presentable. With these two guides, you can create attractive character sheets, and everything else is optional.
Core CSS Posts
The articles here cover “everything you need to know” to design a Roll20 character sheet and a lot more. Each chapter focuses on a specific kind of thing you need to know to build a sheet.
- The Roll20 Sheet for Legends Never Die!Learn about the Roll20 sheet for Legends Never Die
- Getting Started With CSSThe basics of CSS - syntax, what a declaration block is, how to apply properties, etc.
- How Elements are DisplayedHow to arrange elements on the page. Understanding the box model of CSS and the display property.
- Images and ColoursDecorating the sheet with images and colour.
- Text and FontsText and associated properties (such as underlining and shadow effects), and using Google Fonts.
- CSS Grid LayoutsLying out your sheet into columns and grids, with a surprisingly simple system.
- Understanding SelectorsHow to target elements and blocks, and apply your styles to the sheet.
- How To Hide and Reveal Things With CSSThis is an important skill when making character sheets. Here's how to do it with CSS.
- Inheritance and SpecificityUnderstanding the tricky concept of Specificity, and how styles override each other.
- Your Own Styles on Roll20Overriding Roll20's built-in styles, creating your own roll buttons, and even modifying the GUI.
- Advanced PositioningUnderstanding the position property, which can be a bit mindbinding.
- Removing the Dice Icon In ButtonsThe dice icon in roll buttons was a great idea. Here's how to remove it.
- Character Sheet – CSS ExampleUpgrading the Castle Falkenstein sheet created in the HTML guide to use CSS.
Other CSS Posts
There are a lot more CSS things that aren’t fundamental to understanding CSS and making character sheets. Handy tips and tricks, for example. CSS Posts like those are listed here (this list will expand over time).
- Avoid Using Inline StylesInline styles are when you put style: directly in the HTML. Here are the benefits of using CSS instead.
- Divitis and StyleThere’s a syndrome among webspages created by those unfamiliar with CSS. Here’s to avoid it.
- Don’t Use TABLE – use GRIDWhen creating a sheet, don’t use TABLE. Learn how to use CSS Grid to EASILY organise your sheet.
- Removing the Dice Icon In ButtonsThe dice icon in roll buttons was a great idea. Here’s how to remove it.
- Hiding Arrows in Dropdowns and InputsNumber inputs and selects have spinners (up/down arrows) or dropdown arrows. How do you remove them?
- The Roll20 Sheet for Legends Never Die!Learn about the Roll20 sheet for Legends Never Die
If this series whets your appetite, you can check out some of the clever things you can do at the CSS Wizardry page on the Roll20 Wiki (though be warned – some of the code there is very old and needs some rewriting to work properly).
