Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Advertisement Create a free account

Show Off Your Style 2: The Stylening!

1571240063

Edited 1606765210
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hey folks, The first thread auto closed after 2 months without a post. I am continuing here. I'll keep up the index in this top thread, but the earlier entries will point to the original thread. As with the first thread, anyone is welcome to post their own styles . I'll link them in the index. 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) :) Note: 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. 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
1571240284

Edited 1571240307
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1571252305

Edited 1571252457
Andreas J.
Forum Champion
Sheet Author
Translator
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
1571257033
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That green glow is cool indeed. Thanks!
1571272546

Edited 1571601883
vÍnce
Pro
Sheet Author
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; } }
1571273077

Edited 1571600970
vÍnce
Pro
Sheet Author
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; } }
1571274419
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Thanks for both of those!
1571286844

Edited 1573867981
Mike deBoston
Compendium Curator
[ 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] { }
1571319072
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Nice. I hope it continues to work after the Status Icon revamp. But even if it doesn't, hey—new status icons!
1571679534

Edited 1573868078
Mike deBoston
Compendium Curator
[ 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 */
1571679765
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That's pretty handy for Savage Worlds players!
1571767387

Edited 1573868118
Mike deBoston
Compendium Curator
[ 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; }
1571767503
GiGs
Pro
Sheet Author
API Scripter
Thats an excellent edition. Having to scroll for that every time is so frustrating.
1571767792
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That's going in my repertoire immediately. Great idea.
1571769861
Scott C.
Forum Champion
Sheet Author
API Scripter
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.
1571770948
GiGs
Pro
Sheet Author
API Scripter
That is a great idea, Scott.&nbsp;
1571771392

Edited 1573868165
Mike deBoston
Compendium Curator
[ 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; }
1571772173
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Wow, the first thread was open for like the better part of a year without any submissions beyond mine. Someone broke the ice.
1571775068
Mike deBoston
Compendium Curator
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; }
1571775300
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1571775700
vÍnce
Pro
Sheet Author
Mike deBoston said: Deleting cards without scrolling? We can build it! Nice.&nbsp; Roll20 really should implement this one in the next update.
1573504667

Edited 1573868224
Mike deBoston
Compendium Curator
[ 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.
1573683589
Mike deBoston
Compendium Curator
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>
1573694554

Edited 1573696429
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1573701241
Mike deBoston
Compendium Curator
Cool, I'll upload mine tonight.
1573704604
That site looks to be for Stylish, not Stylus. The CSS might work, but I would be leery of any site associated with Stylish.
1573706269

Edited 1573707260
Mike deBoston
Compendium Curator
Why are you leery of Stylish? FWIW, in the Stylus "manage" display, if you click on "Get Styles", it goes to userstyles.org.
1573707592

Edited 1573707693
vÍnce
Pro
Sheet Author
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
1573708230
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1573709776
Mike deBoston
Compendium Curator
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>
1573712322
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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."
1573713269

Edited 1573713330
vÍnce
Pro
Sheet Author
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>
1573714791
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1573759843
Mike deBoston
Compendium Curator
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.
1573954512
Mike deBoston
Compendium Curator
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
1573954629
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That is sweet!
1573954878
Mike deBoston
Compendium Curator
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.
1573977508
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I haven't really checked, actually. On some of them, I have combined before and after pictures that I post for the "cover image."
1574657425
Mike deBoston
Compendium Curator
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>
1574664943
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1574694404
Mike deBoston
Compendium Curator
WHAT? How did I not know that? That's really helpful; perhaps we should delete my Stylus solution.
1574696957
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1574870529

Edited 1574870642
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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
1575101561

Edited 1585724331
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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
1575127838
Scott C.
Forum Champion
Sheet Author
API Scripter
Ooh, nice keith
1576514246
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I edited the sidebar style to color the folders in light gray, to distinguish them from content.
1576515670
Most Excellent Works on sub-folders also... :)
1578997387

Edited 1579046032
Mik Holmes
Pro
Marketplace Creator
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.
1579040634
vÍnce
Pro
Sheet Author
+1 Mik&nbsp; Looks great!
I love it! Definitely gonna be using it for my games
1579049001
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I agree, good to see some love for stuff other than 5e.