Show Off Your Style 2: The Stylening!

Note: This thread auto-closed. Here is an index of the major Stylus Threads: Show Off Your Style Show Off Your Style 2: The Stylening! Show off your Style 3: Third Time is the Charm! Show off your Style 4: A New Hope! Roll20 has a pretty clean interface, but there are often features that users find do not fit their expectations or preferences (buttons are too big/small, want to see more cards in their hand, etc.) Most of these features are controlled by CSS (Cascading Style Sheet) code in the app. The good news is, you can use your own CSS code to change the display to suit your needs. A lot of people use the Stylus extension ( Chrome ,&nbsp; Firefox ) to tweak their Roll20 interface. This extension intercepts the CSS before it reaches your display and tweaks it to suit, adding, removing or changing definitions. It's very harmless and can be turned on or off at need. The code is interpreted on your browser only. So any tweaks you make are seen only by you. If you want to share the changes with your group, you will need to send them the code for the style changes and they would have to install it locally. To install a style, first install the extension. Create a new style and give it a name. Place any code in the code block. You will probably want to limit it to URLs starting with " <a href="https://app.roll20.net/" rel="nofollow">https://app.roll20.net/</a> " Styles can be turned on or off as a group or singly on-the-fly. I though it would be fun for people to share some of the things they've worked out. Most of the styles on Styles.org are related to "Dark Mode" so I don't know if one more is needed here, but feel free to post what floats your boat. I'll start off with one I posted a long time ago in a recently closed suggestion thread (where it probably didn't belong, anyway) :) IMPORTANT NOTES AND UPDATES — &nbsp;Please refrain from posting links to Tampermonkey scripts or third party extensions that could be avenues to piracy or that add features. This is about CSS tweaks. — &nbsp;The "[Install]" links actually take you to userstyles.org, which was originally built to serve Styl ish . The site still lists Stylish in its iconography because of this. But if you have Stylus installed and click any of the links, they will install in Stylus instead.&nbsp; Stylish was abandoned by many folks after it was discovered that they were not being trustworthy with user data . Stylus was built to be an alternative.&nbsp; If you have installed Stylish, I would recommend you uninstall it first. —&nbsp; Later versions of&nbsp; Stylus have allowed syncing in the cloud. This means you can keep all of your styles up to date across multiple browsers and workspaces. It might also be a hedge against the Chrome bug that would occasionally wipe the entire Stylus DB on a browser upgrade. It's under Manage Your Styles. There's a button for it in Chrome and it's under Options in Firefox. The [install] button after each style will take you to a userstyles.org page that will allow you to one-click install the style. For the styles I've submitted, you can also go here to the master page . Index Tiny Tracker &nbsp;- keithcurtis&nbsp; [install] More Compact Macro Bar &nbsp;- keithcurtis&nbsp; [install] Bigger Card Hand &nbsp;- keithcurtis&nbsp; [install] Inline Links on OGL Roll Templates &nbsp;- keithcurtis&nbsp; [install] Hide Roll20 Interface &nbsp;- keithcurtis&nbsp; [install] Add Rows to Map Tab &nbsp;- keithcurtis&nbsp; [install] More Compact Token Action Toolbar &nbsp;- keithcurtis&nbsp; [install] 5e Style for Your Handouts &nbsp;- keithcurtis&nbsp; [install] Marketplace Read Tags and See Pictures &nbsp;- keithcurtis&nbsp; [install] This thread Neater Character Vault - keithcurtis [install] Roll20 Site: Dark Red Mode - Andreas J. Compact Editor for Sheet Authors - Vince Dark Mode for Roll20 - Vince Edit Status Icon Menu - Mike deBoston [install] Streamline Turn Order Settings (For Savage Worlds) - Mike deBoston&nbsp; [install] Macro Editing Window Tweak - Mike deBoston&nbsp; [install] Sheet Editor WYSIWYG Editor Style - Scott C Deleting Cards Without Scrolling - Mike DeBoston&nbsp; [install] Lock Turn Tracker Position - Mike DeBoston [install] Change Button Colors on Token Action Toolbar - Mike deBoston [install] Hide Error Messages in Chat - Mike deBoston - [install] Default Roll Template Enhancement - keithcurtis - [install] Tighter Sidebar Lists - keithcurtis - [install] Pathfinder 2e - Pseudo Grayscale - Mik Holmes Query Input Fits to Popup - Noon Show Time Stamps in Chat Archive &nbsp;- Noon (by way of&nbsp; forum post )&nbsp; [Install] Tweaks for D&amp;D 5e by Roll20 (OGL) sheet - keithcurtis [Install] Talk To Myself banner - keithcurtis [Install] Zoom Slider Tweaks - keithcurtis [Install] Correctif pour D&amp;D 5E by Roll20 - Ryuh Dragoon (translated sheet fix) [Install] Sheet Sandbox &amp; Game Settings Button Mover - Scott C. API Scripts Button Mover - Scott C. Hide Toolbar Buttons - keithcurtis [Install] Dark Mode (esp. for&nbsp;D&amp;D 5th Edition by Roll20 Sheet) - Kirill S. [Source Code] Hide Broken Aura Tool-Tips When Editing Forum Posts - The Aaron Tweaks to the Radial Token Menu and Token Markers &nbsp;- Question is posed with this thread and variations on the theme continue for at least two pages. This one cannot be directly linked as the styles diversify and branch too much. Read through and choose which you like. Much thanks to Kirill S. for the base code. Adding Labels to Token Marker Menu - Andrew [Install] Horizontal Toolbar - Andrew [Install] Show File Size of Recently Uploaded Assets in Art Library - Andrew [Install] &nbsp; *note. This style is included in Tighter Sidebar Lists, above. Horizontal Page Menu - Andrew (Better solution than Add Rows to Map Tab from the original thread.) "Spoiler Tags" for salmon error messages - Oosh Word Wraps in Code Boxes - Oosh Blades in the Dark Sheet Tweaks - Nik G Blue Dice on /r Rolls and Inline Tooltips - Oosh Colorblind/Custom Color Helper - Oosh Responsive Page Toolbar - Scott C Styling Token Action Buttons - Oosh

Neater Character Vault The Character Vault is a nice feature, but the irregular size of entries makes it difficult to find where one character begins and another ends. There's a style to regularize the display. All bio contents are scrollable, so you can still read them. Here's an example of the new display: Character Vault CSS .vaultchar { &nbsp; &nbsp; border: 1px solid #aaa; &nbsp; &nbsp; margin-top: 1em; &nbsp; &nbsp; background: #eee; &nbsp; &nbsp; border-radius: 5px; &nbsp; &nbsp; padding: 0.5em; &nbsp; &nbsp; height: 385px; &nbsp; &nbsp; text-overflow: clip; } .vaultchar p.char-name { &nbsp; &nbsp; font-size: 20px; &nbsp; &nbsp; background: #666; &nbsp; &nbsp; border-radius: 4px; &nbsp; &nbsp; padding: 0em 0.5em 0em; &nbsp; &nbsp; color: #fff } .char-info { &nbsp; &nbsp; height: 270px; &nbsp; &nbsp; text-overflow: clip; &nbsp; &nbsp; margin-top: 5px; } .char-images { &nbsp; &nbsp; height: 270px; &nbsp; &nbsp; margin-top: 5px; } .char-bio { &nbsp; &nbsp; text-overflow: clip; &nbsp; &nbsp; overflow: scroll; } .charmenu p { &nbsp; &nbsp; font-size: 12px; } .char-tools .btn:not(.btn-primary) { &nbsp; &nbsp; padding: 0em; } label.choose { &nbsp; &nbsp; line-height: 1.8; &nbsp; &nbsp; margin-bottom: 0px; &nbsp; &nbsp; padding: 0em; } .char-tools .btn { &nbsp; &nbsp; padding: 0em; } .char-avatar img, .char-token img { &nbsp; &nbsp; overflow: scroll; &nbsp; &nbsp; max-height: 100px; } .char-avatar, .char-token { &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; padding: 0em; &nbsp; &nbsp; margin: .25em 1em 0em; } Installation instructions in top post.

Eh, I guess I can share my shoddy Roll20 Dark Red mode I made few days ago, that I use on Firefox with the Stylus plugin. It covers the whole site(forum, wiki, compendium, marketplace, campaign/character vault menu) except the app itself. IMO it's more readable than other Dark Mode Stylus plugins for Roll20,&nbsp; while still being darker than the default white. Colors are kinda picked randomly with a focus on getting enough contrast to read all text. Oh and one cool bit it that code snippets have that green glow. Roll20 Site - Dark Red Mode Sourcecode

That green glow is cool indeed. Thanks!

EDIT/UPDATE: &nbsp;made some adjustments to the stylus code. Here's a little stylus hack that I use when I'm editing a character sheet.&nbsp; I like a more compact Settings page without all the extra fluff since I'm only interested in pasting code and saving to view my edits in-game. Preview may be off depending on your custom sheet code. (ie body style may "bleed" into the preview tab) Screenshot shows my Dark stylus theme as well.(see next post below)&nbsp; Compact Editor for sheet authors (export from Stylus): @-moz-document url-prefix("<a href="https://app.roll20.net/campaigns/campaignsettings/" rel="nofollow">https://app.roll20.net/campaigns/campaignsettings/</a>"), url-prefix("<a href="https://app.roll20dev.net/campaigns/campaignsettings/" rel="nofollow">https://app.roll20dev.net/campaigns/campaignsettings/</a>") { body { background-color: #000; color: #ccc; margin-top: -925px !important; } div#customsheet-editor { margin-top: 2em; } .container.topbar .row { background-color: #999 !important; margin-top: -9px; } .shared-compendium, .chosen-container { display: none; } .globalfooter { display: none !important; } .btn-primary { margin-top: -50px !important; } .ace-monokai .ace_scroller { background-color: #000 !important; } .ace_editor { font-family: 'Source Code Pro', 'Monaco', monospace !important; font-size: 14px !important; } .topbar .btn-row { background-color: #FFF !important; height: 50px !important; top: 874px !important; } .nav-tabs &gt; li.active &gt; a, .nav-tabs &gt; li.active &gt; a:hover, .nav-tabs &gt; li.active &gt; a:focus { background-color: #FFC0CB; } .tab-content &gt; .active { height: 380px !important; } .tab-content .editor { height: 380px !important; } .campaign_settings &gt; div &gt; form &gt; div &gt; .nav-tabs li.active { background-color: #fff; margin: 0 .25em .25em .25em; height: 2.25em; } .campaign_settings &gt; div &gt; form &gt; div &gt; .nav-tabs li { background-color: #fff; margin: .25em .25em .25em .25em; height: 2em; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom: none; border-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .campaign_settings &gt; div &gt; form &gt; div &gt; .nav-tabs li &gt; a { margin: -5px 0 0 0; } .campaign_settings &gt; div &gt; form &gt; div &gt; .nav-tabs li.active &gt; a { margin: 0 0 0 0; } .campaign_settings &gt; div &gt; form &gt; div &gt; .nav-tabs { background-color: #fff; height: 2.25em; } form &gt; p:nth-child(2), form &gt; div:nth-child(5) { display: none; } }

EDIT/UPDATE: made some adjustments to the stylus code. Here's my version of Dark Mode for the Roll20 forums(as well as other sections of the site)...&nbsp; Dark Mode for the Roll20&nbsp; (could definitely use some tweaks, but works OK for me) @-moz-document url("<a href="https://roll20.net/" rel="nofollow">https://roll20.net/</a>"), url-prefix("<a href="https://app.roll20.net/forum" rel="nofollow">https://app.roll20.net/forum</a>"), url-prefix("<a href="https://app.roll20.net/campaigns" rel="nofollow">https://app.roll20.net/campaigns</a>"), url-prefix("<a href="https://app.roll20.net/vault" rel="nofollow">https://app.roll20.net/vault</a>"), url-prefix("<a href="https://app.roll20.net/private_message" rel="nofollow">https://app.roll20.net/private_message</a>"), url-prefix("<a href="https://app.roll20.net/playerdirectory" rel="nofollow">https://app.roll20.net/playerdirectory</a>"), url-prefix("<a href="https://app.roll20.net/audio_library" rel="nofollow">https://app.roll20.net/audio_library</a>"), url-prefix("<a href="https://app.roll20.net/campaigns" rel="nofollow">https://app.roll20.net/campaigns</a>"), url-prefix("<a href="https://app.roll20dev.net/forum" rel="nofollow">https://app.roll20dev.net/forum</a>"), url-prefix("<a href="https://app.roll20dev.net/campaigns" rel="nofollow">https://app.roll20dev.net/campaigns</a>"), url-prefix("<a href="https://app.roll20.net/users" rel="nofollow">https://app.roll20.net/users</a>") { body { background-color: #000; color: #fff; } body.loggedin { background-color: #000; color: #fff; } body.loggedin .container { background-color: #333; color: #fff; } .pictos { font-family: "Pictos"!important; color: #ccc !important; } a.pictos.filtersinfo { position: relative; } p.masthead_info { background-color: transparent; } .topbar .row:first-child { padding-top: 5px; padding-bottom: 5px; } .topbar .row, .topbar .menu-hider, .topbar .btn-group, .topbar .full, .topbar .simple { background-color: #999 !important; } .topbar .btn.btn-default.dropdown-toggle { margin: 0; background-color: transparent; } .col-md-12.btn-row .btn-group.alertcontainer &gt; button.sitenotifications, .col-md-12.btn-row .btn-group.alertcontainer &gt; a.btn { border: none; background-color: initial; } .col-md-12.btn-row .btn-group &gt; .btn:first-child:hover { background-color: white; color: #ed008c; } .topbar .row:first-child img { height: 40px; } .topbar .row:first-child { padding-top: 5px; padding-bottom: 5px; width: calc(100% + 30px); } .topbar .row, .topbar .menu-hider, .topbar .btn-group { background-color: #999; border: none; } .topbar .btn-default { border: none; color: #FFF; background-color: #414141; font-size: 1em; padding: 0 5px 0 5px; } .container, .container p { background-color: #333; color: #ccc !important; } .container.topbar, .container.topbar .row { background-color: #999; min-height: 3.125em; } .chosen-container .chosen-results { color: #444 !important; } .container h1, .container h2, .container h3, .container h4, .container h5, .container h6 { color: #49abff !important; } .tagset .noedit .textboxlist-bit-box-deletable { color: black; } .menu a:hover { background: transparent; } .col-md-12 { width: 100%; background-color: #282626; color: white; } .forum h3 { background-color: #0b3845; padding: 5px 10px 5px 10px; } .container.globalfooter &gt; div.row { background-color: black; color: white; } .homegamelist .gameinfo { font-size: 16px; } .title a { text-decoration: none; } a.userprofile { color: #4f91cd; } .forum a { color: #49abff; text-decoration: underline; font-weight: normal; background-color: transparent; } .redactor_editor a { color: #49abff; } li.active a { text-decoration: underline; font-weight: bold; font-size: 1.2em; padding: .285em .5em .285em .5em; } .redactor_editor, .redactor_editor:focus { background: transparent; } .redactor_box .redactor_editor, .redactor_box .redactor_editor:focus { color: black; font-size: 15px; } .forum .pull-right input { width: 210px; background-color: whitesmoke; color: black; } .jumbointro .col-md-4 h2 { display: none; } .posts .postcontent p, .posts .postcontent p span, .posts .postcontent p b, .posts .postcontent div, .posts .postcontent div p, .posts .postcontent div i, .posts .postcontent div li, .posts .postcontent span { color: #ccc !important; background-color: #3b3b3b; padding: 2px; margin: 0; } p b { color: unset; } .postcontent blockquote { background-color: #777; padding: 5px 15px; margin: 0 0 15px 15px; font-size: 85%; border-left: 8px solid #a5a5a5; } pre * { background-color: transparent !important; } .chosen-container { width: 75%!important; height: 4em; } .chosen-container-multi .chosen-choices li.search-choice { font-size: .85em; } li { color: inherit; } ul, ol { color: #ccc !important; } .posts .postcontent, .posts .post .redactor_box { background-color: #3b3b3b; color: #ccc !important; font-size: 15px; font-family: Verdana; width: 850px; border: 1px solid #a9a9a9; border-radius: 5px; padding: 5px; min-height: 4em; display: flex; flex-direction: column; justify-content: center; } .postlisting &gt; div.meta &gt; div + strong { color: #30f079 !important; padding: 1px 5px 1px 5px; font-size: .85em; } .postlisting .meta strong.devposttag { color: #ee2b7b !important; border: none; box-shadow: none; font-size: .75em; } .postlisting &gt; div.meta &gt; strong:first-child { color: #ccc; } .breadcrumb { background-color: #333; } .breadcrumb li { color: #79919e; } blockquote { background-color: #777; color: #ccc !important; border-left: 1em solid #a5a5a5; } .postcontent blockquote { background-color: #777; color: #ccc !important; margin: 0 0 15px 15px; font-size: .85em; border-left: 1em solid #a5a5a5; } .postcontent blockquote p { background-color: #5e5e5e; color: #ccc !important; font-size: .95em; } .article-snippet p { color: #ccc !important; } .container.globalfooter p { color: #ccc !important; } /* LFG */ .table-striped &gt; tbody &gt; tr:nth-of-type(odd) { background-color: #777; } .table-striped &gt; tbody &gt; tr:nth-of-type(odd) p, .table-striped &gt; tbody &gt; tr:nth-of-type(even) p { color: #ccc !important; } .campaign_details.listing_details div .description p { color: #ccc !important; } .useroptions &gt; select { color: #333; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: black; background-color: grey; } .btn-group &gt; .btn:first-child { margin-left: 5px; padding: 5px; background-color: initial; } .col-md-12.btn-row .btn-group &gt; .btn:first-child { margin: 0 0 5px 5px; padding: 2px; border: 1px solid #414141; border-radius: 10px; background-color: gray; } .note-editor .panel-default &gt; .panel-heading, .posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group, .posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .btn-group .note-btn i, .posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .btn-group .note-btn span, .posts .postcontent div.note-editor .note-toolbar-wrapper .panel-heading .note-btn-group .note-btn-group, .panel-heading .btn-group &gt; .btn * { color: #333 !important; background-color: #f5f5f5 !important; border-color: #ddd; display: inline-flex; justify-content: center; } }

Thanks for both of those!

[ Update: Install this from UserStyles.org Roll20, Status Icons, show a subset ] This is a really simple hack, but useful for my games, and hopefully useful for others, no matter what RPG rules you use. In our game, Savage Worlds, we only use some of the Status Icons: I used Stylus to shorten the status menu to show only the icons we use. Before (all icons) After (selected icons) &nbsp;&nbsp;&nbsp; You can customize your set for your games. It should be obvious from my code how I selected which status icons to leave alone and which ones to hide. Here's the code. div[data-action-type=toggle_status_blue] { display: none !important; } div[data-action-type=toggle_status_red] { } div[data-action-type=toggle_status_green] { display: none !important; } div[data-action-type=toggle_status_brown] { display: none !important; } div[data-action-type=toggle_status_purple] { display: none !important; } div[data-action-type=toggle_status_pink] { display: none !important; } div[data-action-type=toggle_status_yellow] { } div[data-action-type=toggle_status_dead] { } div[data-action-type=toggle_status_skull] { display: none !important; } div[data-action-type=toggle_status_sleepy] { display: none !important; } div[data-action-type=toggle_status_half-heart] { display: none !important; } div[data-action-type=toggle_status_half-haze] { display: none !important; } div[data-action-type=toggle_status_interdiction] { display: none !important; } div[data-action-type=toggle_status_snail] { display: none !important; } div[data-action-type=toggle_status_lightning-helix] { display: none !important; } div[data-action-type=toggle_status_spanner] { display: none !important; } div[data-action-type=toggle_status_chained-heart] { display: none !important; } div[data-action-type=toggle_status_chemical-bolt] { display: none !important; } div[data-action-type=toggle_status_death-zone] { display: none !important; } div[data-action-type=toggle_status_drink-me] { display: none !important; } div[data-action-type=toggle_status_edge-crack] { display: none !important; } div[data-action-type=toggle_status_ninja-mask] { display: none !important; } div[data-action-type=toggle_status_stopwatch] { } div[data-action-type=toggle_status_fishing-net] { } div[data-action-type=toggle_status_overdrive] { display: none !important; } div[data-action-type=toggle_status_strong] { display: none !important; } div[data-action-type=toggle_status_fist] { display: none !important; } div[data-action-type=toggle_status_padlock] { display: none !important; } div[data-action-type=toggle_status_three-leaves] { } div[data-action-type=toggle_status_fluffy-wing] { } div[data-action-type=toggle_status_pummeled] { display: none !important; } div[data-action-type=toggle_status_tread] { display: none !important; } div[data-action-type=toggle_status_arrowed] { } div[data-action-type=toggle_status_aura] { display: none !important; } div[data-action-type=toggle_status_back-pain] { } div[data-action-type=toggle_status_black-flag] { display: none !important; } div[data-action-type=toggle_status_bleeding-eye] { display: none !important; } div[data-action-type=toggle_status_broken-heart] { display: none !important; } div[data-action-type=toggle_status_cobweb] { } div[data-action-type=toggle_status_broken-shield] { display: none !important; } div[data-action-type=toggle_status_flying-flag] { display: none !important; } div[data-action-type=toggle_status_radioactive] { display: none !important; } div[data-action-type=toggle_status_trophy] { display: none !important; } div[data-action-type=toggle_status_broken-skull] { display: none !important; } div[data-action-type=toggle_status_frozen-orb] { display: none !important; } div[data-action-type=toggle_status_rolling-bomb] { display: none !important; } div[data-action-type=toggle_status_white-tower] { display: none !important; } div[data-action-type=toggle_status_grab] { display: none !important; } div[data-action-type=toggle_status_screaming] { } div[data-action-type=toggle_status_grenade] { display: none !important; } div[data-action-type=toggle_status_sentry-gun] { display: none !important; } div[data-action-type=toggle_status_all-for-one] { display: none !important; } div[data-action-type=toggle_status_angel-outfit] { display: none !important; } div[data-action-type=toggle_status_archery-target] { }

Nice. I hope it continues to work after the Status Icon revamp. But even if it doesn't, hey—new status icons!

[ Update: Install this from UserStyles.org Roll20, Turn Order Settings, sort by card ] Another simple hack: I streamlined the Turn Order Settings dialog to show only the ones I use. In Savage Worlds, I use only the sort by card, but you can use my code to keep the options that you use and hide the others. Before After (Still a shame this has to be clicked each round) It's a distraction each round to open this Settings box, click By Card/Suit, then close this box. If anyone can show a way to make this button visible on the Turn Order box instead of this one, I would really appreciate it. Here's my code: div#initiativewindow_settings { background-color: ivory; } div#initiativewindow_settings p:nth-child(1) { display: block; } /* sort options */ div#initiativewindow_settings p:nth-child(2) { display: none; } /* numerically */ div#initiativewindow_settings p:nth-child(3) { display: none; } /* alphabetically */ div#initiativewindow_settings p:nth-child(4) { display: block; } /* card suit */ div#initiativewindow_settings p:nth-child(6) { display: none; } /* custom item */ div#initiativewindow_settings hr { display: none; } /* nth-child 5 and 7 */

That's pretty handy for Savage Worlds players!

[ Update: Install this from UserStyles.org Roll20, Edit Macro, full size dialog ] Editing Macros. Imagine the time you could save if you didn't have to scroll to set the player visibility! Before (Scroll to make Player Visibility field visible.) After (With a bonus and fun macro!) The very simple code: /* Edit Macro dialog */ div[data-macroid] { height: 400px !important; } div[data-macroid] textarea.macro { height: 75px; }

Thats an excellent edition. Having to scroll for that every time is so frustrating.

That's going in my repertoire immediately. Great idea.

Here's one for my fellow sheet authors, although it's not 100% to where I'd like it. Ever been tweaking your sheet's css or html and gotten tired of swapping between your code window and the preview window? I know I did. So, I made the following style: Sheet Editor WYSIWYG editor style #customsheet-editor .tab-content { display: grid; grid-template-columns: 738px 20px 853px; grid-template-rows: 775px; grid-template-areas: "html-css . preview"; justify-content: start; } #customsheet-layout, #customsheet-css, #customsheet-translation { width: 738px; grid: html-css; } #customsheet-preview { width: 853px; grid: preview-trans; display: block; } There are some caveats that I haven't been able to get to work the way I want: The dual panes are not centered in the screen, instead extending right from the code window Switching to the translation pane causes some weirdness Anyways, enjoy and I look forward to seeing what improvements someone better at styles than me comes up with.

That is a great idea, Scott.&nbsp;

[ Update: Install this at UserStyles.org Roll20, New Card, show full size ] Deleting cards without scrolling? We can build it! Before (Scroll to see Delete button) After (Demo only, nobody would delete a pirate card) And the simple code: /* New Card dialog */ div.cardeditor div.dropbox { min-height: 250px !important; height: 250px !important; } div.cardeditor div.clear:nth-child(5) { display: none !important; }

Wow, the first thread was open for like the better part of a year without any submissions beyond mine. Someone broke the ice.

I installed your styles for a more compact Turn Tracker, Main Macro bar, and Token Macro bar. It's nice to get that screen real estate back, thanks! The Main Macro bar code didn't work for me (on Firefox), until I changed the height setting. Original Code /*macro quickbar */ #macrobar { &nbsp; height: auto !important; &nbsp; width: 92% !important; &nbsp; background-color: rgba(0, 0, 0, 0.44) !important; &nbsp; text-align: center !important; &nbsp; margin-left: 60px !important; } Revised Code (manually set the height) /*macro quickbar */ #macrobar { &nbsp; height: 2.3em !important; &nbsp; width: 92% !important; &nbsp; background-color: rgba(0, 0, 0, 0.44) !important; &nbsp; text-align: center !important; &nbsp; margin-left: 60px !important; }

Thanks, I've amended the original post.The only thing I really miss about Stylish is syncing styles. I probably pulled that off of my Chrome setup. I recently went through and did a lot of clean up of duplicate code.

Mike deBoston said: Deleting cards without scrolling? We can build it! Nice.&nbsp; Roll20 really should implement this one in the next update.

[ Update: Install this from UserStyles.org Roll20, Turn Tracker, lock in position ] This locks the Turn Tracker in position. It can't be dragged, but every time it's opened it will reappear in the place you'd like. Here's the Stylus code: div[aria-labelledby="ui-id-9"] { position: fixed; top: 60px !important; left: 60px !important; } The `ui-id-9` tag isn't guaranteed to be stable, so this might break in the future. If you'd like the box positioned elsewhere (top right maybe?), just change the top or left values.

keithcurtis said: Thanks, I've amended the original post.The only thing I really miss about Stylish is syncing styles. I probably pulled that off of my Chrome setup. I recently went through and did a lot of clean up of duplicate code. Keith (or anyone), Have you tried uploading Roll20 styles to Userstyles.com? I haven't tried it (I'm new to Stylus) but it looks like a place that could store all of the tricks in this thread. <a href="https://userstyles.org/styles/browse?search_terms=roll20.net&amp;type=false" rel="nofollow">https://userstyles.org/styles/browse?search_terms=roll20.net&amp;type=false</a>

Great idea! I'll do them as time allows and include a link for each one after the style. Anyone who has uploaded a style, feel free to include a userstyle link and I'll put it in the index. Or let me know if you want me to make them available on userstyles and I'll do it. EDIT: Styles from the first thread are updated and linked. let me know if anyone runs into any problems before I upload the others.

Cool, I'll upload mine tonight.

That site looks to be for Stylish, not Stylus. The CSS might work, but I would be leery of any site associated with Stylish.

Why are you leery of Stylish? FWIW, in the Stylus "manage" display, if you click on "Get Styles", it goes to userstyles.org.

Rabulias said: That site looks to be for Stylish, not Stylus. The CSS might work, but I would be leery of any site associated with Stylish. There was some reported privacy "issues" from the owners of the Stylish a while back... <a href="https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/" rel="nofollow">https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/</a> and a follow-up article&nbsp; "Stylish" is back, and you still shouldn't use it

Actually, I tested the install link. It installed to Stylus. Stylish was involved in a scandal when it was revealed that it was selling customer personal info. I believe Userstyles will install to whichever extension you have installed.

I still only see two styles (the latest from 2017) when I search for "roll20.net". I uploaded five, and I don't see them either. Maybe they'll show up tomorrow. <a href="https://userstyles.org/styles/browse?search_terms=roll20.net&amp;type=false" rel="nofollow">https://userstyles.org/styles/browse?search_terms=roll20.net&amp;type=false</a>

I see several pages when searching for "Roll20", but none of the ones I just uploaded. They all show up however when just browsing "newest styles."

Make sure to toggle the search to website when searching for 'roll20' and you'll gets lots of results. <a href="https://userstyles.org/styles/browse?page=1&amp;search_terms=roll20&amp;type=false" rel="nofollow">https://userstyles.org/styles/browse?page=1&amp;search_terms=roll20&amp;type=false</a>

Searching for Roll20.net = 2 hits Searching for Roll20 =&nbsp; 5 pages of hits, none of them today's Searching the latest styles = all of today's. Their search engine is weird.

Searching for Roll20 today works. They appear to sort by number of downloads. Searching for roll20.net doesn't work. ::shrug:: I'm pretty happy about this overall.

This is an example of changing the buttons on the Token Macro Bar. It changes the colors of the 1st four buttons and you can easily modify it to have different colors or color as many buttons as you'd like. But it has two problems: Each user has to install Stylus and modify the colors It colors buttons based on their position in the list, not on their function. So if you set it to make your attack button 2nd, and 2nd is red, it works until you add a button that shifts your attack down to the #3 position. Original, did-your-mother-dress-you buttons New, why-did-you-pick-those-colors buttons Here's the CSS: @-moz-document url-prefix("<a href="https://app.roll20.net/editor/" rel="nofollow">https://app.roll20.net/editor/</a>") { /* Roll20, Token Macro Bar, colorize Modifies: Token Macro Bar Changes the colors of the 1st 4 buttons. */ #secondary-toolbar ul.tokenactions button { background-image: none !important; } #secondary-toolbar ul.tokenactions button:nth-child(1) { color: white; background-color: #800080; } #secondary-toolbar ul.tokenactions button:nth-child(2) { color: white; background-color: #008000; } #secondary-toolbar ul.tokenactions button:nth-child(3) { color: white; background-color: #008080; } #secondary-toolbar ul.tokenactions button:nth-child(4) { color: white; background-color: #800000 !important; } } You can install from UserStyles.org Roll20, Token Macro Bar, colorize

That is sweet!

When I upload to UserStyles.org, I upload the before and after picture, but I only see a partial before picture. If you have any tips on how to put up better screenshots, please let me know.

I haven't really checked, actually. On some of them, I have combined before and after pictures that I post for the "cover image."

If you're making a macro chat menu of spells or weapons, you can run into a situation where you have more menu items than your player has spells. Roll20 will pile on the error messages and ugly. You can hide those errors with this style. Turn them back on again if you're trying to troubleshoot anything, of course. Before, trying to list two spells when only one exists After, error messages hidden Here's the Stylus code: @-moz-document url("<a href="https://app.roll20.net/editor/" rel="nofollow">https://app.roll20.net/editor/</a>") { /* Roll20, Chat, hide errors This hides all error messages in Chat. It's useful if you have a macro that lists 3 repeating_weapons or spells, but the character has only 2. */ div.message.error { display: none; } } You can install it here: <a href="https://userstyles.org/styles/177649/roll20-chat-hide-errors" rel="nofollow">https://userstyles.org/styles/177649/roll20-chat-hide-errors</a>

Nice. FYI, you can suppress those messages by adding the &amp;{noerror} code to your macro , as well. Depending on your macro, you can still get unwanted chat buttons, but it will suppress the orange box error messages.

WHAT? How did I not know that? That's really helpful; perhaps we should delete my Stylus solution.

I only discovered the tag last year. I think the style has value though. For instance, I have a ton of old macros that I wrote before discovering the tag. The style keeps me from having to re-write all of those.

Default Roll Template Enhancement I just realized that although I had posted the style I use to enhance the roll templates used by the D&amp;D 5e by Roll20 sheet,I hadn't posted the style I use for the Default Roll Template. There are many similarities, notably in-line links, but this has broader applicability across games, and is simple enough to allow some customization. This style also makes the template wider without overlapping the "Speaking As" identifier, and enlarges the righthand column if nothing is in the left hand column, allowing the user to take more advantage of space when labels aren't needed. Before and after: And the code: @-moz-document domain("app.roll20.net") { /*Re-styles buttons into text links*/ &nbsp; .textchatcontainer a[href^="~"] &nbsp; { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; color: #ce0f69; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; border: none; &nbsp; } /*Enlarges Righthand Column when possible*/ &nbsp; .sheet-rolltemplate-default td:first-child &nbsp; { &nbsp; &nbsp; font-weight: bold; &nbsp; &nbsp; text-align: right; &nbsp; &nbsp; min-width: 0px; &nbsp; &nbsp; padding-right: 5px; &nbsp; } /*Recolors Header*/ &nbsp; .sheet-rolltemplate-default caption &nbsp; { &nbsp; &nbsp; background-color: #333; &nbsp; &nbsp; color: #eee; &nbsp; &nbsp; font-family: "Helvetica Neue", Helvetica, sans-serif; &nbsp; &nbsp; font-size: 1.1em; &nbsp; &nbsp; padding: 1px; &nbsp; &nbsp; font-weight: bold; &nbsp; } /*The following two blocks control size and position*/ &nbsp; .sheet-rolltemplate-default td &nbsp; { &nbsp; &nbsp; padding: 1px; &nbsp; &nbsp; line-height: 1.4em; &nbsp; &nbsp; vertical-align: top; &nbsp; } &nbsp; .sheet-rolltemplate-default &nbsp; { &nbsp; &nbsp; margin-left: -30px; &nbsp; &nbsp; margin-right: 20px; &nbsp; } } Installation instructions in top post

Tighter Sidebar Lists This affects the Art Library , the Journal Tab and the Compendium . I primarily wrote it for the Journal tab to make filing easier, but I'm finding I like it on the other views too. This basically makes the thumbnail images smaller and removes excess padding from the above mentioned lists. It makes it a lot easier to drag an item up or down a long list, and to see more entries at once. It's not as desirable on the art library tab, but if you want to restore the function there, you can always toggle the style. Here is a before and after: And here is the code: .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: #eee !important; } .dd-content { padding: 0px; } #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: 18px; height: 18px; position: absolute; top: 0px; right: 0; 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&gt;button { height: 16px; margin: 0px; font-size: 14px; top: 0px; } .dd-handle { top: 0px; width: 20px; padding: 0px 10px; } Edit: Improved source icon display in compendium tab. Edit: Style now marks folders in light gray, to distinguish them from content: Edit: Minor tweak to align Compendium expand controller 3-31-2020 Installation instructions in top post

Ooh, nice keith

I edited the sidebar style to color the folders in light gray, to distinguish them from content.

Most Excellent Works on sub-folders also... :)

Pathfinder 2e - Psuedo Greyscale Once the Pathfinder 2e greyscale sheet comes out, this will be obsolete, but until then, I made a greyscale chat style meant to emulate the books. This only changes what outputs to chat, and has not really been tested for all possible chat outputs - but for the most part it seems to work. I also don't know too much about CSS so there are some mild padding issues on certain lines. I'm using Good Pro from Adobe, and Roboto from Google. .textchatcontainer .by { padding-left: 45px; } .textchatcontainer .message { padding-left: 5px; } .sheet-rolltemplate-rolls { border: 2px #000 solid; font-family: 'Good Pro', 'Roboto', sans-serif; font-size: 14px; background-color: #fff; padding: 2px; } .sheet-rolltemplate-rolls .sheet-template-header { background-color: #fff; color: #000; font-family: 'Good Pro Condensed', 'Roboto', sans-serif; font-weight: bolder; font-size: 28px; font-variant: none; text-align: left; text-transform: Uppercase; line-height: 1; padding: 0.1em 0.1em; clear:both; } .sheet-rolltemplate-rolls .sheet-template-subheader { color: #000; font-family: 'Good Pro Condensed', 'Roboto', sans-serif; text-transform: capitalize; padding: 0.2em 0em; font-size: 0.6em; font-style: normal; border-top: 2px solid; border-bottom: 2px solid; border-color: #000; } .sheet-rolltemplate-rolls .sheet-template-body { border: 0; text-align: left; background-color: #FFF; } .sheet-rolltemplate-rolls .sheet-template-row { background-color: #FFF; color: #000; margin: 0; padding: 0.1em 0.05em 0.3em 0.05em; } .sheet-rolltemplate-rolls .sheet-template-row:nth-child(2n+0), .sheet-rolltemplate-rolls .sheet-desc, .sheet-rolltemplate-rolls .sheet-notes { background-color: #fff; color: #000; border-top: 2px solid #000; } .sheet-rolltemplate-rolls .sheet-desc, .sheet-rolltemplate-rolls .sheet-notes, .sheet-rolltemplate-rolls .sheet-left { padding: 0.05em; } .sheet-rolltemplate-rolls .sheet-charactername { color: #000; text-shadow: none; float: right; font-size: 1em; font-weight: bold; } Roll20 has added scroll boxes for descriptions. If you wish to turn those off and output the full chat, add on this: .sheet-rolltemplate-rolls .sheet-desc, .sheet-rolltemplate-rolls .sheet-notes { max-height: none; overflow-y: auto; } EDIT: Updated the above code to avoid long names causing issues. There is now a break between the ability name and the player name.

+1 Mik&nbsp; Looks great!

I love it! Definitely gonna be using it for my games

I agree, good to see some love for stuff other than 5e.