Show off your Style!

Note: This thread auto-closed. Here is an index of the major Stylus Threads: Show Off Your Style Show Off Your Style 2: The Stylening! Show off your Style 3: Third Time is the Charm! Show off your Style 4: A New Hope! Roll20 has a pretty clean interface, but there are often features that users find do not fit their expectations or preferences (buttons are too big/small, want to see more cards in their hand, etc.) Most of these features are controlled by CSS (Cascading Style Sheet) code in the app. The good news is, you can use your own CSS code to change the display to suit your needs. A lot of people use the Stylus extension ( Chrome ,&nbsp; Firefox ) to tweak their Roll20 interface. This extension intercepts the CSS before it reaches your display and tweaks it to suit, adding, removing or changing definitions. It's very harmless and can be turned on or off at need. The code is interpreted on your browser only. So any tweaks you make are seen only by you. If you want to share the changes with your group, you will need to send them the code for the style changes and they would have to install it locally. To install a style, first install the extension. Create a new style and give it a name. Place any code in the code block. You will probably want to limit it to URLs starting with " <a href="https://app.roll20.net/" rel="nofollow">https://app.roll20.net/</a> " Styles can be turned on or off as a group or singly on-the-fly. I though it would be fun for people to share some of the things they've worked out. Most of the styles on Styles.org are related to "Dark Mode" so I don't know if one more is needed here, but feel free to post what floats your boat. I'll start off with one I posted a long time ago in a recently closed suggestion thread (where it probably didn't belong, anyway) :) IMPORTANT NOTES AND UPDATES — &nbsp;Please refrain from posting links to Tampermonkey scripts or third party extensions that could be avenues to piracy or that add features. This is about CSS tweaks. — &nbsp;The "[Install]" links actually take you to userstyles.org, which was originally built to serve Styl ish . The site still lists Stylish in its iconography because of this. But if you have Stylus installed and click any of the links, they will install in Stylus instead.&nbsp; Stylish was abandoned by many folks after it was discovered that they were not being trustworthy with user data . Stylus was built to be an alternative.&nbsp; If you have installed Stylish, I would recommend you uninstall it first. —&nbsp; Later versions of&nbsp; Stylus have allowed syncing in the cloud. This means you can keep all of your styles up to date across multiple browsers and workspaces. It might also be a hedge against the Chrome bug that would occasionally wipe the entire Stylus DB on a browser upgrade. It's under Manage Your Styles. There's a button for it in Chrome and it's under Options in Firefox. The [install] button after each style will take you to a userstyles.org page that will allow you to one-click install the style. For the styles I've submitted, you can also go&nbsp; here to the master page . Index Tiny Tracker - keithcurtis [install] More Compact Macro Bar - keithcurtis [install] Bigger Card Hand &nbsp;- keithcurtis [install] Inline Links on OGL Roll Templates &nbsp;- keithcurtis [install] Hide Roll20 Interface &nbsp;- keithcurtis [install] Add Rows to Map Tab &nbsp;- keithcurtis [install] More Compact Token Action Toolbar - keithcurtis [install] 5e Style for Your Handouts - keithcurtis [install] Marketplace Read Tags and See Pictures - keithcurtis [install] Tiny Tracker The Turn Tracker can eat up a lot of screen real estate. Here's a style to make it a bit more compact. Before: After: And the Code #initiativewindow { padding: 1px 1px; overflow-x: auto } #initiativewindow ul li { padding: 0px; } #initiativewindow ul li { min-height: 15px } #initiativewindow ul li img { max-width: 20px; max-height: 18px; } #initiativewindow ul li span.initiative { font-size: 16px; padding: 0px; min-height: 12px } #initiativewindow ul li span.name { font-size: 12px; padding-top: 0px; padding-left: 4px; } #initiativewindow input { font-size: 12px; height: 12px; } .initiativedialog .ui-dialog-titlebar { padding: 1px 5px; font-size: 12px; background-color:black; } .initiativedialog .ui-dialog-title { margin-top: 1px; margin-bottom: 1px; padding: 0px; color:white; } .initiativedialog .ui-dialog-titlebar-close { top: 50%; width: 19px; margin: -30px 0 0 0; padding: 1px; height: 6px; font-size: 7px; line-height: 7.5px; color:white; background-color:white; } .initiativedialog .ui-dialog-titlebar-close span { display: block; margin: 1px; text-indent: 9999px } .initiativedialog .ui-dialog-buttonpane { border-width: 1px 0 0 0; margin: .05em 0 0 0; background-color: var(--dark-background, #f5f5f5); padding: 1px 12px 0px 1px; } .initiativedialog .ui-dialog-buttonpane button { margin: .05em .04em .05em 0; } .initiativedialog .ui-dialog-titlebar-close{ top:150%; height: 18px; } .initiativedialog .bigbuttonwithicons{ width:35px; } To be honest, that might be more code than is strictly necessary, but it works. :)

That's a nice change! I hope people have more tweaks to add.

More Compact Macro Bar Here's a great bit of code I got from Vince that makes the macro quick bar smaller, more compact and centered, with a deeper shadow, turning this: into this: Note that I use emojis in most of my macro quick bar names to make them even more compact. Here's the code: /*macro quickbar */ #macrobar { 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; } div.macrobox button.btn { &nbsp; &nbsp; padding: 0 4px 0 4px; &nbsp; &nbsp; font-size: 1.5rem; &nbsp; &nbsp; line-height: 1.8rem; &nbsp; &nbsp; margin: 0px 0 2px 0; } #macrobar_macros { &nbsp; white-space: normal !important; &nbsp; margin-left: 1% !important; &nbsp; margin-right: 1% !important; &nbsp; padding-bottom: 0px !important; } #macrobar .macrobox { &nbsp; &nbsp; margin: 1px 5px 1px 5px ; } #macrobar div.macrobox:hover, #macrobar div.macrobox.ui-sortable-helper { &nbsp; &nbsp; padding-right: 12px; &nbsp; &nbsp; margin-right: -7px; &nbsp; &nbsp; border-radius: 3px; &nbsp; &nbsp; background-color: #999; &nbsp; &nbsp; cursor: move; } Installation instructions in top post.

Bigger Card Hand If you need to see more cards then the 2 x 2 grid that Roll20 gives you, here is a CSS style that will expand that to 7 across. Just modify those instances of "700" in the code to adjust to your liking: #playerzone .deckhands .hand .handcontainer{ &nbsp; &nbsp; width: 700px !important; } .popover { &nbsp; &nbsp; &nbsp; &nbsp; max-width: 700px !important; } Installation instructions in top post.

Inline Links on OGL Roll Templates If you dislike the big pink buttons that are served up by the OGL roll templates, and would prefer inline links that are less jarring and take up considerably less room, try this style. It also widens the max width of a roll template to better fill the available room in the chat tab. Basically, it turns this into this: Here is the code: .textchatcontainer a[href] { &nbsp; &nbsp; background-color: transparent; &nbsp; &nbsp; padding: 0px; &nbsp; &nbsp; color: #ce0f69; &nbsp; &nbsp; display: inline-block; &nbsp; &nbsp; border: none; } .sheet-rolltemplate-npc, .sheet-rolltemplate-npcaction .sheet-container, .sheet-rolltemplate-npcatk, .sheet-rolltemplate-npcdmg, .sheet-rolltemplate-traits { &nbsp; &nbsp; width: 95%; &nbsp; &nbsp; border: 1px solid; &nbsp; &nbsp; background-color: #ffffff; &nbsp; &nbsp; padding: 5px; } Installation instructions in top post.

very nice. What are the green star symbols there and how do you make them?

They are just emojis. They will present differently on different platforms. For example, you can see all the versions of the "Eight Spoked Asterisk" ✳️, here . I tend to use them primarily on menus that only face me, for that reason.

Hi Keith. Do I just stick that code anywhere in my css or does it have to be placed in a certain position? Also, how do you left align the buttons like that? Regards

Hi Ray, this thread is for Stylus CSS tweaks, the OP should give you all the info and links you'll need to get started. Bear in mind that these are client side changes only, ALL players would need to have stylus and the appropriate code to mirror the display you'll see.

Ziechael said: Hi Ray, this thread is for Stylus CSS tweaks, the OP should give you all the info and links you'll need to get started. Bear in mind that these are client side changes only, ALL players would need to have stylus and the appropriate code to mirror the display you'll see. ahhh...thanks for that :)

Everything Ziechael said. As for the left aligning, that's the npcaction template. I did a survey of all of the built in OGL templates and chose that one because it is left aligned, has a description&nbsp; field and lets you use the rname field, which gives a better title bar. &amp;{template:npcaction} {{rname=Title Here}}} {{description=blah blah blah}}

Hide Roll20 Interface UPDATED FOR NEW USER INTERFACE 6-30-23 Edited to account for new zoom slider controls Sometimes you need to see just the map area. Maybe you are using the map area as a display on a tabletop, or maybe you have created a map on Roll20 using tiles and props, and you want to download with screenshots so that you can simplify it. In either case, the Interface items can get in the way. This tweak makes them all invisible, showing only the game area. Note that it does not hide the chat tab or the page menu, only removes the controls. This is to give greater flexibility. You can display or hide the chat bar normally before activating the style. You can remove any of these you wish to keep by taking them out of the style definition: #playerzone The avatars and player names #zoomclick The zoom slider #secondary-toolbar Token actions #sidebarcontrol The sidebar tab handle #page-toolbar .handle.showtip The page tab handle .ui-dialog The turn tracker (and ALL dialog boxes) #floatingtoolbar The left hand tool bar #macrobar .player The bottom macro bar #playerzone, #zoomclick, #secondary-toolbar, #master-toolbar, #vm_zoom_buttons, #sidebarcontrol, #page-toolbar .handle.showtip, .ui-dialog, #floatingtoolbar, #rightsidebar, #macrobar .player { display: none !important; } Installation instructions in top post.

This has been deprecated since the issue it was meant to fix... has been fixed. Fix OGL Template Sizing This is a very temporary style, but should give some relief to a problem of resizing the Chat Window causing OGL templates to scale improperly. This will cause all templates to span the available area. I fully expect the sheet to be updated soon, but this should tide folks over who are running into this issue. div.sheet-rolltemplate-simple div.sheet-container, div.sheet-rolltemplate-atk div.sheet-container, div.sheet-rolltemplate-atkdmg div.sheet-container.sheet-atk, div.sheet-rolltemplate-dmg div.sheet-atk, div.sheet-rolltemplate-dmg div.sheet-container, div.sheet-rolltemplate-atkdmg div.sheet-container.sheet-damagetemplate, div.sheet-rolltemplate-atk div.sheet-desc, div.sheet-rolltemplate-atkdmg div.sheet-desc, div.sheet-rolltemplate-dmg div.sheet-desc, div.sheet-rolltemplate-desc div.sheet-desc { &nbsp; &nbsp; background-size: 100% 100%; }

Add Rows to Map Tab I thought this one was in here already, but it addresses some limitations to the map tab, namely dealing with many maps. This tweak will cause your page tab have multiple lines. The following code will increase it to three lines. It's a bit finicky to move pages, but the ribbon moves quite easily. Just move your cursor over the page you want to get to, you will see the page highlight, even though the flag is on the original row. Just release. the flag will move to and display on the correct page. Click on the gif below to see it animated. #page-toolbar { &nbsp; &nbsp; height: 270px; } #page-toolbar .container { &nbsp; &nbsp; height: 270px; &nbsp; &nbsp; white-space: normal } #page-toolbar .height { &nbsp; &nbsp; height: 270px!important } This will cause two rows to show on the page menu, reducing the need for scrolling. For every multiple of 130 you use to replace the "270" in that code, you will add another row. Installation instructions in top post.

More Compact Token Action ToolBar Note: to make this one work properly, be sure to set the scope of this style to run on the regexp: .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|)) ... instead of the regular URL starting with " <a href="https://app.roll20.net/" rel="nofollow">https://app.roll20.net/</a> ". Otherwise it will affect post editing buttons on the forums. (If you don't mind this behavior, then scope it normally—it shouldn't hurt anything.) This one is a companion to the Compact Macro Bar style above. It makes most of the same style changes in order to make the bar more compact, changing this: into this: #secondary-toolbar .tokenactions .btn, .btn.btn-default { &nbsp; &nbsp; padding: 0px 3px 0px 3px; &nbsp; &nbsp; margin-top: 2px; &nbsp; &nbsp; margin-bottom: 0px; &nbsp; &nbsp; margin-right: 1px; } #secondary-toolbar {&nbsp; background-color: rgba(0, 0, 0, 0.44) !important; } Installation instructions in top post.

