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 .
×
Create a free account

Show off Your Style 3: Third Time is the Charm

1612726393

Edited 1680186405
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
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. EDIT: Stylish now supports 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 Show off Your Style! Tiny Tracker &nbsp;- keithcurtis&nbsp; [install] More Compact Macro Bar &nbsp;- keithcurtis&nbsp; [install] Bigger Card Hand &nbsp;- keithcurtis&nbsp; [install] Inline Links on OGL Roll Templates &nbsp;- keithcurtis&nbsp; [install] Hide Roll20 Interface &nbsp;- keithcurtis&nbsp; [install] Add Rows to Map Tab &nbsp;- keithcurtis&nbsp; [install] More Compact Token Action Toolbar &nbsp;- keithcurtis&nbsp; [install] 5e Style for Your Handouts &nbsp;- keithcurtis&nbsp; [install] Marketplace Read Tags and See Pictures &nbsp;- keithcurtis&nbsp; [install] Show Off Your Style 2: The Stylening! Neater Character Vault &nbsp;- keithcurtis&nbsp; [install] Roll20 Site: Dark Red Mode &nbsp;- Andreas J. Compact Editor for Sheet Authors &nbsp;- Vince Dark Mode for Roll20 &nbsp;- Vince Edit Status Icon Menu &nbsp;- Mike deBoston&nbsp; [install] Streamline Turn Order Settings (For Savage Worlds) &nbsp;- Mike deBoston&nbsp; [install] Macro Editing Window Tweak &nbsp;- Mike deBoston&nbsp; [install] Sheet Editor WYSIWYG Editor Style &nbsp;- Scott C Deleting Cards Without Scrolling &nbsp;- Mike DeBoston&nbsp; [install] Lock Turn Tracker Position &nbsp;- Mike DeBoston&nbsp; [install] Change Button Colors on Token Action Toolbar &nbsp;- Mike deBoston&nbsp; [install] Hide Error Messages in Chat &nbsp;- Mike deBoston -&nbsp; [install] Default Roll Template Enhancement&nbsp; - keithcurtis -&nbsp; [install] Tighter Sidebar Lists &nbsp;- keithcurtis -&nbsp; [install] Pathfinder 2e - Pseudo Grayscale &nbsp;- Mik Holmes Query Input Fits to Popup &nbsp;- Noon Show Time Stamps in Chat Archive &nbsp;- Noon (by way of&nbsp; forum post )&nbsp; [Install] Tweaks for D&amp;D 5e by Roll20 (OGL) &nbsp;sheet - keithcurtis&nbsp; [Install] Talk To Myself banner &nbsp;- keithcurtis&nbsp; [Install] Zoom Slider Tweaks &nbsp;- keithcurtis&nbsp; [Install] Correctif pour D&amp;D 5E by Roll20 &nbsp;- Ryuh Dragoon (translated sheet fix)&nbsp; [Install] Sheet Sandbox &amp; Game Settings Button Mover &nbsp;- Scott C. API Scripts Button Mover &nbsp;- Scott C. Hide Toolbar Buttons &nbsp;- keithcurtis&nbsp; [Install] Dark Mode (esp. for&nbsp;D&amp;D 5th Edition by Roll20 Sheet) &nbsp;- Kirill S.&nbsp; [Source Code] Hide Broken Aura Tool-Tips When Editing Forum Posts &nbsp;- The Aaron Tweaks to the Radial Token Menu and Token Markers &nbsp;- Question is posed with this thread and variations on the theme continue for at least two pages. This one cannot be directly linked as the styles diversify and branch too much. Read through and choose which you like. Much thanks to Kirill S. for the base code. Adding Labels to Token Marker Menu &nbsp;- Andrew&nbsp; [Install] Horizontal Toolbar &nbsp;- Andrew&nbsp; [Install] Show File Size of Recently Uploaded Assets in Art Library &nbsp;- Andrew&nbsp; [Install] &nbsp; *note. This style is included in Tighter Sidebar Lists, above. Horizontal Page Menu &nbsp;- Andrew&nbsp; (Better solution than Add Rows to Map Tab from the original thread.) "Spoiler Tags" for salmon error messages &nbsp;- Oosh Word Wraps in Code Boxes &nbsp;- Oosh Blades in the Dark Sheet Tweaks &nbsp;- Nik G Blue Dice on /r Rolls and Inline Tooltips &nbsp;- Oosh Colorblind/Custom Color Helper &nbsp;- Oosh Responsive Page Toolbar &nbsp;- Scott C Styling Token Action Buttons &nbsp;- Oosh This Thread Larger Default Input/Select Boxes On Macro Prompts &nbsp;- Liam Larger Preview window for Rollable Tokens - Jarren
1612726522

