Show off Your Style 4: A New Hope

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 Here is another collection of  Stylus Code Styles  for anyone who may be interested. I'd suggest reading through those posts for other ideas as well as the Roll20 Stylus Wiki Page .  I won't repost the index that keithcurtis has linked in his post. But as with his threads,  anyone is welcome to post their own styles .  I have several that I use with my players and upload to userstyles.world, so all they have to do is install a single linked file, and I can update it later and they can just click on a single 'Check all styles for updates' button. I figure as long as I'm constantly tweaking my Stylus code, there's no reason not to publish it for them at the same time. Any of my codes below that move toolbars and things around are all designed to 'fit together', so if you don't use all of them, then things may end up in what seems like weird places on the screen. In each post, I've named the code based on whether it's part of the 'Players' list, or part of my 'GM' list.  The 'GM' code styles either don't affect anything my players see, or override the styles from my players when needed (e.g. lengthening the left sidebar because I have more buttons than they do). I honestly can't take credit for a bunch of these.   Most of these  at least started with  ideas and code from the  previous Stylus threads , or who knows, maybe they're still exactly the same. I'm clearly not above blatantly plagiarizing (don't sue me, George Lucas!). Enjoy! Index Instructions Style Codes VTT Page Token Styles Token Radial Menu - Position (Players) Token Radial Menu - Emojis (GM) Token Status Marker Menu - Add Labels & Active Flashing (Players) Token Status Marker Menu - Hide Unused Status Markers (Players) Token Multisided Choose Side Menu - Larger Multisided Picture (Players) Token Action ToolBar - Size & Position (Players) Token Action Toolbar - Position Override - (GM) Token Action Toolbar - Add Color to Buttons (Players) Token Settings Window - Organize (GM) Macrobar Macrobar - Size & Position (Players) Left Toolbar Left Toolbar - Size & Position (Players) Zoom Slider Zoom Slider - Size & Position (Players) Page Tab Page Tab - Size & Position (GM) Player Avatar Section Player Avatar & Names - Size & Position (Players) Turn Tracker Turn Tracker - Size & Organize (Players) Turn Tracker - Turn Order Settings Window (GM) Right Sidebar Right Sidebar - Chat - Speaking As (Players) Right Sidebar - Chat - Talk To Myself Banner (Players) Right Sidebar - Journal - Smaller Menu Lists (Players) Right Sidebar - Hide Menu Items (Players) Right Sidebar - Macros / Decks / Tables (Players) Right Sidebar - Macros Popup Windows - Resize & Organize (Players) Right Sidebar - Move Delete Rollable Table Button (GM) Right Sidebar - Miscellaneous Settings Options Visibility Override - (GM) 5E Character Sheet Right Sidebar - Chat - D&D 5E Roll Templates (Players) Right Sidebar - Chat - D&D 5E Concentration & Purple School (Players) 5E Character Sheet - Optimize Layout (Players) 5E Character Sheet - Permanent NPC Toggle Button (GM) Page Background VTT Page - Background Color (Players) Campaign Page Campaign Page - Campaign Name (Players) Character Vault Character Vault (Players) Scripts Page (Roll20 Pro Subscribers) API Scripts Page - Organize and Color (GM)

