Stylus Questions

Has stylus changed much with new interface? While larger number of cards (horizontally) in deck hand still works. What has the new interface changed with stylus? I don't believe the hide zoom slider works anymore? Any new tips of tricks on stylus that would apply to new interface? Also any way the dice window can disappear on its own after using it instead of having to x out of it or click on the dice icon to get rid of it? Thanks

I've got a few tweaks, mostly to make some things a bit more compact, but honestly, I don't need most of them nearly as much anymore. I'll see if I can post some. Compendium Tweaks .compendium-page__upper[data-v-03b975c1] {     margin: 0px;     padding: 0.3rem 0.2rem 0.1rem 01rem; } .compendium-categories__wrapper[data-v-8746cb54] {     gap: 0.4rem; } .compendium-category[data-v-cc29675b] {     min-height: 2rem; } .compendium-categories__container[data-v-973fead5] {     row-gap: 0.2rem; } /*Compendium Settings*/ .compendium-expansions-list .expansion {     padding: 1px 0; } .compendium-expansions-list .expansion label {     border-radius: 5em;     padding: 2px;     line-height: 1em;     padding-left: 50px; } .compendium-expansions-list .expansion input:checked + label::before {     content: "D";     color: darkred;     left:6px } .compendium-expansions-list .expansion label::before, .compendium-sources-key p::before {     left:6px } .compendium-expansions-list .expansion span {     border-radius: 30px; } Tighter sidebar lists (Journal, Art Library). This is specifically for Dark Mode. .rollabil.btn.dfontd20{     margin-right: 10px;     font-size: 1.2em;     color: black;     padding: 0px;     font-family:dicefontd20; } .attributesabilities  {     right: 0;     top: 10px;     width: auto; padding-left: 3px;     background-color: #eee !important;         margin-bottom: 2px; } #rightsidebar .paddedtable button {     padding-top: 0px;     padding-bottom: 0px; } .attributesabilities .abil {     padding-top: 3px;     padding-bottom: 1px; } .dd-list .journalitem .name, .dd-list .library-item .name {     top: 0px; } .dd-list .journalitem .token, .dd-list .library-item .token {     top: 0px; } .dd-item  .folder-title {     background-color: var( --dark-gray-disabledNOT, #888) !important;     color:#111;     font-weight:bold;     border-radius:0px;     padding: 3px 0px 7px 0px;     line-height:13px;     } .dd-content {     padding: 0px 0px 0px 0px!important;     border-radius:0px;      } .dd-content.static {     padding-left: 3px !important; } .expandcontroller.down {     color:transparent; } a#advancedSearch{ box-shadow:inset 0px 1px 0px 0px #f5978e; background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%); background-color:#f24537; border-radius:6px; border:1px solid #d02718; display:inline-block; color:#ffffff; padding:0px 5px; } #jukeboxfolderroot .playbackcontrol {     margin-left: 18px; } #compendium .searchroot .dd-item .dd-content .token img {     padding: 0px;     max-width: 19px;     max-height: 19px; } #compendium .searchroot .dd-item .dd-content .token {     top: 0px; } #compendium .searchroot .dd-item .dd-content .sourcefooter {     width:40px;        height: 18px;     position: absolute;     top: 0px;     right: 0px;     font-size: 6px; } .expandcontroller {     position: relative;     bottom:10px; } #compendium .searchroot .dd-item .dd-content .sourcefooter {     font-size: 12px; } .inapp .sourcefooter,.inapp.expansion3 .sourcefooter, .inapp.expansion9 .sourcefooter, .inapp.expansion13 .sourcefooter, .inapp.expansion16 .sourcefooter {     background-size: 15px 10px;     background-image:none;     padding-top: 5px;     top: 0px !important; } .dd-item, .dd-empty, .dd-placeholder {     min-height: 21px;     font-size: 12px;     line-height: 20px; } .dd-list .handout img, .dd-list .archivetable img, .dd-list .journalitem img, .dd-list .library-item img{     max-width: 20px;     max-height: 20px; } .dd-item>button {     height: 16px;     margin: 0px;     font-size: 14px;     top: 0px; } .dd-handle {     top: 0px;     width: 20px;     padding: 0px 10px; } .compendium-removed-expansions {     background-color: var( --dark-gray-disabled, #fff) !important;     border: none;     border-radius: 4px;     clear: both;     padding: 0px;     margin-bottom: 0px;     font-style: italic;     color: #aaa; } /*#recentuploads li::after[data-grid-width][data-grid-height][data-filesize]{   content: attr(data-grid-width) "x" attr(data-grid-height)", "attr(data-filesize); }*/ *#recentuploads li::after {     background-color: var(--dark-gray-disabled,white);     content: attr(data-filesize); /*    content: attr(data-grid-width) "x" attr(data-grid-height)", "attr(data-filesize);*/     display: inline-block;     font-size: 0.8em;     padding-left: 3px;     position: absolute;     right: 0; } .m2-top {     margin-top: 0.5em !important; } Zoom Tool tweaks /* ****************** */ /* Zoom Menu Things   */ /* ****************** */ #vm_zoom_buttons{     top:60px; } #vm_zoom_buttons .wrapper .parentContainer{     width:32px; } #vm_zoom_buttons .submenu-caret{     margin-left:13px; } .el-button.el-button--primary.grimoire__button.grimoire__button--primary.large.page-button{     top:10px;     margin-right:-60px;     z-index:10502 !important; } Radial Menu (puts the token menu in the lower right hand corner of the VTT. #radial-menu {     position: fixed;     top: calc(100% - 290px) !important; /*    left: calc(100% - 0px) !important; */     left: calc(100% - 340px)  !important;     --color-text-primary: #fff;     --color-bg-dark: #1c1d28;     --color-text-disabled: #888994;     --color-element-bg: #eaeaea;     --color-red: #f85212;     --color-green: #78ff10;     --color-blue: #0c6be7;     --color-yellow: #fc0;     --font-number: "Ruda", sans-serif; } #floatingtoolbar {     z-index: 20000; } #radial-menu .popupvalue {     position: absolute;     top: 5px;     left: -145px !important;     width: 135px !important;     height: 30px;     z-index: 1005 } #radial-menu .button {     background: var(--color-element-bg) !important;     border: 0px; } #radial-menu .button.button-1 {     /*token options*/     border-radius: 0px 0px 25px 25px;     z-index: -4; } #radial-menu .button.button-2 {     /*token markers*/     border-radius: 25px 25px 0px 0px;     z-index: -5; } #radial-menu .button.button-1, #radial-menu .button.button-2 {     top: 160px !important;     left: -60px;     border-radius: 0px !important; } #radial-menu .button.button-2 {     top: 125px !important;     z-index: -1;     box-shadow: none !important; } #radial-menu .button.button-1 {     top: 13px;     z-index: -2;     box-shadow: none !important; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 {     left: -60px;     border-radius: 0px !important;     box-shadow: none !important; } #radial-menu .button.button-6 {     top: 195px;     left: -60px;     box-shadow: none !important; } #radial-menu .button.button-3 {     box-shadow: inset 0px 0px 5px var(--color-green),     inset 0px 0px 10px var(--color-green),     inset 0px 0px 15px var(--color-green) !important;     top: 25px;     z-index: -1;     border-radius: 0px !important; } #radial-menu .button.button-4 {     box-shadow: 0px 0px 5px var(--color-text-disabled),     inset 0px 0px 5px var(--color-blue),     inset 0px 0px 10px var(--color-blue),     inset 0px 0px 15px var(--color-blue) !important;     top: 85px;     z-index: 1; } #radial-menu .button.button-5 {     box-shadow: 0px 0px 5px var(--color-text-disabled),     inset 0px 0px 5px var(--color-red),     inset 0px 0px 10px var(--color-red),     inset 0px 0px 15px var(--color-red) !important;     top: -30px;     z-index: 1; } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner {     margin-top: 2px; } #radial-menu .button div.inner span {     font-size: 24px; } #radial-menu .markermenu {     background: var(--color-element-bg) !important; } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon {     border: 5px; } #radial-menu .popupvalue {     position: absolute;     top: 5px;     left: 45px;     width: 155px;     height: 30px;     z-index: 1005 } #radial-menu .popupvalue input {     width: 100%;     font-size: 16px } #radial-menu .button.button-1:after {     position: relative;     content: "SPD";     display: inline-block;     font-size: 16px;     z-index: 1000 !important;     top: -133px;     left: 0px;     width: 35px;     padding-left: 3px;     color: #111;     background-color: var(--color-blue); } #radial-menu .button.button-2:after {     position: relative;     content: "HP";     display: inline-block;     font-size: 16px;     z-index: 1000 !important;     top: -153px;     left: 0px;     width: 30px;     padding-left: 8px;     color: #111;     background-color: var(--color-green); } /*  ❤️🛡️👟👣 */ #radial-menu .button.button-3:after {     position: relative;     content: "AC";     display: inline-block;     font-size: 16px;     z-index: 1000 !important;     top: -110px;     left: 0px;     width: 30px;     padding-left: 8px;     color: #111;     background-color: var(--color-red); } #radial-menu .button div.inner {     margin: 2px;     padding-top: 2px;     width: 34px;     height: 32px;     background: #eee;     border-radius: 0px;     text-align: center;     color: #fff;     font-size: 16px;     overflow: hidden;     white-space: nowrap; } #radial-menu .button.button-2[data-action-type] div.inner {     background: #ddd;     color: #555; } #radial-menu .button.button-1[data-action-type] div.inner {     background: #ddd;     color: #555; } #playerzone {   margin-left: 40px; } /* #master-toolbar{     opacity: 0.3;     transition: opacity 1s ease-out 0.5s; } #master-toolbar:hover{     opacity: 1;     transition: opacity 0.2s ease-in 0s; } */ This is a companion to the style above. It makes the Token Marker menu more full featured. It names token markers, puts a blinking marquis around active markers. It might need tweaking, depending on the number of markers you have. /* Prevent the icons from taking up extra space, allow space for the label text */ #radial-menu .markermenu.open .statusicon {     font-size: 0;     margin-bottom: 10px;     margin-left: 20px;     padding-right: 10px;     margin-top: 7px !important;     margin-right: 30px;     width: 25px; } #radial-menu .markermenu.open {     width: 705px;     height: 370px;     border-radius: 15px;     top: 30px;     left:-730px;     padding-left: 20px !important;     margin-top: -330px !important;     background: var(--dark-surface1, #eee) !important; } /* Undo the default dead "X" styling */ #radial-menu .markermenu .markercolor.dead {     font-weight: normal;     height: 24px;     margin-left: 20px;     padding: 0;     top: 0 !important;     width: 24px; } /* Show the icon titles as labels */ #radial-menu .markermenu.open .statusicon::after {     color: var(--color-element-bg, #222);     content: attr(title);     display: inline-block;     font-size: 12px;     line-height: 1em;     overflow: hidden;     position: relative;     text-align: center;     left: -25px;     top: 24px;     white-space: nowrap;     width: 80px; } /* Recreate the dead "X" without disrupting the layout */ #radial-menu .markermenu .markercolor.dead::before {     content: "X";     display: block;     font-size: 24px;     font-weight: bold;     position: absolute;     text-align: center;     top: 20px;     width: 100%; } #radial-menu .markermenu .markericon.active {     border: none !important;     color: var(--dark-surface1, #eee);     display: inline-block;     border-radius: 5px;     animation: blinkingBackground 2s infinite; } @keyframes blinkingBackground {     0% {         background-color: #10c018;     }     25% {         background-color: #1056c0;     }     50% {         background-color: #ef0a1a;     }     75% {         background-color: #254878;     }     100% {         background-color: #04a1d5;     } } #radial-menu {     z-index: 5000; } Screenshot of the last two working together I have a deck size and placement style, but just realized it needs some work to make it more universal.

