Revision as of 13:41, 2 July 2021

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
}

• 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:

@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/]

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.

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.