Edited 1612726843
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I renewed the thread because I just noticed that Stylus has (finally) 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.
1612727644

Edited 1612727815
mrianmerry
Sheet Author
Keith, I just edited your Talk to Myself banner style, to prevent the size increase to the text input area that makes it hard to read the last line of text in the chat log. Before:&nbsp; After:&nbsp; No more having to send "asdf" &nbsp;messages to continue being able to read what I've already put in the log! #textchat-input { border-top: 0; padding-bottom: 0px; padding-top: 0px; } It also does this when not &nbsp;using Talk to Myself, but I think the loss of the border separating the input from the log is worthwhile, especially as the default log appearance has a blue background serving as a visual separation, anyway!&nbsp;
Thanks for renewing the thread, keith! Question about your Tweaks for D&amp;D 5e by Roll20 (OGL) style: If I remembered correctly, it used to fix the Hit Dice section to prevent the Hit Dice size from being hidden as it currently is on the sheet. Lately it's still hidden when I have the style active tho, did you remove the tweak? And if so, would you mind sharing a version that still has it? Without the style With the style
1612865448

Edited 1612865505
Oosh
Sheet Author
API Scripter
This seems to look about right on mine: .charsheet .sheet-subcontainer .sheet-roll-hitdie select { width:25%; } Or you can set it to width: inital, which is how it gets set for D10 and D12.... it looks a little wide for a single digit die on my screen though. edit - and awesome work as always, Keith, keeping the Style alive!
1613749170

Edited 1613749389
Liam
Pro
One thing that always bugged me was how stupidly small the input/select boxes are by default on the macro prompts - you can barely even see what you're typing most of the time - so I just made them a little bigger. &nbsp; Before: After: Now you can see what you're typing a bit better (though it still doesn't handle linebreaks because it's not a full textarea). The CSS to apply as a userstyle is below. I've not noticed it break any other popup styles, but it's possible it might due to the lack of specific classes to select in the markup. .ui-dialog.ui-widget *:not(label) &gt; input, .ui-dialog.ui-widget *:not(label) &gt; select { width: auto !important; margin-left: 0 !important; } .ui-dialog.ui-widget &gt; *:not(label) &gt; p { display: flex; flex-direction: column; } .ui-dialog.ui-widget &gt; *:not(label) &gt; p &gt; *+* { margin-top: 1em; }
I've been trying to increase the size of the text editing area when editing a handout.&nbsp; There is a resize handle at the bottom of the Description &amp; Notes section and the GM Notes section, but the maximum height you can resize this too seems to be 300px. I've tried creating many Stylus recipes but haven't quite found the right combination to make this text editor area increasable beyond 300px tall -- say to 600px.&nbsp; It seems to me like the following should work but it doesn't: .note-editable { &nbsp; &nbsp; max-height: 600px; } Any advice?
1614022837
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Try messing around with the !important keyword I got some success with: .note-editable { &nbsp; &nbsp; max-height: 600px !important; &nbsp; &nbsp; height: 600px !important; } But nothing quite right.
Thanks Keith!&nbsp; Adding the !important is indeed not quite right, but it's close enough for my needs.&nbsp; This makes editing large handouts much more comfortable.&nbsp; I appreciate it!
1614501256