5e Style for Your Handouts I admit this one is a little silly. After all, unless you share the style with your players, you're the only one who will see it. But if you find the default styles of Roll20 a little... pedestrian, this style will turn them into a close approximation of an official book. I haven't really done a lot of work on this, and for all I know it restyles something else important. But hey, here it is. This code: p, body .content.note-editor.gmnotes, .content.note-editor.notes { &nbsp; &nbsp; &nbsp; &nbsp; font-family: Georgia; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 1.5rem; } h1, h2, h3 { &nbsp; &nbsp; font-family: Mrs Eaves !important; &nbsp; &nbsp; color: #58170D; &nbsp; &nbsp; font-weight: bolder; &nbsp; &nbsp; font-variant: small-caps; &nbsp; &nbsp; text-transform: capitalize; } blockquote { &nbsp; &nbsp; box-sizing: border-box; &nbsp; &nbsp; margin-bottom: 1em; &nbsp; &nbsp; margin-top: 1em; &nbsp; &nbsp; padding: 5px 10px; &nbsp; &nbsp; background-color: #e0e5c1; &nbsp; &nbsp; border-left: 0px;&nbsp; &nbsp; &nbsp; border-style: solid; &nbsp; &nbsp; border-width: 1px; &nbsp; &nbsp; box-shadow: 1px 4px 14px #888; } h1 { &nbsp; &nbsp; font-size: 4rem !important; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 1em; } h2 { &nbsp; &nbsp; font-size: 3rem !important; } h3 { &nbsp; &nbsp; font-family: sans-serif; &nbsp; &nbsp; font-variant: small-caps; &nbsp; &nbsp; font-size: 2rem; &nbsp; &nbsp; text-transform: capitalize; &nbsp; &nbsp; color: #58170D; &nbsp; &nbsp; margin: 10px 0px 1px 0px; border-bottom: 1px solid #58170D; } With a scope of URLs matching the regxp: .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|))$ Will turn this: Into this: Installation instructions in top post.

You're doing great work with these :)

keithcurtis said: More Compact Token Action ToolBar #secondary-toolbar .tokenactions .btn, .btn.btn-default { &nbsp; &nbsp; padding: 0px 3px 0px 3px; &nbsp; &nbsp; margin-top: 2px; &nbsp; &nbsp; margin-bottom: 0px; &nbsp; &nbsp; margin-right: 1px; } #secondary-toolbar {&nbsp; background-color: rgba(0, 0, 0, 0.44) !important; } There's a bracket running away of your code! Catch it before it's too late! This is great, I'm trying all of them. Now I need to learn some CSS to play around...

Fixed. Thanks!

Funny that you deem the 5e Style for Handouts "silly", whereas I think it's one of--if not the --best additions to the Roll20 interface, as far as aesthetics are concerned. This is precisely what I've been banging the drum about since I became a member.&nbsp; Great job&nbsp;&nbsp; keithcurtis . And thanks so much for this one.

It should work with most modules, too. It works with Sunless Citadel, which I'm running, but not Master's Vault. I suspect that style sheets have morphed over the years.

Interesting. It '5e-d' my Stylus style. But it needed a face-lift anyway. Small price to pay for the aesthetic improvement it has made. I even entered&nbsp; URLs matching the regxp; .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|))$.

