Character Sheet – CSS Example

Configuration

One problem with Castle Falkenstein is that there are a lot of abilities (20-30+), and most PCs only have a handful of them. It would take up a lot of space for all of them to be visible all of the time. But CSS can be used to hide things.

We need a way to choose what is visible and what is hidden. Why not an entire configuration screen that is itself hidden when not needed? The same technique can be used to create tabs for larger sheets. Falkenstein is a simple enough system that it doesn’t need tabs (at least not yet), but a configuration tab would be very handy.

Config Checkbox

I want a checkbox to be positioned toward the edge of the sheet – obvious but not intrusive. I also don’t want it to disrupt the flow of other elements. This is the perfect opportunity for position: absolute.

First I create a checkbox, and give it a class so i can target that specific input in CSS.

<input type="checkbox" name="attr_config_hide" class="config-toggle" value="1" title="reveal config options">Code language: JavaScript (javascript)

input[type=checkbox].config-toggle {
    position: absolute;
    left: 591px;
    top: 56px;
}Code language: CSS (css)

Using CSS I place it very specifically – the left and top dimensions are from the edge of the sheet. It takes a little trial and error to find those numbers, but I end up with the checkbox at the top right:

A common approach is to have another image over the top of the checkbox, and make the checkbox invisible, so it looks like there is a settings cog or some other shape there. But this sheet is getting complicated enough already, so I kept it simple.

Configuration Pane

A similar technique was used to position a new pane for configuration.

This pane is a div that has been positioned absolutely, so it overlays the existing sheet without interfering with any existing elements. You can look through this code and figure out what each part does.

.config {
    width: 585px;
    position: absolute;
    left: 20px;
    top: 105px;
    z-index: 999;
    margin-left: -5px;
    opacity: 0.9;
}

.config-abilities {
    display: grid;
    grid-template-columns: repeat(6, 15px 78px);
    column-gap: 3px;
}

.config h3,
.config p {
    grid-column: 1/-1;
    padding: 0;
}

.config-abilities input {
    width: 15px;
    height: 15px;
    margin-top: 1px;
}

.config-abilities span {
    text-align: left;
    font-size: 85%;
}Code language: CSS (css)

The hide and reveal sections trick is used to hide the config panel: when the config-toggle checkbox is clicked it appears, and when unchecked, it vanishes.

Hiding the Abilities

The abilities list on the Config pane control which abilities are visible on the sheet beneath it. Each ability on the main sheet now looks like this:

        <input type="hidden" name="attr_athletics_hide" class="hide" value="0">
        <div class="passthrough">
            <span class="bold">Athletics </span>
            <select name="attr_athletics" class="ability-rank no-arrows">
                <option value="12" >Extraordinary</option>
                <option value="10" >Exceptional</option>
                <option value="8" >Great</option>
                <option value="6" >Good</option>
                <option value="4"  selected>Average</option>
                <option value="2" >Poor</option>
            </select>
            <button type="roll" name="roll_athletics" class="nod20 ♣" title="%{athletics}" 
                 value="&{template:default} @{show_name} {{ Athletics=[[@{athletics} + @{card_value}]] ♣ }}">
            </button>
        </div>Code language: JavaScript (javascript)

There is a hidden input which gets its value from the abilities on the config panel. That sets the visibility of the following passthrough div. Because that div has display:contents, it is ignored by the grid and the elements inside are arranged into columns when visible.

Notice all of the abilities use the same class name: “hide”. We can use the Next Sibling selector (+) to affect only the next element (the attribute div). That means we avoid having a different CSS rule for every ability.

.hide[value="0"] + .passthrough {
    display: none;
}Code language: CSS (css)

Other Config Options

The HTML-only version of the sheet had a couple of options for changing the way rolls work. But without CSS, there was no way to hide those options. But they are easily added to the end of the config options screen and rearranged to look more presentable.

Once again, CSS Grid was used to arrange them -it really is amazing.

I added a new Portrait selection here. Since I found in testing some images look better as contain rather than cover, I decide to give users the choice (and add the stretch option, fill, because why not). The original declaration block is unchanged, but extra rules are added for the different selections.

.description img {
    grid-area: portrait;
    width: 145px;
    height: 220px;
    border: 5pt double darkred;
    border-radius: 50%;
    margin-right: 5px;
    object-fit: cover;
}
input.radio-img[value=contain] ~ img {
    object-fit: contain;
}
input.radio-img[value=fill] ~ img {
    object-fit: fill;
}Code language: CSS (css)

Series Navigation

<< Advanced Positioning