Edited 1614503333
Hello, sorry if this is something that was explained earlier, I know a DM can move and resize the token bars (health etc.) within roll20's options, but I've been trying to find a way to do so with Stylus and hopefully achieve more customization than is offered (resizing them even more, and moving them in a more drastic way.) Is there a way that I could find the "attribute" to target with stylus or would it even be possible? Apologies as I'm a bit of a noob, but thanks for any help!
1614529330
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
This is probably the section you are looking for. It goes on for several pages: Tweaks to the Radial Token Menu and Token Markers &nbsp;- Question is posed with this thread and variations on the theme continue for at least two pages. This one cannot be directly linked as the styles diversify and branch too much. Read through and choose which you like. Much thanks to Kirill S. for the base code.
Does anyone have any suggestions for sharing your Stylus code with players?&nbsp; I have my players set up to use Stylus, but some of them are not as tech savvy, so I'm hoping there's a 'one-click' approach if I do some upfront work (using Github or UserStyles or anything like that) so they have an easier time getting updates from me. I basically took all the Styles I wrote that apply to my players and combined them into a single style for them to import.&nbsp; But when I make updates, all of my Styles are separated by function, so I don't want to have to recreate the large master player copy each time, and it would be better if they could just click on an 'update style' button within Stylus.&nbsp; Is anything like that possible? I see there's a 'Get Styles' button at the bottom of the Stylus page, but that just links to a UserStyles.org archive and it doesn't look like I can add anything new there.
1615000329
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
If you export your styles (there's an Export button), it creates a copy of all of your styles in one single file. You can just email that to your plays and have them import once they have the extension installed. I did it with all of my players, and I don't think yours could possibly be as technologically challenged as mine. At least, I hope not.
Thanks for the idea -- I did something similar, but the issue is the styles I use as a DM are slightly different than what I use for my players -- I remove more buttons that they don't need but that I use as DM, or if I want to use the Blind Roll &nbsp;trick, which means each player needs a slightly different Stylus style.&nbsp;&nbsp; Looking at Stylus I just had a thought - does the Export feature only export the currently filtered styles? E.g. if I used the checkbox for 'Only enabled styles' or labeled my styles with a 'PC' versus 'GM' tag, would I be able to filter them and then create a backup that way? I think that would be a much more simplified approach to a manual update if there's no way to automate it any more.
1615074975
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I... think so? I don't remember sending my players every single style.
1615076774

Edited 1615308025
I just tested it out and it appears possible to export all styles as a .json file (when I reimported it said it was skipping all 32 that I have because they are already there).&nbsp;&nbsp; But I've been playing around with&nbsp; <a href="https://stylebase.cc/" rel="nofollow">https://stylebase.cc/</a> &nbsp;as a repository and it looks like it may work for what I need.&nbsp; Still have to upload to Github, make sure the file is set up correctly, and then add to Stylebase (and it looks like that means it'll be public), but it seems like it's possible for me to update the file on Stylebase and all my players have to do is click on the 'Check for Update' button in Stylus once they have it installed. I'm still playing with it, but once I get it figured out I'll post a quick rundown of what I did so if anyone else is interested they can follow suit.&nbsp; And again, quite a bit of upfront work on the part of the person who is creating the styles (me), so it may not be what everyone wants to do.
1615303700
Gold
Forum Champion
Fascinating thread! I hope to try more of these, including the idea of maybe sending the Styles to the Players and asking them to install (wish me luck).
1615304202
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
If I could do it, you can. Of course, I think I had to walk them through it on a Skype call....
1618238114

Edited 1618251996
Edit: This is the best I could come up with in the moment to at least upsize the default smallest size thumbnails to be the largest they can be for the size of the default window. /* Picture size */ .sidechoices &gt; div.sidechoice &gt; img { &nbsp; &nbsp; min-width: 111px !important; &nbsp; &nbsp; min-height: 111px !important; } Larger Rollable Token previews: /* Picture size */ .sidechoices &gt; div.sidechoice &gt; img { min-width: 150px !important; min-height: 150px !important; max-width: 150px !important; max-height: 150px !important; } /* Picture Box */ div.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable.ui-dialog-buttons &gt; div.ui-dialog-content.ui-widget-content { min-height: 180px !important; } Before:&nbsp; After: