Use Stylus to make dice menus (and more)

You can change the “click to roll {really long formula that ruins the whole menu effect and makes everyone within 5’ make a moral check}” button into “click”.

I use this trick to create a Dice Menu. Clicking on “d4” rolls the d4, handles dice explosions (1d4e4), and subtracts the modifiers.

Install and Configure Stylus

You need the browser add-on called Stylus, available for Chrome and Firefox. (I use Firefox.) It basically allows you to modify the CSS (design) of web pages you visit. The changes are only visible to you. If you want this to work for your players they will also have to install Stylus.

After you add Stylus, go to the Browser Add-On list, select Stylus, select Preferences, and then enable Advanced “Expose iframes”.

Use CSS to reformat the page

After you install Stylus, you need to enter the CSS code AND set which page it applies to.

To format chat, Applies to is https://app.astraltabletop.com/widget/game

stylus%20iframe

The CSS code to shorten dice rolling formulas into little “click” boxes is:

div.chat-message span.enabled {
    /* this makes a box */
    display: inline-block;
    width: 30px;
    height: 18px;
    overflow: hidden;

    /* this lines it up */
    position: relative;
    top: 4px;
    
    /* tiny print */
    font-size: 12px;
    font-style: normal;
    padding: 1px 1px;
    color: yellow;
}

Here’s the first dice menu I created.
astral%20dice%20menu

1 Like