If you haven't used Stylus before, it's quite easy. Instructions: 1. Install  Stylus . 2. Open the Stylus ' manage extension ' page, then click on the 'Write New Style' button.   3. Name the style (feel free to use the name I've given for each one at the top of the post). 4. Copy the code into the codeblock section.  If it already includes a '@-moz-document' portion at the top, it will automatically set the 'Applies to' portion for you.  It's always a good idea to set each section of code to only apply to the specific sites you want it to apply to, instead of 'everything'.  I use a 'regexp' ('Regular Expression') to apply the codes I use to either just the Roll20 VTT window on both the regular and dev servers, or to specific subdomains (such as the character vault page). That's it!  If you are ever on a page and you want to temporarily disable Stylus, it's easy to do if you have 'pinned' the extension icon in Chrome.  You can pin it by clicking on the 'puzzle piece'  1  to display your extensions, then make sure the extension you want to pin is checked 2 , and it will stay at the top of the browser next to the address bar 3 . ( Link back to Index )

Token Radial Menu - Position (Players) Moves the Radial Menu to the upper left-hand corner of the screen. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token - Radial Menu */ /* Radial Menu Location */ #radial-menu { position: fixed; top: 80px !important; left: 95px !important; }&nbsp; /* Remove Edit Token Button and Set Location if visible*/ #radial-menu .button.button-1 { &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Fixed placement for Edit Token Button */ &nbsp; &nbsp; top: 165px;&nbsp; &nbsp; &nbsp;/* top: 218px; */&nbsp; &nbsp;/* Vertical placement for Edit Token Button */ &nbsp; &nbsp; left: 54px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* Horizontal placement for Edit Token Button */ &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Remove Edit Token Button */ } /* Status Marker Button Location */ #radial-menu .button.button-2 { &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Fixed placement for Status Marker Button */ &nbsp; &nbsp; top: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* 175px; */ /* Vertical placement for Status Marker Button */ &nbsp; &nbsp; left: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/* Horizontal placement for Status Marker buttons */ &nbsp; &nbsp; border-radius: 25px 25px 25px 25px; /* Round Status Marker menu button */ &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Extend width so Status Marker Menu will fill horizontal */ &nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; /* Transparent background so no bar is visible */ } /* Remove Outline From Status Marker Button */ #radial-menu &gt; div.button.button-2.action.open.animcomplete[data-action-type="show_marker_menu"] { width: 40px; } #radial-menu .button.button-2, .markermenu { --color-element-bg: transparent; -webkit-box-shadow: none; width: 100%; } /* Removes transparent outline from Status Marker button */ #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: -45px; width: 38px; } /* Removes white outline from all buttons */ #radial-menu .button {border: 0px;} /* Brighter colors */ #radial-menu { --color-text-primary: #b3b3b3; --color-bg-dark: #1c1111; --color-text-disabled: #150d0d; --color-element-bg: #372828; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; --StatusMarkerButton: .button.button-2 } /* Font Size Inside Colored Buttons */ #radial-menu .button div.inner span {font-size: 18px !important;} /* Colored Button Input Box Size &amp; Location */ #radial-menu .popupvalue { position: absolute; top: 5px; left: 45px; width: 35px; height: 30px; z-index: 1005 } /* Colored Button Input Fields Font Size */ #radial-menu .popupvalue input { width: 100%; font-size: 16px } /* Shadow for red bar button */ #radial-menu .button.button-3 { box-shadow: 0px 0px 5px var(--color-text-disabled),&nbsp; &nbsp; &nbsp;inset 0px 0px 5px var(--color-red),&nbsp; &nbsp; &nbsp;inset 0px 0px 10px var(--color-red),&nbsp; &nbsp; &nbsp;inset 0px 0px 15px var(--color-red) !important; top: -42px; } /* Shadow for blue bar button */ #radial-menu .button.button-4 { box-shadow: 0px 0px 5px var(--color-text-disabled),&nbsp; &nbsp; &nbsp;inset 0px 0px 5px var(--color-blue),&nbsp; &nbsp; &nbsp;inset 0px 0px 10px var(--color-blue),&nbsp; &nbsp; &nbsp;inset 0px 0px 15px var(--color-blue) !important; top: -1px; } /* Shadow for green bar button */ #radial-menu .button.button-5 { box-shadow: 0px 0px 5px var(--color-text-disabled),&nbsp; &nbsp; &nbsp;inset 0px 0px 5px var(--color-green),&nbsp; &nbsp; &nbsp;inset 0px 0px 10px var(--color-green),&nbsp; &nbsp; &nbsp;inset 0px 0px 15px var(--color-green) !important; top: 42px; } } ( Link back to Index )

Token Radial Menu - Emojis (GM) Adds Emojis to the Radial Menu bubbles.&nbsp; I marked this as 'GM' because my players don't use the Radial Menu bubbles (instead using D&amp;D Beyond for their character sheets). (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* 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; */} ( Link back to Index )

Token Status Marker Menu - Add Labels &amp; Active Flashing &nbsp;(Players) This moves the Status Marker menu to the top of the screen, widens it to the width of the window and automatically resizes it based on the number of status markers you have.&nbsp;&nbsp; When a status marker is applied to a token, it gets moved to the top left of the list, and is bordered in green, blue, or red (the three types of status markers I use), and then flashes with a yellow border.&nbsp; The coloring is heavily specific to the markers that I use. There's also some optional code to adjust the layout when any markers are active to move them onto their own row at the top. Just un-comment the 'Put Active Buttons on Top Line and move Inactive Markers to separate line below' section. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token - Status Marker Labels &amp; Flashing */ /* Status Marker Menu Width Override: 100% - 385px is from 54px location for GM placement */ /* Status Marker Menu Width Override: 100% - 435px is for PC placement */ /* Status Marker Menu Width */ #radial-menu div.markermenu.open { min-width:&nbsp; 195px; width: calc(100% - 453px) !important; max-width: 908px;&nbsp; min-height: 167px; height: auto; border-radius: 15px; top: 1px; left: 42px;&nbsp; padding: 5px 0px 5px 5px; display: flex; flex-wrap: wrap;} /* Keep buttons on top */ #radial-menu .button.button-1 #radial-menu .button.button-2, #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { z-index: 1; } /* Remove Transition from Status Marker Window */ #radial-menu, #radial-menu .button.button-2, .markermenu.open { -webkit-transition: none !important; transition: none !important; } #radial-menu &gt; div.button.button-2.action.open.animcomplete &gt; div.markermenu:not([class="open"]) { width: 0px;} /* Unneeded?&nbsp; Maybe need to change to #radial-menu .markermenu.open */ #radial-menu .markermenu { padding-left: 0px; } /* Undo the default dead "X" styling */ #radial-menu .markermenu .markercolor.dead { font-weight: normal; height: 34px; margin-left: 0; padding: 0; top: 0 !important; width: 34px; } /* Recreate the dead "X" without disrupting the layout */ #radial-menu .markermenu .markercolor.dead::before { content: "X"; display: block; font-size: 34px; font-weight: bold; position: absolute; text-align: center; top: 7px; width: 100%; } /* Resize Status Marker Icons */ #radial-menu div.markermenu.open div.markericon { height: 40px; width: 40px; background-size: 40px; } /* Prevent the icons from taking up extra space, allow space for the label text */ #radial-menu .markermenu.open .statusicon { font-size:0; margin-bottom: 6px; } /* Show the icon titles as labels */ #radial-menu .markermenu.open .statusicon::after { color: black; content: attr(title); display: inline-block; font-size: 8px; line-height: 1em; overflow: hidden; position: relative; text-align: center; top: 41px; white-space: nowrap; width: 40px; height: 10px; } #radial-menu .markermenu.open .statusicon.active::after { top: 45px; font-weight: bold; } /* Move Active Buttons to Top Left */ div.statusicon.markericon.action.active { display: flex; align-self: flex-start; order: 0; } div.statusicon.markericon.action:not(active) { order: 1; } /* Put Active Buttons on Top Line and move Inactive Markers to separate line below */ /* div.markermenu.open &gt; div:first-child:not(active) { flex-basis: 100%; display: flex !important; height: 0px !important; order: 1; margin: 0px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; } div.markermenu.open &gt; div:first-child:not(active)::after { display: none !important; } */ /* Blinking Green Neutral Status Markers */ .active[title="Concentrating"], .active[title="Held-Action"], .active[title="FlyHeight"], .active[title="ClimbHeight"], .active[title="BurrowDepth"], .active[title="SwimDepth"] { animation: blinkingGreenStatusMarker 1.5s infinite; } @keyframes blinkingGreenStatusMarker { 0% { border: 4px solid #0a0; border-radius: 4px;} 25% { border: 4px solid #0a0; border-radius: 4px;} 50% { border: 4px solid #ff0; border-radius: 4px;}&nbsp; 75% { border: 4px solid #0a0; border-radius: 4px;} 100% { border: 4px solid #0a0; border-radius: 4px;} } /* Blinking Blue Helpful Status Markers */ .active[title="Aid"], .active[title="Aura"], .active[title="Blessed"], .active[title="Burrowing"], .active[title="Climbing"], .active[title="Enlarged"], .active[title="Flying"], .active[title="Hasted"], .active[title="Heroism"], .active[title="Hidden"], .active[title="Inspiration"], .active[title="Invisible"], .active[title="MirrorImage"], .active[title="Raging"], .active[title="Ritual"], .active[title="Sacred-Weapon"], .active[title="Shrunken"], .active[title="Stable"], .active[title="Swimming"], .active[title="Warded"] { animation: blinkingBlueStatusMarkers 1.5s infinite; } @keyframes blinkingBlueStatusMarkers { 0% { border: 4px solid #00f; border-radius: 4px;} 25% { border: 4px solid #00f; border-radius: 4px;} 50% { border: 4px solid #ff0; border-radius: 4px;} 75% { border: 4px solid #00f; border-radius: 4px;} 100% { border: 4px solid #00f; border-radius: 4px;} }&nbsp; &nbsp; /* Blinking Red Harmful Status Markers */ .active[title="Bane"], .active[title="Banished"], .active[title="Blind"], .active[title="Charmed"], .active[title="Confused"], .active[title="Cursed"], .active[title="Dead"], .active[title="Deafened"], .active[title="Drowning"], .active[title="Dying"], .active[title="Encumbered"], .active[title="Exhaustion"], .active[title="Frightened"], .active[title="Frozen"], .active[title="Grappled"], .active[title="Hexed"], .active[title="Incapacitated"], .active[title="Marked"], .active[title="On-Fire"], .active[title="Paralyzed"], .active[title="Petrified"], .active[title="Poisoned"], .active[title="Prone"], .active[title="Restrained"], .active[title="Silenced"], .active[title="Slowed"], .active[title="Stunned"], .active[title="Suffocating"], .active[title="Unconscious"] { animation: blinkingRedStatusMarkers 1.5s infinite; } @keyframes blinkingRedStatusMarkers { 0% { border: 4px solid #f00; border-radius: 4px;} 25% { border: 4px solid #f00; border-radius: 4px;} 50% { border: 4px solid #ff0; border-radius: 4px;} 75% { border: 4px solid #f00; border-radius: 4px;} 100% { border: 4px solid #f00; border-radius: 4px;} } } ( Link back to Index )

Token Status Marker Menu - Hide Unused Status Markers &nbsp;(Players) This code simply hides all of the native status markers, which I don't use in my game. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token - Hide Unused Status Markers */ div[data-action-type=toggle_status_blue] { display: none !important; }&nbsp; div[data-action-type=toggle_status_red] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_dead] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_fishing-net] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_fluffy-wing] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_aura] { display: none !important; } div[data-action-type=toggle_status_back-pain] { display: none !important; } 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_bolt-shield] { display: none !important; } div[data-action-type=toggle_status_broken-heart] { display: none !important; } div[data-action-type=toggle_status_cobweb] { display: none !important; } 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] { display: none !important; } 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] { display: none !important; } } ( Link back to Index )

Token Multisided Choose Side Menu - Larger Multisided Picture &nbsp;(Players) Makes token images on the 'Choose Side' popup window larger. (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token - Larger Multisided Picture */ /* Picture size */ .sidechoices &gt; div.sidechoice &gt; img { min-width: 111px !important; min-height: 111px !important; } } ( Link back to Index )

Token Action ToolBar - Size &amp; Position (Players) This moves the Token Action Toolbar to the left side of the screen and aligns tokens vertically. (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token Action - ToolBar */ #secondary-toolbar { position: fixed; top: 144px; /* add 38px (182px) if under Page Tab button */ left: 4px; width: auto; box-shadow: none; border-radius: 3px; background-color: rgba(0, 0, 0, 0.44) !important; } .btn.btn-default, #secondary-toolbar .tokenactions .btn&nbsp;{ display: flex; align-items: center; padding: 0px 3px 0px 3px; margin-top: 2px; margin-bottom: 0px; margin-right: 1px; text-align: center; } #secondary-toolbar li { border-right: 0px; } } ( Link back to Index )

Token Action Toolbar - Position Override - (GM) Adjusts the location of the left toolbar for additional GM buttons. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token Action Toolbar Location Override*/ #secondary-toolbar {top: 236px !important;} } ( Link back to Index )

Token Action Toolbar - Add Color to Buttons (Players) This is campaign specific for the button ids, but it is a way to add color to Token Actions. You will have to right-click on the Token Action toolbar and inspect the code to get the button ids for your game. My code also has the emoji for each one commented out at the end so that I can quickly reference them later (but the Roll20 forums don't like a lot of emojis). (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token Action - Add Color to Buttons */ ul.mode.tokenactions &gt; li &gt; .btn { min-width: 15px; } .macrobox &gt; .btn { min-width: 15px; } .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-M84RmvHP_7CfVnFDBd0"] { background-color:#077707 !important; background-image:none !important; } /* ⏱️ */ .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MTBca5DuBWE31VGO3CG"] { background-color:#ff0 !important;&nbsp; background-image:none !important; } /*  */ .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MAkr8ayaP4_1H9k9mQm"] { background-color:#773311 !important; background-image:none !important; } /* &nbsp; */ .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MAkfUS5RjrBvImGOgy_"] { background-color:#000000 !important; background-image:none !important; } /* &nbsp; */ .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MC7t6PSLWlJrBbH_-tT"] { background-color:#DD0000 !important; background-image:none !important; } /*  */ .btn[data-macroid="-M4MqKQpTCRs8I6I65Rh|-MQLGNh4_efiWuFXfi1F"] { background-color:#39D !important; background-image:none !important; } /*  */ } ( Link back to Index )

Token Settings Window - Organize (GM) Removes whitespace and unneeded alert fields.&nbsp; Optional removal of tooltip dialogue box. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token Settings Popup Window */ /* Remove Whitespace */ div.tokeneditor__col {padding-top: 0px} /* Tooltip Dialogue Box Position (if not removed) */ .dialog.largedialog.tokeneditor .basic.tab-pane.tokeneditor__details small {position: relative; top: -99px;} body &gt; div &gt; div&gt; div &gt; div &gt; div.tokeneditor__details &gt; div.tokeneditor__row {margin-top: 0px !important;} body &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div &gt; div.tokeneditor__container-tooltip.tooltip_disable_box {z-index: 2} div.basic.tab-pane.tokeneditor__details &gt; div.tokendescription.w-100 {width: 151px; z-index: 1} /* Optional - Remove Tooltip Dialogue Box */ .tokendescription, div.basic.tab-pane.tokeneditor__details &gt; div.tokeneditor__row, div.basic.tab-pane.tokeneditor__details &gt; hr:nth-child(2), .dialog.largedialog.tokeneditor .basic.tab-pane.tokeneditor__details small {display: none;} /* Shrink whitespace between horizontal lines */ div.prototype.tab-pane &gt; div &gt; hr, div.basic.tab-pane.tokeneditor__details &gt; hr {margin: 1px;} /* Adjust whitespace below horizontal lines above 'Total Light' */ div.token_light &gt; hr:nth-child(5) {padding-bottom: 10px;} /* Remove Convert DL alert &amp; Advanced &amp; Legacy Settings */ div.prototype.tab-pane &gt; div.alert.alert-info, div.token_light &gt; div.token_light, div.token_light &gt; hr:nth-child(8) {display: none;} } ( Link back to Index )

Macrobar - Size &amp; Position (Players) Resizes the macrobar so that the buttons take up less space. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Macrobar */ body { font-weight: 400; letter-spacing: normal; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #macrobar { background-color: transparent; margin-top: -25px; margin-bottom: -5px; padding-top: 0px; padding-bottom: 15px; min-height: 50px; height: auto; } #macrobar_macros {&nbsp; &nbsp;background-color: transparent; position: relative; bottom: -7px; padding-left: 5px; overflow-wrap: anywhere; min-height: 25px; height: auto; } #macrobar::-webkit-scrollbar { display: none; } #macrobar .macrobox { margin-right: 7px; } #macrobar div.macrobox:hover { padding-right: 7px; margin-right: 0px;&nbsp; &nbsp;} .macrobox .btn, .macrobox .btn.btn-default { padding: 4px; font-size: 18px; } } ( Link back to Index )

Left Toolbar - Size &amp; Position (Players) Resizes the Left Toolbar buttons, hides unused ones, and moves the 'Dark Mode' slider to the top of the bar. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Left Toolbar */ /* Move Toolbar Down */ #floatingtoolbar { position: fixed; top: 43px !important; /* add 38px (81px) if under Page Tab button */ left: 5px !important; } /* Smaller Toolbar */ /*&nbsp; #floatingtoolbar { width: 20px; } #floatingtoolbar ul li { line-height: 17px; font-size: 17px; padding: 1px 2px 1px 2px !important; } #fogcontrols.udl.hide .currentselection, #fogcontrols.udl.reveal .currentselection { height: 17px;&nbsp; margin-left: 0px; } */ /* DARK MODE TOGGLE */ /* Dark Mode Position */ .dark-mode-switch { position: fixed; top: 18px !important; /* add 38px (56px) if under Page Tab button */ left: 3px !important; width: 30px; } /* Dark Mode Remove Tooltip */ .dark-mode-switch &gt; span.tooltiptext { display:none; } /* Dark Mode Resize button */ .dark-mode-slider { width: 36px;&nbsp; &nbsp; height: 22px; } /* Dark Mode Resize Moon Button */ .dark-mode-slider &gt; svg { top: 2px; left: 2px; height: 18px; width: 18px; } /* Dark Mode Resize White Circle Behind Moon Button */ span.dark-mode-slider::before { top: 2px; left: 2px; height: 18px; width: 18px; } /* Dark Mode Fix button movement */ input:checked + .dark-mode-slider:before, input:checked + .dark-mode-slider svg { transform: translateX(13px); } /* DISPLAY THESE */ /* #select, #editinglayer, #drawingtools, #fogcontrols.udl.hide, #measure, #startrounds */ /* HIDE THESE */ #fxtools, #zoompanel, #placelight, #diceroller, #helpsite { display: none !important; } } ( Link back to Index )

Zoom Slider - Size &amp; Position (Players) Removes the zoom slider and moves the Page Zoom % to the top left of the screen. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Zoom Slider */ #zoomclick:not(.zoomvalue) { position: fixed; left: 2px; height: 0px; } .zoomValue { display: block; font-size: 12px; font-family:"arial black"; background-color: #22222247; padding: 0px; position: absolute; top: 1px !important; /* add 38px (39px) if under Page Tab button */ } .zoomplus, .zoomminus { display: none !important; font-size: 7px; } #zoomclick .btn { display: none !important; } #zoomslider { display: none !important; } #zoomslider a.ui-slider-handle.ui-state-default.ui-corner-all { display: none !important; } } ( Link back to Index )

Page Tab - Size &amp; Position (GM) Adjust page tab to fit the window, and resize the individual page icons/buttons. (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* GM Compact Page Tab */ #page-toolbar {height: 290px; max-height: 100% !important; width: calc(100% - 375px) !important; overflow: hidden; left: 40px;} #page-toolbar.closed {height: auto !important; top: -1320px !important; /*this custom css seems to interfere with the JS based animation of the toolbar opening and closing. This makes sure that the page toolbar is properly placed when closed*/} #page-toolbar .container {width: auto; white-space: normal; /* height: 300px; */} /* #page-toolbar .height {height: 300px !important } */ #page-toolbar .container {border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 100%; padding-left: 0; padding-right: 0;} #page-toolbar .pages {flex-wrap: wrap !important;} #page-toolbar .pages .availablepage {margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; width: 80px;} #page-toolbar .pages .availablepage img.pagethumb {left: 50%; margin-top: 0; max-height: 75px; max-width: 75px; position: absolute; top: 5px; transform: translate(-50%);} #page-toolbar .pages .availablepage span {bottom: 0; max-height: 100%; overflow-wrap: anywhere; position: absolute; white-space: normal;} #page-toolbar .handle.showtip {position: fixed; top: 2px !important; right: 335px !important;} #page-toolbar &gt; div.handle.showtip {border-radius: 3px;} :root { --color-surface1: #74767b } } ( Link back to Index )

Player Avatar &amp; Names - Size &amp; Position (Players) Resizes player names and stacks them vertically on the left side of the screen. I don't use avatars/video, so this really helps save space. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Player Names */ #avatarContainer { margin-bottom: -17px; padding-bottom: 0px; padding-left: 0px; width: 1%; } #playerzone #avatarContainer .player { min-width: 120px; max-width: 250px;&nbsp; } div.playername.player-bookmark.ui-draggable, .color_picker, .playercolor { width: 100%; border-radius: 12px; } /* Color Picker popup window */ #color_selector { position: fixed; height: 70px; top: auto !important; bottom: 55px !important; left: 130px !important; width: 600px !important;&nbsp; } #color_custom &gt; label { display: inline-block; } #color_value { width: 60px !important; } } ( Link back to Index )

Turn Tracker - Size &amp; Organize (Players) Resizes items on the Turn Tracker and colors the current turn. (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Turn Tracker */ #initiativewindow { padding: 0px 0px; overflow-x: auto }&nbsp; #initiativewindow ul li { padding: 0px 1px 0px 0px; min-height: 15px }&nbsp; #initiativewindow ul li img { max-width: 20px; max-height: 18px; padding: 0px 3px 0px 0px; }&nbsp; #initiativewindow ul li span.initiative { font-size: 16px; padding: 0px; min-height: 12px }&nbsp; #initiativewindow ul li span.name { font-size: 12px; padding-top: 1px }&nbsp; #initiativewindow ul li:first-of-type img { max-width: 32px; max-height: 30px; padding: 0px 3px 0px 0px; }&nbsp; #initiativewindow ul li:first-of-type span.name { font-weight: bold; font-size: 14px; color: darkgreen; }&nbsp; #initiativewindow ul li:first-of-type span.initiative { font-size: 20px; color: darkgreen; padding: 5px 0px 0px 0px }&nbsp; #initiativewindow input { font-size: 14px; height: 10px; max-width: 15px; top: 0px; text-align: right; }&nbsp; .ui-dialog-titlebar { padding: 1px 5px; font-size: 8px; }&nbsp; .ui-dialog .ui-dialog-title { margin-top: 0px; margin-bottom: 0px; padding: 0px }&nbsp; .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; }&nbsp; .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; text-indent: 9999px }&nbsp; .ui-dialog .ui-dialog-buttonpane { border-width: 1px 0 0 0; margin: .05em 0 0 0; background-color: #f5f5f5; padding: 1px 10px 1px; }&nbsp; .ui-dialog .ui-dialog-buttonpane button { margin: .05em .04em .05em 0; }&nbsp; } ( Link back to Index )

Turn Tracker - Turn Order Settings Window (GM) Adjust Turn Tracker settings window to remove unneeded elements. (Before - after resizing window to show everything) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* GM Turn Tracker Turn Order Settings */ #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;} } ( Link back to Index )

Right Sidebar - Chat - Speaking As (Players) Removes all 'Speaking As' names except the ones that I designate, so this is also campaign specific. Can be alternately used to hide designated names. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Chat - Speaking As */ #speakingas option:not([value=character\|-KHIA-W9OoZp9eE6UdWy]):not([value=player\|-M4MqKQpTCRs8I6I65Rh]):not([value=character\|-M7YiSUD9rhnHKmKmBnY]):not([value=character\|-M7Yi0tFL482VJrJBblW]):not([value=character\|-M7Yi3hBPf_U-VYId7q0]):not([value=character\|-M7YiVxk1Hz1ebQYkDhh]):not([value=character\|-M7YiXjwmM2ztpWWzsj7]):not([value=character\|-MfJu8dkIod0GA9EMclI]) { display: none; } /* Hide Specific Character #speakingas option[value=character\|character_id] { display: none; } */ /* Hide all BUT specfic characters #speakingas option:not([value=player\|player_id]):not([value=character\|character_id]) { display: none; } :not([value=])&nbsp; */ /* Character Name Example :not([value=character\|-M7YiSUD9rhnHKmKmBnY]) character\|-M7YiSUD9rhnHKmKmBnY */ } ( Link back to Index )

Right Sidebar - Chat - Talk To Myself Banner (Players) Adjusts the 'Talking to Yourself" warning to put it directly above the chat field. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Chat - Talk To Myself Banner */ #textchat-notifier { position: relative; width:92%; top: 0px; text-align: center; background-color: rgb(162, 0, 0); color: rgb(255, 255, 255); padding: 1px 5px; font-size: .7em; line-height: 1.1em; font-weight: bold; text-transform: uppercase; border-radius: 10px 10px 10px 10px; border: 1px solid hsl(45, 70%, 81%); border-top: 0; box-shadow: 1px 2px 5px rgba(101, 77, 121, 0.25); } } ( Link back to Index )

Right Sidebar - Journal - Smaller Menu Lists (Players) This makes the journal items much more compact and saves a lot of space. (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Journal - Smaller Menu Lists */ #rightsidebar &gt; ul.tabmenu { right: 0px;} .dd-list .journalitem .name, .dd-list .library-item .name { top: 0px; } .dd-list .journalitem .token, .dd-list .library-item .token { top: 0px; } .dd-item&nbsp; .folder-title {&nbsp; &nbsp; &nbsp;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;&nbsp; &nbsp; 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; } #journal &gt; div.content.searchbox { float: left; margin: 0px; padding-bottom: 0px; padding-right: 0px; width: calc(100% - 90px);} #journal &gt; div.content.searchbox &gt; input { min-width: 152px; width: calc(100% - 80px); } #journal &gt; div &gt; button.superadd.btn { margin-bottom: 9px; margin-top: 5px; line-height: 17px;} } ( Link back to Index )

Right Sidebar - Hide Menu Items (Players) Hide menu items that I don't use (art tab, jukebox, and several items on the settings tab, etc.) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Hide Menu Items */ #arttab { display: none !important; } #jukeboxtab { display: none !important; } [title~=Compendium] { display: none !important; } div.ui-tabs.ui-widget.ui-widget-content.ui-corner-all.ui-resizable { min-width: 315px; } #settings-accordion &gt; div:nth-child(2), #settings-accordion &gt; div:nth-child(7) { display: none;} #collapseKeyboardShortcuts &gt; div &gt; div &gt; table &gt; tbody &gt; tr &gt; td, #collapseKeyboardShortcuts &gt; div &gt; label , #collapseKeyboardShortcuts &gt; div &gt; div &gt; table &gt; tbody &gt; tr&nbsp; { font-size:14px; padding: 4px; } #collapseKeyboardShortcuts, #collapseKeyboardShortcuts &gt; div, #collapseKeyboardShortcuts &gt; div &gt; div &gt; table, #collapseKeyboardShortcuts &gt; div.panel-body.m2-bottom &gt; div { margin-bottom: 0px; } #collapseKeyboardShortcuts &gt; div &gt; label { margin-bottom: 0px; margin-top: 15px; } } ( Link back to Index )

Right Sidebar - Macros / Decks / Tables (Players) Hide or resize several items on the Macros / Decks/ Tables tab of the chat window. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Macros / Decks / Tables */ /* Remove 'Macro explanation' Message */&nbsp; #deckstables &gt; div &gt; p { display: none; } /* Move 'Show macro quick bar?' checkbox to top of list */ #deckstables &gt; div &gt; label { position: absolute; top: 35px; right: 131px } /* Move 'Show macro quick bar?' checkbox to right side of text */ /* #deckstables &gt; div &gt; label &gt; input { float: right; position: relative; right: -10px; } */&nbsp; /* Macros Resizing */&nbsp; #existingmacros &gt; tbody &gt; tr.macro { height: 16px; } #existingmacros &gt; tbody &gt; tr.macro&nbsp; &gt; td { height: 16px; padding: 3px; } #existingmacros &gt; tbody &gt; tr.macro &gt; td.bartoggle &gt; label { margin-bottom: 0px; } #existingmacros &gt; tbody &gt; tr.macro &gt; td.bartoggle &gt; label &gt; input { margin-right: 2px; } /* Remove Decks */ #deckstables &gt; div &gt; h3:nth-child(8), #deckstables &gt; div &gt; h3:nth-child(9), #adddeck, #existingdecks { display: none; } /* Rollable Tables */ #existingrollabletables { margin-bottom: 0px; } #existingrollabletables &gt; tbody &gt; tr &gt; td { line-height: 14px; } #existingrollabletables &gt; tbody &gt; tr.rollabletable &gt; td { padding: 2px;} #existingrollabletables &gt; tbody &gt; tr &gt; td.actions &gt; button { padding-left: 2px; padding-right: 2px; } #existingrollabletables &gt; tbody &gt; tr &gt; td.actions { min-width: 75px;} #existingrollabletables &gt; tbody &gt; tr &gt; td.actions &gt; button { display: inline-block; } #deckstables &gt; div.content &gt; h3:nth-child(15) { margin-bottom: 5px; } #deckstables &gt; div &gt; div.clear { display: none; } } ( Link back to Index )

Right Sidebar - Macros Popup Windows - Resize &amp; Organize (Players) Resizes and moves elements on the Edit Macro popup window. (Before) (After) @-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; } } ( Link back to Index )

Right Sidebar - Move Delete Rollable Table Button (GM) Moves the 'Delete Rollable Table' button to be fixed at the bottom right part of the screen.&nbsp; Useful if you need to delete a lot of rollable tables quickly. Two options for a wide or skinny button. (Skinny option) (Wide option) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Rollable Token Delete Table Button */ /* Wide Button */ /* [class*="deleterollabletable"] { position:fixed !important; bottom:8px !important; right: 15px; width: 147px; padding: 4px 0px; overflow: clip; } */ /* Small Button */ [class*="deleterollabletable"] {position: fixed !important; bottom: 8px !important; right: 105px; width: 30px; height: 30px; padding: 0px 0px; white-space: normal; font-size: 8px; line-height: 10px;} } ( Link back to Index )

Right Sidebar - Miscellaneous Settings Options Visibility Override - (GM) Makes the 'Miscellaneous' Settings options (including 'Apply Default Settings' and 'Transmogrifier') visible for the GM if using the 'Right Sidebar - Hide Menu Items (Players)' stylus code. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Hide Menu Items Override */ #settings-accordion &gt; div:nth-child(7) {display: block;} } ( Link back to Index )

Right Sidebar - Chat - D&amp;D 5E Roll Templates (Players) This code adjusts the 'D&amp;D 5E by Roll20' roll templates to fit more nicely in the chat window, colors links to be pink, and hides invalid repeating actions. (Before) &nbsp; (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Right Sidebar - Chat - Roll Templates */ /* Full Width 'D&amp;D 5E by Roll20' Templates */ div[class^="sheet-rolltemplate"], div &gt; div[class^="sheet-rolltemplate"] &gt; div[class^="sheet-container"], div.sheet-desc&nbsp; { width: 100% !important; max-width: 300px; margin-left: 0px; margin-right: auto; text-align: left } div[class^="sheet-rolltemplate"], div &gt; div[class^="sheet-rolltemplate-npcaction"] &gt; div[class^="sheet-container"], div &gt; div[class^="sheet-rolltemplate-spell"] &gt; div[class^="sheet-container"] { width: 95% !important; max-width: 300px; margin-left: 0px; margin-right: auto; } div[class^="sheet-rolltemplate"] &gt; div { background-size: 100% 100% !important; } div[class^="sheet-rolltemplate-spell"]&gt; div { margin-left: 0px !important; } /* Inline Links on OGL Roll Templates */ .textchatcontainer a[href] { background-color: transparent; padding: 0px; color: #ce0f69; display: inline-block; border: none; } .textchatcontainer .message { padding-right: 5px; } .sheet-rolltemplate-npc, .sheet-rolltemplate-npcaction .sheet-container, .sheet-rolltemplate-npcatk, .sheet-rolltemplate-npcdmg, .sheet-rolltemplate-traits { width: 95%; border: 1px solid; background-color: #ffffff; padding: 5px; } .sheet-rolltemplate-npcdmg { margin-top: 0px; } .sheet-rolltemplate-spell, .sheet-rolltemplate-spell .sheet-container { width: 100%; margin: 0px !important; } /* Invalid Repeating Actions */ /* 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. */ .textchatcontainer a[href*="$selected"] { color: #fff0; font-size: 0px; } div.message.error { display: none !important; } } ( Link back to Index )

Right Sidebar - Chat - D&amp;D 5E Concentration &amp; Purple School (Players) Highlights and flashes red any concentration spell. Also changes the color of the spell school type to purple to make it more readily visible. @-moz-document regexp("<a href="https://app.roll20.*.net/(editor|campaigns.*)/.*" rel="nofollow">https://app.roll20.*.net/(editor|campaigns.*)/.*</a>"), regexp("file:///.*/DnD/.*") { /* Right Sidebar - Chat - Concentration &amp; Purple School Type */ span[data-i18n="concentration"], #userscript-concentration { animation: concentrationBlinkingText 1.5s infinite; border: 1px solid #000; font-weight: bold; margin: 0px 1px 0px 1px; padding: 0px 2px 0px 2px; } @keyframes concentrationBlinkingText { 0% { color: #000; background-color: #c0000000; border: 1px solid #000;} 25% { color: #F00; background-color: #FFFF00; border: 1px solid #F00;} 50% { color: #F00; background-color: #FFFF00; border: 1px solid #F00;}&nbsp; 75% { color: #F00; background-color: #FFFF00; border: 1px solid #F00;} 100% { color: #000; background-color: #c0000000; border: 1px solid #000;} } span.sheet-level { color: #90f; } } ( Link back to Index )

'D&amp;D 5E by Roll20' Character Sheet - Optimize Layout (Players) I can't take credit for most of this, which I haven't adjusted since I found it elsewhere. The part that I did adjust was the PC/NPC toggle, to move it to the top of the page and retain its position on the PC page as well. (Updated 7/5/22 for changes to the 'D&amp;D 5E by Roll20' sheet.) (Updated again 9/19/23 for additional changes and adding the 'Vehicle' tabe (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* 5E Character Sheet&nbsp; */ /* Core Page and Spell Sheet */ /* Character Sheet Opacity */ .ui-dialog.dialog-collapsed { opacity: 1; background: DarkGray;&nbsp; &nbsp; &nbsp;max-width: 240px !important; max-height: 42px !important;&nbsp; padding: 1px; } .dialog-collapsed &gt; div &gt; .ui-dialog-title { color: Gainsboro; } /* CORE PAGE */ /* Makes description of equipment legible and enlarges edit box */ .charsheet .sheet-item .sheet-subitem .sheet-subtextarea { line-height: 13px; font-size: 11px; height: 96px; } /*Tightens Features and Traits?*/ .charsheet .sheet-col3 .sheet-textbox .sheet-display { padding: 0px 0px 5px 10px; margin-bottom: 0px !important; } /* makes edit and add buttons less obtrusive */ .charsheet .repcontrol .repcontrol_add:before, .charsheet .repcontrol .repcontrol_edit:after { background-color: #fff; border: 1px solid #fff; color: #bbb; padding: 0px; } /* SPELL PAGE */ /* Enlarges the word Cantrips on Spell Sheet */ .charsheet .sheet-cantrips span { font-size: 14px; line-height: 14px; } /*tightens list*/ .charsheet .sheet-spell { margin-bottom: 0px; background-color: #fff; border-bottom: 1px solid #ddd; ; } /*Tightens space between spell levels*/ .charsheet .sheet-spell-container { min-height: 30px; } .charsheet .sheet-spell .sheet-display button[type=roll].sheet-spellcard { width: min-content; border-bottom: 0px solid #fff; } .sheet-row,&nbsp; .charsheet .sheet-3colrow&nbsp; { display: inline-block !important; vertical-align:bottom !important; } .ui-dialog .charsheet .sheet-row .sheet-details{ display:block !important; } /* Fixes display of innate field*/ .charsheet .sheet-spells .sheet-innate { color: #666; display:inline !important; font-size: 9px; text-transform: uppercase; font-weight: bolder; margin-left: -3px !important; } /* Gets rid of comma*/ .charsheet .sheet-innate:before { content: ", "; color: #fff; } /* Changes Ritual tag to Green */ .charsheet span.sheet-spellritual { background-color: #019515; } /* Changes Concentration tag to Blue */ .charsheet span.sheet-spellconcentration { background-color: #015e95; } /* Fancy spell names*/ .charsheet .sheet-spell .sheet-display span.sheet-spellname { font-size: 16px; font-family: "Times New Roman", Times, serif; text-transform: capitalize; font-variant: small-caps; color: #7e2d40; font-weight: bolder; margin-right: 0px; } /* Changes Spell background to yellow in edit mode */ .charsheet .sheet-spell .sheet-wrapper .sheet-options-flag:checked ~ .sheet-options { display: inherit; background-color: #f9f6ca; padding: 5px; margin: 10px 5px 10px 5px; } /* Changes Spell background to parchment in display mode */ .charsheet .sheet-spell .sheet-details { background-image: url('<a href="https://i.imgur.com/vjL1blE.jpg" rel="nofollow">https://i.imgur.com/vjL1blE.jpg</a>'); /*defaults to blue if image link is broken*/ background-color: #eafbff; padding: 5px; display: grid !important; margin: 10px 5px 10px 5px; } /* Boldens spall name in display mode */ .charsheet .sheet-spell .sheet-details span[name="attr_spellname"] { font-weight: bolder; } /* TEMPORARY SECTION */ /* START Remove these after sheet is fixed on death saves*/ div.sheet-hdice-dsaves-container:nth-child(4) &gt; div:nth-child(2) &gt; button:nth-child(3) { /* margin-top: 6px; */ margin-top: 0px !important; } div.sheet-row-container:nth-child(1) { margin-top: 2px !important; } div.sheet-row-container:nth-child(2) { margin-top: 2px !important; } .charsheet .sheet-hdice-dsaves-container input[type=number] { padding-top: 0px !important; } .sheet-roll-hitdie &gt; select:nth-child(3) { font-size: 1px !important; width: 25px !important; } .charsheet .sheet-subcontainer .sheet-roll-hitdie button[type=roll]{ margin-left: 15px; } /* END Remove these after sheet is fixed on death saves*/ /* NPC Toggle Button */ .charsheet .npc_options div.row:nth-child(31), div.is-vehicle div.npc_options &gt; div.row:nth-child(15), .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) { position: absolute; transform: scale(1.3); border: 2px solid darkred; border-radius: 3px; padding: 1px 1px 1px 3px; height: 14px; line-height: 12px; width: 67px; } /* Remove Original Text*/ .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) &gt; span, .charsheet .npc_options div.row:nth-child(31) &gt; span, div.is-vehicle div.npc_options &gt; div.row:nth-child(15) &gt; span { display: none; } /* Adjust Placement on NPC Page */ .charsheet .npc_options div.row:nth-child(31) { top: -70px; left: 353px; } .charsheet .npc_options div.row:nth-child(31) &gt; select { position: relative; top:-6px; left: 0px; border-bottom: 0px; } /* Adjust Placement on Vehicle Page */ div.is-vehicle div.npc_options &gt; div.row:nth-child(15) { top: -70px; left: 353px; } div.is-vehicle div.npc_options &gt; div:nth-child(15) &gt; select { position: relative; top:-6px; left: 0px; border-bottom: 0px; } /* Adjust Placement on PC Page */ .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) { margin-left: 15px; } .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) &gt; select { position: relative; top: -1px; left: 4px; border-bottom: 0px; } /* Remove Blue Outline for Focus */ .charsheet .npc_options div.row:nth-child(31) &gt; select:focus-visible, div.is-vehicle div.npc_options &gt; div:nth-child(15) &gt; select:focus-visible, .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) &gt; select:focus-visible{ outline: none !important; } /* Color &amp; Style Input Button */ .charsheet .npc_options div.row:nth-child(31) &gt; select, div.is-vehicle div.npc_options &gt; div:nth-child(15) &gt; select, .charsheet div.general_options:nth-child(1) &gt; div:nth-child(2) &gt; select { color: darkred; font-weight: bold; font-size: 13px;} /* Moves NPC Toggle button when gear is selected on PC tab */ input[type=radio].tab-button.options:checked ~ .page.options &gt; div &gt; div &gt; div.general_options &gt; div.row:nth-child(2) { top: -219px; left: -165px; } /* Attribute &amp; Abilities Page */ /* Remove instructions from Abilities list */ div.abil.editing small.instructions { display: none !important; } } ( Link back to Index )

'D&amp;D 5E by Roll20' Character Sheet - Permanent NPC Toggle Button (GM) Makes the NPC Toggle Checkbox visible whenever the character sheet is on the 'Character Sheet' tab (instead of Bio &amp; Info or Attributes &amp; Abilities). Relies on the NPC Toggle section of the 5E Character Sheet (Players) Stylus code. (Updated 7/5/22 for changes to the 'D&amp;D 5E by Roll20' sheet.) (Updated 9/19/23 for additional changes and adding 'Vehicle' tab.) @-moz-document regexp("<a href="https://dapp.roll20.*.net/editor/.*" rel="nofollow">https://dapp.roll20.*.net/editor/.*</a>") { /* NPC Toggle Button */ /* Optional Code to keep NPC Toggle Button always visible */ /* Keep NPC Options invisible until gear is opened */ .licensecontainer .npc_toggle[value="1"] ~ .npc .npc_options-flag:not(:checked) ~ .npc_options &gt; div:not(:nth-child(31)) { display: none !important; } /* Keep NPC Button Always Visible on NPC Tab */ div.container.npc &gt; div &gt; div.npc_options, div.container.npc &gt; div &gt; div.npc_options &gt; div:nth-child(31) { display: block !important; } /* Keep NPC Button Always Visible on Vehicles Tab */ .licensecontainer .npc_toggle[value="1"] ~ .container.npc div.is-vehicle .npc_options-flag:not(:checked) ~ .npc_options &gt; div.row:nth-child(15) { display: block !important; } /* .page.options refers to PC tab gear icon */ /* Keep NPC Toggle visible when on PC tab and gear icon is not selected*/ div.page.options, input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body, input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3, input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3 &gt; div.general_options, input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3 &gt; div.general_options &gt; div.row:nth-child(2) { display: block !important; } /* Remove border that appears over 'D&amp;D' logo when NPC toggle button is moved */ input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3 &gt; div.general_options { border: none; } /* Keep NPC Toggle visible when on PC tab and gear icon is not selected*/ input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div:not(.body), input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div:not(col3), input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3 &gt; div:not(.general_options), input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div.body &gt; div.col.col3 &gt; div.general_options &gt; div:not(:nth-child(2)) { display: none !important; } /* Keep NPC Toggle visible when on PC tab and gear icon is not selected*/ input[type=radio].tab-button.options:not(:checked) ~ div.page.options { position: absolute; top: 0px; } /* Keep NPC Toggle visible when on PC tab and gear icon is not selected*/ input[type=radio].tab-button.options:not(:checked) ~ div.page.options &gt; div &gt; div &gt; div.general_options &gt; div:nth-child(2) { top: -78px; left: 338px; } /* Keep Setting Gear Visible all the time on NPC &amp; Vehicles Tab */ input.npc_options-flag ~ span { display: flex !important; } /* Fix Traits Edit Windows to open correctly */ div.licensecontainer.compendium-drop-target.monsters.vehicles &gt; div.container.npc &gt; div.is-npc &gt; div.row.actions.reaction &gt; div.repcontainer &gt; div.repitem &gt; div.trait &gt; div.npc_options &gt; div.row { display: block !important; } } ( Link back to Index )

VTT Page - Background Color (Players) Simply changes the background color (behind the map) to a very dark brown to make it easier on the eyes. Doesn't change anything if you use Dark Mode. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Background Color */ body.no-touch { background: none; background-color: #211; } } ( Link back to Index )

Campaign Page - Campaign Name (Players) Gives the campaign name a fancier appearance. @-moz-document regexp("<a href="https://app.roll20.*.net/campaigns/details/.*" rel="nofollow">https://app.roll20.*.net/campaigns/details/.*</a>") { /* Campaign Page - Campaign Name */ div.campaignname &gt; h1 { line-height: 2.5em; font-size: 1.8em !important; text-align: center; text-shadow: 2px 3px darkred; font-family: 'Lavishly Yours', cursive; background-color: lightgrey; } div.campaignname &gt; h1 &gt; span { font-size: 1.8em !important; color: #555;} div.campaignname &gt; h1&nbsp; { border: solid 5px #555; box-shadow: 3px 4px darkred; border-radius: 20px;} } ( Link back to Index )

Character Vault (Players) Resizes items in the character vault to make it easier to scan. (Updated 9/19/23 for changes with Dark Mode. Character Bio description was removed by Roll20.) (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/vault/characters" rel="nofollow">https://app.roll20.*.net/vault/characters</a>") { /* Character Vault */ .vaultchar { border: 1px solid #aaa; margin-top: 5px; border-radius: 5px; padding: 0.5em; max-height: 255px; text-overflow: clip; } .vaultchar p.char-name { font-size: 20px; background: #666; border-radius: 4px; padding: 0em 0.5em 0em; color: #fff } .char-info { max-height: 55%; text-overflow: clip; margin-top: 5px; } .char-images { max-height: 129px; padding-top: 0px; padding-bottom: 5px; min-width: 255px; } .char-images div.title { margin-bottom: 0px; } .char-bio { max-height: 129px; text-overflow: clip; overflow: auto; } .char-bio &gt; p &gt; span { color: var(--color-text) } .charmenu p { font-size: 12px; } .charmenu &gt; p &gt; span { color: var(--color-primary-text) } .char-tools .btn:not(.btn-primary) { padding: 0em; } label.choose { line-height: 1.8; margin-bottom: 0px; padding: 0em; } .char-tools .btn { padding: 0em; } .char-avatar img, .char-token img { overflow: scroll; max-height: 90px; } .char-avatar, .char-token { font-size: 12px; padding: 0em; margin: .25em 1em 0em; display: inline-block; } .char-avatar &gt; img , .char-token &gt; img { padding-top: 0px; } .col-xs-6 { width: 43%; } } ( Link back to Index )

API Scripts Page - Organize and Color (GM) Adds alternating color to script names to make them easier to read.&nbsp; 'Script Library' and 'New Script' in brown; disabled scripts in grey; active script in green; hovered in bright green.&nbsp; Removes unnecessary elements and reorganizes other buttons and dropdown menu. *Updated 9/14/22 With Light/Dark Mode versions* (Before) (After) @-moz-document regexp("<a href="https://app.roll20.*.net/campaigns/scripts/.*" rel="nofollow">https://app.roll20.*.net/campaigns/scripts/.*</a>") { /* API Scripts Page */ html[data-theme="light"] ul.nav-tabs { --primary-bg: Azure; --primary-border: var(--primary-text); --primary-text: SteelBlue; --secondary-bg: aliceblue; --secondary-border: var(--secondary-text); --secondary-text: RoyalBlue; --disabled-bg: snow; --disabled-border: lightgrey; --disabled-text: darkgrey; --scriptlibrary-bg: beige; --scriptlibrary-border: var(--scriptlibrary-text); --scriptlibrary-text: peru; --active-bg: honeydew; --active-border: var(--active-text); --active-text: green; --hover-bg: MintCream; --hover-border: var(--hover-text); --hover-text: LimeGreen; } html[data-theme="dark"] ul.nav-tabs { --primary-bg: SteelBlue; --primary-border: var(--primary-text); --primary-text: Azure; --secondary-bg: RoyalBlue; --secondary-border: var(--secondary-text); --secondary-text: aliceblue; --disabled-bg: darkgrey; --disabled-border: lightgrey; --disabled-text: snow; --scriptlibrary-bg: peru; --scriptlibrary-border: var(--scriptlibrary-text); --scriptlibrary-text: beige; --active-bg: green; --active-border: var(--active-text); --active-text: honeydew; --hover-bg: LimeGreen; --hover-border: var(--hover-text); --hover-text: MintCream; } /* Alternate color ideas&nbsp; &nbsp;--active-bg: mistyrose; &nbsp;--active-text: orangered; &nbsp;--active-bg: MintCream; &nbsp;--active-text: LimeGreen; &nbsp;--secondary-bg: var(--primary-bg); &nbsp;--secondary-border: var(--primary-border); &nbsp;--secondary-text: var(--primary-text); &nbsp;--secondary-bg: aliceblue; &nbsp;--secondary-border: var(--secondary-text); &nbsp;--secondary-text: RoyalBlue; */ /* Script List Color, Size, Background, Outline */ ul.nav.nav-tabs {font-size: 18px; padding-bottom: 15px;} ul.nav-tabs &gt; li {line-height: normal; display: inline-block;} ul.nav-tabs &gt; li &gt; a {display: inline-block; padding: 5px 5px 5px 5px; margin: 3px 2px; border-radius: 5px;} ul.nav-tabs &gt; li:nth-child(even):not(:first-child):not(:last-child) &gt; a:not([class="disabled"]) {background-color: var(--primary-bg); border: 1px solid; border-color: var(--primary-border); color: var(--primary-text);} ul.nav-tabs &gt; li:nth-child(odd):not(:first-child):not(:last-child) &gt; a:not([class="disabled"]) {background-color: var(--secondary-bg); border: 1px solid; border-color: var(--secondary-border); color: var(--secondary-text);} ul.nav-tabs &gt; li &gt; a.disabled {background-color: var(--disabled-bg); border: 1px solid; border-color: var(--disabled-border); color: var(--disabled-text);} ul.nav-tabs &gt; li:first-child &gt; a, ul.nav-tabs &gt; li:last-child &gt; a {background-color: var(--scriptlibrary-bg); border: 1px solid; border-color: var(--scriptlibrary-border); color: var(--scriptlibrary-text);} ul.nav-tabs &gt; li.active &gt; a {background-color: var(--active-bg) !important; border: 1px solid; border-color: var(--active-border) !important; border-radius: 5px; color: var(--active-text) !important;} ul.nav-tabs &gt; li:not([class="active"]) &gt; a:hover {background-color: var(--hover-bg) !important; border: 1px solid; border-color: var(--hover-border) !important; border-radius: 5px; color: var(--hover-text) !important;} /* Script Library Section */ div.alert.alert-danger {display: none;} #script-previews &gt; div &gt; p {display: none;} #script-previews &gt; div &gt; h3 {display: inline-block; vertical-align: top; margin-top: 11px; margin-bottom: 0px; margin-right: 10px;} #script-previews &gt; div &gt; button {float: left; vertical-align: bottom; position: relative; top: 3px; margin-right: 10px;} div.tab-content {margin-top: 5px;} #script-library &gt; div.script-container {position: relative; top: 5px; display: inline-block;} #script-previews {margin-top: 5px; float: left;} } ( Link back to Index )

yay a nnew thread! Suggest you link to the wiki page, it even have a few snippets created after the last thread: <a href="https://wiki.roll20.net/Stylus" rel="nofollow">https://wiki.roll20.net/Stylus</a>

Jarren said: Token Status Marker Menu - Hide Unused Status Markers &nbsp;(Players) This code simply hides all of the native status markers, which I don't use in my game. @-moz-document regexp("<a href="https://app.roll20.*.net/editor/.*" rel="nofollow">https://app.roll20.*.net/editor/.*</a>") { /* Token - Hide Unused Status Markers */ div[data-action-type=toggle_status_blue] { display: none !important; }&nbsp; div[data-action-type=toggle_status_red] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_dead] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_fishing-net] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_fluffy-wing] { display: none !important; } 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] { display: none !important; } div[data-action-type=toggle_status_aura] { display: none !important; } div[data-action-type=toggle_status_back-pain] { display: none !important; } 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_bolt-shield] { display: none !important; } div[data-action-type=toggle_status_broken-heart] { display: none !important; } div[data-action-type=toggle_status_cobweb] { display: none !important; } 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] { display: none !important; } 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] { display: none !important; } } ( Link back to Index ) I use Keith Curtis's Easy to Read Token Markers (Thanks Keith! Love the token markers!) however I'd like to trim down some markers that I don't use. The token markers names are: Name::Numbers The problem is the colons looks like the beginning of a pseudo-element to the browser so the following gets marked invalid and ignored. div[data-action-type=toggle_status_Dying::243507] { display: none !important; } In order to hide the token markers with colons in their IDs, use a '\' backslash to escape the colon in the marker name. div[data-action-type=toggle_status_Dying\:\:243507] { display: none !important; } This took me much longer to figure out than I'm willing to admit.

Is there a reason neither you nor Jarren just remove the default token markers from the game? I mean, if you don't intend to use them? Thanks for the token marker shout out, Scott!

keithcurtis said: Is there a reason neither you nor Jarren just remove the default token markers from the game? I mean, if you don't intend to use them? Thanks for the token marker shout out, Scott! I do remove the default set from the game. There are some markers in the custom set that I just don't use, for instance Dying or Broken. Those I just use Stylus to hide. You're welcome!

Ah, that makes sense. Since it's my own set, and not from the Marketplace, I just uploaded the ones I need.

You could go into your marker library, create a custom set, and then copy only the markers you want to use into it from any and all other sets that are available to you including the default.&nbsp; Then you wouldn't need to hide anything with stylus.

keithcurtis said: Is there a reason neither you nor Jarren just remove the default token markers from the game? I mean, if you don't intend to use them? Thanks for the token marker shout out, Scott! Yeah I remove them from my games as well, but using stylus means I don’t worry about them for when I create test games and so forth. It’s just one-time code so I don’t think about them anymore. :)&nbsp;