Main Page: Building Character Sheets

This article is a stub. You can help the Roll20 Community Wiki by expanding it.

Page on building character sheets to work with the mobile app. This relies your sheet being adapted to CSE.

@media only screen and (max-width: 480px) {
// css that only affects sheet on mobile. Play around with "max-width" vaule, might differ between phones
}

Character Sheets for Mobile

General Tips

• Make Roll Buttons & input fields larger
• Using CSS Grid or Flexbox for the normal sheet layout will make it easier to create a resposive/phone-adapted version of the layout.
  • Example: If some stat sections on the normal sheet is arranged in a 2x3 grid, on mobile it could be easy show them in a 1x6 grid, a single column. Can also be a easier first step to adjust
• reduce number of features that requires you to "hover" your mouse over some section. (tooltips are less accessible on mobile)
• On mobile, when you click on a <input type="number"> attribute, it will show you a number keyboard, instead of the normal keyboard, making it quicker to fill in numbers.
• Hiding some advanced sheet features/settings could make the sheet easier to adapt/use on mobile.
  • Add a checkbox somewhere to hide/show the advanced stuff

Example

link:

@media only screen and (max-width: 480px) {
    .sheet-wrapper {
        min-width: 320px;
    }
        
    .sheet-traits4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

/* halo layout */

    .sheet-editPane {
         width: 80%;
     }
    
    input[name="attr_Portrait"][value="PC0"]  {
        border: 1px solid #cccc00;
        text-align: center;
        background-color: rgba(255, 128, 0, 0.05);
    }

    h1.sheet-hide {
        visibility: visible !important;
        display: block;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }
    
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
        display: block;
        visibility: visible;
    }
    
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
        display: block !important;
        visibility: visible !important;
    }
}

Roll Templates

You can make rolls appear on the mobile app, but many normal roll templates don't seem to work as-is, giving a "Error formatting roll"-message, and the roll is only visible in the q Text Chat, not mobile.

CortexPrime-Hammerheads & CortexPrime-Tales-of-Xadia-Playtest have managed to make roll results appear on mobile.

Existing Mobile-adapted Sheets

List of Character Sheets that have at least partially been adapted to the mobile app

• D&D 5E by Roll20 - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
• CortexPrime-Hammerheads & CortexPrime-Tales-of-Xadia-Playtest - sheet contains adaptations for mobile layout, and have made the rolls work.
• MythicD6 the Attributes & Skill sections have been adjusted to be less wid, to avoid sideways scrolling, but the implementation still has lot to adjust.

Related Pages

• CSE
• BCS/Bugs - known bugs & issues with char sheet development
• Mobile - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the D&D 5E by Roll20 sheet.