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

Show off your Style!

1550179470

Edited 1575387348
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Note: This thread auto-closed. There is a continuation of it here , with links back to all of the styles below, as well as many, many new ones. Roll20 has a pretty clean interface, but there are often features that users find do not fit their expectations or preferences (buttons are too big/small, want to see more cards in their hand, etc.) Most of these features are controlled by CSS (Cascading Style Sheet) code in the app. The good news is, you can use your own CSS code to change the display to suit your needs. A lot of people use the Stylus extension ( Chrome ,&nbsp; Firefox ) to tweak their Roll20 interface. This extension intercepts the CSS before it reaches your display and tweaks it to suit, adding, removing or changing definitions. It's very harmless and can be turned on or off at need. The code is interpreted on your browser only. So any tweaks you make are seen only by you. If you want to share the changes with your group, you will need to send them the code for the style changes and they would have to install it locally. To install a style, first install the extension. Create a new style and give it a name. Place any code in the code block. You will probably want to limit it to URLs starting with " <a href="https://app.roll20.net/" rel="nofollow">https://app.roll20.net/</a> " Styles can be turned on or off as a group or singly on-the-fly. I though it would be fun for people to share some of the things they've worked out. Most of the styles on Styles.org are related to "Dark Mode" so I don't know if one more is needed here, but feel free to post what floats your boat. I'll start off with one I posted a long time ago in a recently closed suggestion thread (where it probably didn't belong, anyway) :) Note: Please refrain from posting links to Tampermonkey scripts or third party extensions that could be avenues to piracy or that add features. This is about CSS tweaks. The [install] button after each style will take you to a userstyles.org page that will allow you to one-click install the style. For the styles I've submitted, you can also go&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 { &nbsp;&nbsp;&nbsp; padding: 1px 1px; &nbsp;&nbsp;&nbsp; overflow-x: auto } #initiativewindow ul li { &nbsp;&nbsp;&nbsp; padding: 1px; } #initiativewindow ul li { &nbsp;&nbsp;&nbsp; min-height: 15px } #initiativewindow ul li img { &nbsp;&nbsp;&nbsp; max-width: 20px; &nbsp;&nbsp;&nbsp; max-height: 18px; } #initiativewindow ul li span.initiative { &nbsp;&nbsp;&nbsp; font-size: 18px; &nbsp;&nbsp;&nbsp; padding: 1px; &nbsp;&nbsp;&nbsp; min-height: 12px } #initiativewindow ul li span.name { &nbsp;&nbsp;&nbsp; font-size: 14px; &nbsp;&nbsp;&nbsp; padding-top: 1px } #initiativewindow input { &nbsp;&nbsp;&nbsp; font-size: 12px; &nbsp;&nbsp;&nbsp; height: 12px; } .ui-dialog-titlebar { &nbsp;&nbsp;&nbsp; padding: 1px 5px; &nbsp;&nbsp;&nbsp; font-size: 8px; } .ui-dialog .ui-dialog-title { &nbsp;&nbsp;&nbsp; margin-top: 1px; &nbsp;&nbsp;&nbsp; margin-bottom: 1px; &nbsp;&nbsp;&nbsp; padding: 1px } .ui-dialog .ui-dialog-titlebar-close { &nbsp;&nbsp;&nbsp; top: 50%; &nbsp;&nbsp;&nbsp; width: 19px; &nbsp;&nbsp;&nbsp; margin: -10px 0 0 0; &nbsp;&nbsp;&nbsp; padding: 1px; &nbsp;&nbsp;&nbsp; height: 6px; &nbsp;&nbsp;&nbsp; font-size: 7px; &nbsp;&nbsp;&nbsp; line-height: 7.5px; } .ui-dialog .ui-dialog-titlebar-close span { &nbsp;&nbsp;&nbsp; display: block; &nbsp;&nbsp;&nbsp; margin: 1px; &nbsp;&nbsp;&nbsp; text-indent: 9999px } .ui-dialog .ui-dialog-buttonpane { &nbsp;&nbsp;&nbsp; border-width: 1px 0 0 0; &nbsp;&nbsp;&nbsp; margin: .05em 0 0 0; &nbsp;&nbsp;&nbsp; background-color: #f5f5f5; &nbsp;&nbsp;&nbsp; padding: 1px 10px 1px; } .ui-dialog .ui-dialog-buttonpane button { &nbsp;&nbsp;&nbsp; margin: .05em .04em .05em 0; } To be honest, that might be more code than is strictly necessary, but it works. :)
1550278090
GiGs
Pro
Sheet Author
API Scripter
That's a nice change! I hope people have more tweaks to add.
1550281027

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

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

Edited 1566691592
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1557964717
GiGs
Pro
Sheet Author
API Scripter
very nice. What are the green star symbols there and how do you make them?
1557965100
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1558428881
Ray
Pro
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
1558429596
Ziechael
Forum Champion
Sheet Author
API Scripter
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.
1558432120
Ray
Pro
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 :)
1558445087
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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}}
1560014168

Edited 1579800435
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hide Roll20 Interface 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, #zoomslider, #secondary-toolbar, #sidebarcontrol, #page-toolbar .handle.showtip, .ui-dialog, #floatingtoolbar, #macrobar .player { display: none !important; } Installation instructions in top post.
1561165869

Edited 1564622845
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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%; }
1562687562

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

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

Edited 1565887368
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1564464623
GiGs
Pro
Sheet Author
API Scripter
You're doing great work with these :)
1564479181
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...
1564496850
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Fixed. Thanks!
1564519042
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.
1564524631
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1564578669
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.*|))$.
1564584399
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1564584999
make sure not to have the ; &nbsp;&nbsp; Just: &nbsp; &nbsp; &nbsp; .*:\/\/((app\.|)roll20\.net([\/]?|\/editor.*|))$ I Had the same issue&nbsp;
1564588494
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Thanks for pointing that out. I have edited to make it a little clearer.
1564620306

Edited 1564620760
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.
1564621264

Edited 1564621345
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;
1564623001
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1564624469
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.
1564672345
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.
1565887197
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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.