I can't get the Stylus menu to behave like that. I do notice that it changes the styling on some of the tabs, like the settings tab. There's not much I can do about that—it seems they use the same CSS definitions as handouts. That's kind of why I dismissed it as "silly". It's a little scattershot in what it affects.

make sure not to have the ; &nbsp;&nbsp; Just: &nbsp; &nbsp; &nbsp; .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|))$ I Had the same issue&nbsp;

Thanks for pointing that out. I have edited to make it a little clearer.

Kilter said: make sure not to have the ; &nbsp;&nbsp; Just: &nbsp; &nbsp; &nbsp; .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|))$ I Had the same issue&nbsp; Mine is entered correctly (on Stylus I mean) and basically every web site I visit is in D&amp;D 5e style but I don't care. I'm keeping it. I think it's cool.

Not too long ago I started seeing this in some of the menus. I am using keithcurtis' disappearing buttons and, as you can see from the below example, one of the items is boxed. Any idea of what could be causing this issue? And for extra credit, is there a way to space out the spells? They're so close as to be one long word. These are Power Cards, so the latter question I can move to a PC Topic. &nbsp;

Without knowing more about how Powercards styles things, I wouldn't know where to start. I suspect the a[href] could be limited in scope to specific templates, but I have no way of testing.

keithcurtis said: Without knowing more about how Powercards styles things, I wouldn't know where to start. I suspect the a[href] could be limited in scope to specific templates, but I have no way of testing. I'm getting better at working with Power Cards, and I think it has to do with the padding or such. But the one spell name being boxed has got me stumped. But being that the boxes appear in the same spot for each characters' spell list, the problem should jump out at me from the code. It's in there, I just am not looking forward to squinting for a few hours lol.