As for the dice roller, if you use it a lot, my advice is to get used to pressing "d" to make it appear and disappear. It's not hard to build up the muscle memory, and is quicker in the end, because there's one less point-and-click.

Thank you so much for quick detailed response. I'll try those next chance I get. Followup question...I have a player who maps are to the left and not centered...iscthere a way if centering them on his screen?  He has a very large monitor. Thanks again 

Hi John,  Roll20's maps are currently top-left justified.  There are a couple of ways to deal with this:  1) The GM can enlarge the page size, then move the map, tokens, dynamic lighting, etc. to the right and down. Thus providing a border around the map.  2) The player can zoom in until the map takes up the screen.  #1 can be a lot of effort, #2 is generally easier.  John said: Thank you so much for quick detailed response. I'll try those next chance I get. Followup question...I have a player who maps are to the left and not centered...iscthere a way if centering them on his screen?  He has a very large monitor. Thanks again 

As future good news, the map should become untethered from the upper left when Project Jumpgate is underway (sometime in if all goes well, though the beta will be for Pro users at first.)

Here's the corrected Deck placement. Deck is directly above the repositioned token menu: #playerzone .deckhands .hand .handcontainer{     width: 700px !important; } .popover {         max-width: 700px !important; } #showndecks{         max-height: 550px !important;         overflow-y: visible;     position: absolute;     bottom: 350px !important; } #showndecks .deckstack .controls {     position: absolute;     top: -10px;     left: -73px;     width: 40px;     padding: 2px 20px 0px 10px;     overflow: hidden;     display: none;     text-align: right;     background-color: white;     border: 1px solid #C0C0C0; }

