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

Character Sheet Development
Getting Started

General

Reference

Tools & Tips

Git/GitHub

Other

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

Mobile App Beta now available for Pro users!^(Forum)(Pro Forum thread)
Character Sheet Enhancements!^(Forum)

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: Detects sheet is viewed on small screen.

@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;
    }
}

Features

Some roll20 sheet related features need to done slightly differently on mobile, not just adjust visually.

Custom Fonts

Google Fonts importing using @font-face by Adam .S

Using google fonts on the Mobile app takes a few extra steps. @import doesn't seem to work to add fonts for mobile (yet?). Below is what I found works.

I started with the typical in css tab.

@import url('https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap');

I then pasted the URL from the import into my browser.

https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap

I copied the code on the browser page. I removed the Unicode range part.

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');
}

Then paste that into the top of the CSS tab on the custom sheet. If your page has multiple fonts the process will have to be repeated for each one.

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.

Avatar on Sheet

(experimental) You can show the character's avatar on the mobile sheet with <img name="attr_character_avatar"> ^{[ https://app.roll20.net/forum/permalink/10077312/]}

Orientation

You can use @media (orientation: landscape)/ @media (orientation: landscape) to detect phone orientation, so mobile sheet can be adapted to look good in both orientations.

@media orientation

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.
CyberpunkRed standalone roll20 sheet by Adam S., looks solid on phone, has working google fonts on mobile,
MythicD6 The Attributes & Skill sections have been adjusted to be less wide to avoid sideways scrolling, but the mobile implementation still has lot to adjust.

iOS

As the iOS Roll20 mobile app is based on Safari(like all iOS web/browser-based are), it means some character sheets will look different on iOS vs. android phones.

Examples & fixes:

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.

Roll20 Wiki

Navigation

Personal tools

Toolbox

Character Sheet Development/Mobile

From Roll20 Wiki

Contents