You can right-click and "Inspect" the erroneous button and compare it to a correct one. You might discover that it is being tagged differently by PowerCards.

Marketplace Read Tags and See Pictures This one came about as I was looking for a tavern map. The set I was looking at had whole city blocks where tavern was in the tag, but not the title. Unfortunately the tags only display 1 line, so doing a Cmd/Ctrl-F to find which items had a tavern on them wasn't helping—if the tag doesn't display, I can't tell where it is highlighted. Also, the titles obscure the bottom half of the preview image, so I couldn't always quickly see what I was looking for. This style causes all tags to display, and starts the title just below the preview image, so nothing is obscured. This does have the effect of making the page taller, so that fewer items display in the window at once, but give and take. Here are some screen shots of before and after: And here is the code: The first block tightens up the tags to take less vertical room. The second block increases the vertical size of each item, the third moves the title block down so that its top lines up with the bottom of the preview image. .marketplacelistingitem .desc .subdesc p { &nbsp; &nbsp; font-size: 10px; &nbsp; &nbsp; line-height: 10px; &nbsp; &nbsp; white-space: normal; } .marketplacelistingitem { &nbsp; &nbsp; width: 165px; &nbsp; &nbsp; height: 265px; } .marketplacebrowseitem .desc, .marketplacelistingitem .desc { &nbsp; &nbsp; top: 165px; } Installation instructions in top post.