Thank you for sharing your stylus css code  and ideas to change the roll20 layout for bespoke purposes 

I have these, not mine, can't remember the sources, though am pretty sure Keith is responsible for the resizing the macro bar one, which is so helpful.&nbsp; Altering the look of the macros is also so nice as a DM.&nbsp; New players love the icons against the bubbles as it helps them remember what is what, we use B3 for Passive Perception (5e) and have a magnifying glass there and a shield against B2.&nbsp; Yes I know a magnifying glass is more Investigation, but we felt big eyes was too immature even for us Macro style @-moz-document regexp(" <a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a> ") { /* Macro Popup Windows */ .ui-dialog.ui-widget *:not(label):not([id="initiativewindow_settings"]) &gt; input, .ui-dialog.ui-widget *:not(label) &gt; select { width: auto; margin-left: 0 !important; } .ui-dialog.ui-widget &gt; *:not(label):not([id="initiativewindow_settings"]) &gt; p { display: flex; flex-direction: column; } .ui-dialog.ui-widget &gt; *:not(label):not([id="initiativewindow_settings"]) &gt; p &gt; *+* { margin-top: 1em; } /* Macro Popup Windows Sizing */ body &gt; div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons:not(.ui-resizable) { height: auto !important; } body &gt; div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content[data-macroid] { height: fit-content !important; } body &gt; div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; textarea { width: 97% !important; } /* Remove Help Text and White Space*/ body &gt; div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; label &gt; span, body &gt; div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; p { margin-left: 5px; display: none; } div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; div:nth-child(6), div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; div:nth-child(9), div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; div:nth-child(11) { display: none; } /* Resize Inner Elements */ body &gt; div &gt; div.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix { width: calc(100% - 35px) !important; margin-right: 0px; } body &gt; div &gt; div.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix { width: calc(100% - 25px); } body &gt; div &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content { padding-left: 10px; padding-right: 10px; margin-right: 0px; } body &gt; div &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; input.name, body &gt; div &gt; div.dialog.largedialog.ui-dialog-content.ui-widget-content &gt; div &gt; input.name[type="text"] { width: calc(100% - 218px) !important; } /* Move Buttons */ body &gt; div &gt; div &gt; div &gt; div.btn.testmacro { position: absolute; top: 30px; right: 122px; } body &gt; div &gt; div &gt; div &gt; button.btn.btn-danger.delete { position: absolute; top: 30px; right: 14px; } body &gt; div &gt; div &gt; div &gt; label:nth-child(10) { position: absolute; top: 75px; right: 22px; width: 155px; padding-right: 0px; } body &gt; div &gt; div &gt; div &gt; label:nth-child(10) &gt; input { float: right; margin-top: 3px; margin-right: 0px !important; } /* "Visible to Players" Field width and Dropdown Height */ div.chosen-container.chosen-container-multi { width: 100% !important; } div.chosen-container.chosen-container-multi:not(.chosen-with-drop):not(.chosen-container-active) &gt; div &gt; ul &gt; li { display: none; } div.chosen-drop { border: 0px !important; } } Macrobar /*macro quickbar */ #macrobar { &nbsp; height: 2.3em !important; &nbsp; width: 98% !important; &nbsp; background-color: rgba(0, 0, 0, 0.44) !important; &nbsp; text-align: center !important; &nbsp; margin-left: -50px; } div.macrobox button.btn { &nbsp;&nbsp;&nbsp; padding: 0 4px 0 4px; &nbsp;&nbsp;&nbsp; font-size: 1.0rem; &nbsp;&nbsp;&nbsp; line-height: 1.1rem; &nbsp;&nbsp;&nbsp; margin: 0px 0 2px 0; } #macrobar_macros { &nbsp; white-space: normal !important; &nbsp; margin-left: 1% !important; &nbsp; margin-right: 1% !important; &nbsp; padding-bottom: 0px !important; } #macrobar .macrobox { &nbsp;&nbsp;&nbsp; margin: 1px 2px 1px 2px ; } #macrobar div.macrobox:hover, #macrobar div.macrobox.ui-sortable-helper { &nbsp;&nbsp;&nbsp; padding-right: 12px; &nbsp;&nbsp;&nbsp; margin-right: -7px; &nbsp;&nbsp;&nbsp; border-radius: 3px; &nbsp;&nbsp;&nbsp; background-color: #999; &nbsp;&nbsp;&nbsp; cursor: move; } Radial Icons /* Radial Menu Emojis */ /* Bar 1: HP */ #radial-menu .button.button-3:after {content: "❤️"; position: relative; color: white; font-size: 13px; top: -45px; left: -10px; border-radius: 25px 25px 25px 25px; padding: 2px; background-color: #000;} /* Bar 2: AC */ #radial-menu .button.button-4:after {content: "️"; position: relative; color: white; font-size: 13px; top: -45px; left: -10px; border-radius: 25px 25px 25px 25px; padding: 2px; background-color: #000;} /* Bar 3: Passive Perception */ #radial-menu .button.button-5:after {content: ""; position: relative; color: white; font-size: 13px; top: -45px; left: -10px; border-radius: 25px 25px 25px 25px; padding: 2px; background-color: #000;} /* Alternative emoji for 'Speed' */ /* content: "";&nbsp; */ Initiative tracker /* GM Turn Tracker Turn Order Settings */ /* Turn Tracker */ #initiativewindow { padding: 0px 0px; overflow-x: auto } #initiativewindow ul li { padding: 0px 1px 0px 0px; min-height: 15px } #initiativewindow ul li img { max-width: 20px; max-height: 18px; padding: 0px 3px 0px 0px; } #initiativewindow ul li span.initiative { font-size: 16px; padding: 0px; min-height: 12px } #initiativewindow ul li span.name { font-size: 12px; padding-top: 1px } #initiativewindow ul li:first-of-type img { max-width: 32px; max-height: 30px; padding: 0px 3px 0px 0px; } #initiativewindow ul li:first-of-type span.name { font-weight: bold; font-size: 14px; color: yellow; } #initiativewindow ul li:first-of-type span.initiative { font-size: 20px; color: yellow; padding: 5px 0px 0px 0px } #initiativewindow input { font-size: 14px; height: 10px; max-width: 15px; top: 0px; text-align: right; } .ui-dialog-titlebar { padding: 1px 5px; font-size: 8px; } .ui-dialog .ui-dialog-title { margin-top: 0px; margin-bottom: 0px; padding: 0px } .ui-dialog .ui-dialog-titlebar-close { top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 6px; font-size: 7px; line-height: 7.5px; } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; text-indent: 9999px } .ui-dialog .ui-dialog-buttonpane { border-width: 1px 0 0 0; margin: .05em 0 0 0; background-color: #f5f5f5; padding: 1px 10px 1px; } .ui-dialog .ui-dialog-buttonpane button { margin: .05em .04em .05em 0; } #initiativewindow_settings {height: initial !important;} #initiativewindow_settings &gt; p &gt; small {display: none;} #initiativewindow_settings &gt; p &gt; br:nth-child(6) {display: none;} #initiativewindow_settings &gt; p &gt; input.customformula {margin-top: 5px;} div#initiativewindow_settings p:nth-child(1) {display: block;} /* sort options */ div#initiativewindow_settings p:nth-child(2) {display: block;} /* numerically */ div#initiativewindow_settings p:nth-child(3) {display: none;} /* alphabetically */ div#initiativewindow_settings p:nth-child(4) {display: none;} /* card suit */ div#initiativewindow_settings p:nth-child(6) {display: block;} /* custom item */ div#initiativewindow_settings hr {display: none;} /* Delete Button Size &amp; Position */ #initiativewindow &gt; ul &gt; li:first-child &gt; div.controls {top: 0px; left: 1px; padding: 4px 8px;} #initiativewindow &gt; ul &gt; li:not(:first-child) &gt; div.controls {top: -1px; left: 0px; padding: 1px 5px 2px 3px; font-size: 18px;} Transparent side bar div.master-toolbar-outer#master-toolbar { background: transparent; backdrop-filter: none; }/* ==UserStyle== @name&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; app.roll20.net - Dec 2023 @namespace&nbsp; &nbsp; &nbsp; github.com/openstyles/stylus @version&nbsp; &nbsp; &nbsp; &nbsp; 1.0.0 @description&nbsp; &nbsp; A new userstyle @author&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Me ==/UserStyle== */