Show Off Your Style 2: The Stylening!

#radial-menu { --color-text-primary: #fff; --color-bg-dark: #1c1d28; --color-text-disabled: #888994; --color-element-bg: #eaeaea; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; } #radial-menu .button { background: var(--color-element-bg) !important; border: 0px; } #radial-menu .button.button-1 { border-radius: 0px 0px 25px 25px; } #radial-menu .button.button-2 { border-radius: 25px 25px 0px 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { box-shadow: 0px 0px 5px var(--color-text-disabled); top: 150px !important; left: -60px; } #radial-menu .button.button-2 { top: 111px !important; } #radial-menu .button.button-1 { top: 33px; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: -60px; } #radial-menu .button.button-3 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-green), inset 0px 0px 10px var(--color-green), inset 0px 0px 15px var(--color-green) !important; top: 15px; } #radial-menu .button.button-4 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-blue), inset 0px 0px 10px var(--color-blue), inset 0px 0px 15px var(--color-blue) !important; top: 60px; z-index: 1; } #radial-menu .button.button-5 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-red), inset 0px 0px 10px var(--color-red), inset 0px 0px 15px var(--color-red) !important; top: -30px; z-index: 1; } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner { margin-top: 2px; } #radial-menu .button div.inner span { font-size: 24px; } #radial-menu .markermenu { background: var(--color-element-bg) !important; box-shadow: 0px 0px 5px var(--color-text-disabled); } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .popupvalue { position: absolute; top: 5px; left: 45px; width: 55px; height: 30px; z-index: 1005 } #radial-menu .popupvalue input { width: 100%; font-size: 16px } #radial-menu { position: fixed; top: 380px !important; left: 80px !important; } #radial-menu .markermenu.open { width: 268px; height: 265px; border-radius: 15px; } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .markermenu .markericon.active, #radial-menu .markermenu .markercolor.active { outline: 2px dashed var(--color-yellow); outline-offset: -2px; border: 0px; background-color: var(--color-yellow); border-radius: 5px; } #radial-menu .markermenu .markercolor.dead { top: -2px; } #radial-menu .button.button-1:after { position: relative; content: ""; font-size: 24px; z-index: 9999 !important; top: -138px; left: -19px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; } #radial-menu .button.button-2:after { position: relative; content: "❤️"; font-size: 24px; z-index: -1 !important; top: -138px; left: -19px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; } #radial-menu .button.button-3:after { position: relative; content: "️"; font-size: 24px; z-index: 9999 !important; top: -90px; left: -15px; border-radius: 25px 25px 25px 25px; padding: 3px; text-shadow: 0px 0px 2px #000, 0px 0px 5px #000; color: white; } That is what i'm talking about.  It is your code with shadows and z-indexes.

keithcurtis said: Andrew said: Thanks! (I found I was putting numbers in the wrong circles otherwise... *facepalm* ) Then try this! [...] Sorry, I meant that I was confusing myself when editing a token alongside the radial menu, which was why I reordered the bubbles vertically in my version. The emojis are an interesting idea though, I might have a play around with that too. Thanks both!

Andrew said: I found this <a href="https://app.roll20.net/forum/permalink/7855258/" rel="nofollow">https://app.roll20.net/forum/permalink/7855258/</a> was messing up the height of the macro bar. Without: With: This can be fixed by adding ".dialog" into the selectors: div[data-macroid].dialog { height: 400px !important; } div[data-macroid].dialog textarea.macro { height: 75px; } Haha, this is what I also saw. Thanks for the fix, I’ll have a go at updating my own installation with this as well.&nbsp;

Thanks Kirill! I think I likely needed the !important on the z-index. Overlapping like that is much nicer.

Ian said: Haha, this is what I also saw. Thanks for the fix, I’ll have a go at updating my own installation with this as well. Heh, just saw your original post, hope it helps :)

It occurred to me that the problems with the vertical spacing of the static token menu could be avoided if the main toolbar was horizontal, so I made it horizontal, which I think I prefer regardless! Click the smaller image for a GIF demo (cropped for file size - the menus don't actually get cut off!). This style can be installed from here: <a href="https://github.com/code-shenanigans/userstyles/blob/master/roll20/horizontal-toolbar.user.css" rel="nofollow">https://github.com/code-shenanigans/userstyles/blob/master/roll20/horizontal-toolbar.user.css</a> Edit: Fixed issue with the "Hide Areas" button display.

I also have (revised) version of the static token menu installed too which is designed to work with the above horizontal toolbar style. It looks like this: The style for repositioning the menu is separate and can be installed from here:&nbsp; <a href="https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/static-token-menu.user.css" rel="nofollow">https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/static-token-menu.user.css</a> This one requires the horizontal menu above, or (without adjustment) it will overlap with the default menu. The horizontal menu does not require this style, however.

That is very clever thinking, and that looks great! I’ll definitely be installing it&nbsp;

I've also made a style for adding labels to token markers. Before:&nbsp; After:&nbsp; I developed it with my version of the static token menu enabled, so it may look a tiny bit better in that context: The labels are the "title" attributes for the markers, i.e. they're the same text as the tooltips, just clipped. For reference, the tooltips show whatever the token markers have been named in the game's token marker sets, so the labels (and tooltips) can effectively be changed by (GMs) renaming the markers. This style can be installed from here: <a href="https://github.com/code-shenanigans/userstyles/raw/master/roll20/token-marker-labels.user.css" rel="nofollow">https://github.com/code-shenanigans/userstyles/raw/master/roll20/token-marker-labels.user.css</a>

Nice work on all these, Andrew. I will have to play with that horizontal toolbar... I also like the six animal icons for the stat mods. Did you make those or are they in a set for sale?

Ian said: That is very clever thinking, and that looks great! I’ll definitely be installing it&nbsp; Cheers! Rabulias said: Nice work on all these, Andrew. I will have to play with that horizontal toolbar... I also like the six animal icons for the stat mods. Did you make those or are they in a set for sale? Thanks :) The token markers are by JinxShadow: <a href="https://www.reddit.com/r/Roll20/comments/geh4q4/condition_markers_for_you_to_download_because_the/" rel="nofollow">https://www.reddit.com/r/Roll20/comments/geh4q4/condition_markers_for_you_to_download_because_the/</a> They have three sets, the second and third are linked from that first post. The third set has those six animals, designed to represent Enhance Ability buffs.

I've been holding off putting this round of styles in the Index post. Here is what I came up with: Tweaks to the Radial Token Menu and Token Markers &nbsp;- Question is posed with this thread and variation ons 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.

keithcurtis said: I've been holding off putting this round of styles in the Index post. Here is what I came up with: Tweaks to the Radial Token Menu and Token Markers &nbsp;- Question is posed with this thread and variation ons 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. If I may, I think the horizontal toolbar style (post ) is useful in its own right, and it doesn't modify the radial token menus or token markers at all. I've separated my version of static token markers style into its own post ( link ) so it's more clearly separated - and linking to the horizontal toolbar post just presents a single style, which is perhaps less confusing. Similarly, the token marker labels style ( post ) isn't designed to address the original question that began the discussion (which I hadn't actually read until now!), or any of the subsequent discussion for that matter. I don't feel it would be unreasonable to have these two listed in the index. With the separation of the posts, I don't think my version is detracting from the earlier alternatives. Obviously, it's your thread, so it's up to you if you'd rather not index these for any reason.

You're right. I had forgotten the horizontal menu style. The token marker post is good, and I'll include it. I had to tweak it considerably to make it work with other style changes I had made based on the previous code suggestions, but that's just me. It stands well enough on its own. Thanks. EDIT: Added, along with install links.

keithcurtis said: You're right. I had forgotten the horizontal menu style. The token marker post is good, and I'll include it. I had to tweak it considerably to make it work with other style changes I had made based on the previous code suggestions, but that's just me. It stands well enough on its own. Thanks. EDIT: Added, along with install links. Thanks :)

keithcurtis said: Compact Page Menu This is a work in progress, and if anyone has suggestions for patching it up, please feel free. This is an attempt to make the page menu a little more usable. I fully hope that it will be made obsolete later this year, with the announcement of page menu changes in the works. This turns the page menu listings on their sides and makes them far more compact. My original intend was to turn it into a vertical list, like a traditional menu, but apparently the flag requires JavaScript to change its behavior from horizontal to vertical. So I kept the flag and rotated the menu entries. Here is a screen shot: I've had a play around with this and came up with: Most everything works the same. Click on the page preview to switch the GM view, drag the flag to change the party location. You can even split the party normally, but I don't seem to be able to join the party by dragging the split player back to the flag. This requires toggling the style off temporarily at the moment. It's still a little quirky, but otherwise usable. I managed to fix the ability to drag a separated player back into the party flag, whilst dragging the player the mouse needs moving slightly down to be over the "Players" banner and it will light up: Moving the cursor up at this point will allow the separate player to be released on the same page without rejoining the party (which the standard page toolbar supports too). The other issue is that too many entries cause the extras to disappear of the edge to the right. They can be scrolled to, but dragging the flag doesn't automate a scroll. You can combine this with the extra map rows style in the original thread (linked in the top post) and the extras will shift down to the next row rather than off to the right. Probably a better solution, but I'd like to see what others can come up with. This issue is present in the default page toolbar, it won't scroll when dragging, it instead scrolls the main viewing window, which doesn't really help. I rewrote the vast majority of the code and adjusted/added various things including (but not limited to): Making the whole toolbar auto-width so it expands as more pages are added but doesn't span the whole viewport when there's only a few of them Fixed the input boxes for page names, so that they turn horizontal when used Made the page elements themselves react to hover/dragging rather than having the (now) smaller images use box-shadows etc. Styling the two bookend-like entries for "Create New Page" and "Archived" to distinguish them from the rest Here's the code I ended up with: #page-toolbar { height: 40vh; left: initial; max-width: 97%; right: 1.5%; width: auto; } #page-toolbar .container { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 100%; padding-left: 0; padding-right: 0; } #page-toolbar .pages { height: 100%; } #page-toolbar .pages .availablepage { height: 100%; margin-right: 0; margin-top: 0; width: 50px; } #page-toolbar .pages .availablepage[data-pageid="archive"], #page-toolbar .pages .availablepage[data-pageid="create"] { background-color: #333333; } #page-toolbar .pages .availablepage[data-pageid="archive"]:hover, #page-toolbar .pages .availablepage[data-pageid="create"]:hover { background-color: rgba(51,51,51,0.9); } #page-toolbar .pages .availablepage.chooseablepage:nth-child(2n) { background-color: #919191; } #page-toolbar .pages .availablepage img.pagethumb { left: 50%; margin-top: 0; max-height: 40px; max-width: 40px; position: absolute; top: 5px; transform: translate(-50%); } #page-toolbar .pages .availablepage[data-pageid="archive"] img.pagethumb, #page-toolbar .pages .availablepage[data-pageid="create"] img.pagethumb { display: none; } #page-toolbar .pages .availablepage.chooseablepage:hover { background-color: rgba(255,255,255,0.3); box-shadow: 0 0 3px white; } #page-toolbar .availablepage.chooseablepage.ui-droppable.ui-sortable-helper { background-color: rgb(255,0,0,0.5); box-shadow: 0 0 2px white; } #page-toolbar .pages .availablepage.chooseablepage.activepage { background-color: rgb(47,135,209,0.5); } #page-toolbar .pages .availablepage.chooseablepage.activepage:hover { background-color: rgb(47,135,209,0.4); box-shadow: 0 0 2px white; } #page-toolbar .pages .availablepage.activepage img.pagethumb { border: 0 none transparent; } #page-toolbar .pages div.availablepage:hover img.pagethumb { box-shadow: 0 0 5px #222222; } #page-toolbar .pages .availablepage span { bottom: 0; box-sizing: border-box; max-height: 100%; overflow: hidden; padding-left: calc(50% - 1em); padding-top: 55px; position: relative; text-align: left; writing-mode: vertical-lr; } #page-toolbar .pages .availablepage[data-pageid="archive"] span::before, #page-toolbar .pages .availablepage[data-pageid="create"] span::before { font-family: "Pictos"; font-size: 48px; left: 2px; line-height: 48px; position: absolute; top: 0; writing-mode: horizontal-tb; } #page-toolbar .pages .availablepage[data-pageid="archive"] span::before { content: "o"; } #page-toolbar .pages .availablepage[data-pageid="create"] span::before { content: "+"; } #page-toolbar .pages .availablepage span input { box-sizing: border-box; font-size: 0.8em; left: calc(-50% + 8px); padding: 1px; top: 0; width: 50px; writing-mode: horizontal-tb; } #page-toolbar .pages .availablepage .duplicate, #page-toolbar .pages .availablepage .settings { background-color: #333333; bottom: 0; font-size: 14px; padding: 0; top: initial; width: 50%; } #page-toolbar .pages .availablepage .duplicate:hover, #page-toolbar .pages .availablepage .settings:hover { background-color: black; } #page-toolbar .pages .availablepage .duplicate { right: 0; } #page-toolbar .pages .availablepage .settings { border-radius: 0; left: 0; } #page-toolbar .playerbookmark { bottom: 10px; box-sizing: border-box; left: 0; top: initial; transform: rotate(90deg); width: 100%; z-index: 100; } #page-toolbar .playerbookmark.ui-draggable.ui-droppable.dropping { background-color: rgba(255,204,0,0.5); border: 0 none transparent; left: 0; } #page-toolbar .playerspecificbookmark { bottom: 60px; left: 0; top: initial !important; } Admittedly, I don't really like the vertical text! So if I work on this some more, I might try a version with smaller horizontal text that breaks over a couple of lines (but still aims to keep the overall page toolbar more compact). Edit: Added missed border-radii to #page-toolbar .container and (cosmetic) typos. Edit: Adjusted the "Create New Page" and "Archived entries" to use "Pictos" icons rather than the default images, updated the image accordingly too.

Is it possible to transform the vertical text so the individual letters are the right way up, like: L a n d i n g P a g e

Very nice. It improves well on my starting point, and feels much smoother overall. I'll still wait a bit for any more refinements before putting this on userstyles. When I do, would you prefer to host it? If yours is the last refinement, I'll likely point the index post here, with a [Draft] notice on mine.

I'm still hoping that all of this will become immaterial with the improvements hinted at by Nolan in his last roadmap.

GiGs said: Is it possible to transform the vertical text so the individual letters are the right way up, like: L a n d i n g P a g e Yes, by adding the following to the "#page-toolbar .pages .availablepage span" rule: font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 0.9em; letter-spacing: -1px; text-orientation: upright; You get: That seems a little easier to read (though I'll probably still work on a horizontal text version). Full block for that element: #page-toolbar .pages .availablepage span { bottom: 0; box-sizing: border-box; font-family: Menlo,Monaco,Consolas,"Courier New",monospace; font-size: 0.9em; letter-spacing: -1px; max-height: 100%; overflow: hidden; padding-left: calc(50% - 1em); padding-top: 55px; position: relative; text-align: left; text-orientation: upright; writing-mode: vertical-lr; }

That method is sometimes called Cafeteria Style in design school. (after the large vertical "cafeteria" signs). In legibility studies, it has been generally considered difficult to read. I messed with it when I started the style and found it unlovely. I love everything you've done with this so far, but I won't adopt this bit. YMMV, of course. Kirill had also suggested that the text run sideways from bottom to top, which I also advise against. As it is (before this iteration), the sideways text mimics the appearance of books on a shelf, which (Western) readers are trained to be used to. The bottom of the letters is to the left. This has the added benefit of aligning all text to the left (or top, as it were), making the eye do less work to find the beginning of each title. My suggestion would be to leave this bit as is.

keithcurtis said: Very nice. It improves well on my starting point, and feels much smoother overall. I'll still wait a bit for any more refinements before putting this on userstyles. When I do, would you prefer to host it? If yours is the last refinement, I'll likely point the index post here, with a [Draft] notice on mine. Thanks, making it more compact was a good idea. I think I'd prefer to host a compact version with horizontal text - provided I can get it to work reasonably well - rather than hosting a vertical text version (or more than one version). I'm happy if you would like to host a vertical text version too. keithcurtis said: I'm still hoping that all of this will become immaterial with the improvements hinted at by Nolan in his last roadmap. Do you have a link to that? I'm curious as to what was mentioned.

keithcurtis said: That method is sometimes called Cafeteria Style in design school. (after the large vertical "cafeteria" signs). In legibility studies, it has been generally considered difficult to read. I messed with it when I started the style and found it unlovely. I love everything you've done with this so far, but I won't adopt this bit. YMMV, of course. Kirill had also suggested that the text run sideways from bottom to top, which I also advise against. As it is (before this iteration), the sideways text mimics the appearance of books on a shelf, which (Western) readers are trained to be used to. The bottom of the letters is to the left. This has the added benefit of aligning all text to the left (or top, as it were), making the eye do less work to find the beginning of each title. My suggestion would be to leave this bit as is. That's fair, I only really tried it as GiGs had requested it, and then posted it since I had the code - I still don't really like the vertical text! :D I've removed the full code from that example, I think it was a bit much. It's a shame they don't seem to have scrollable code boxes here =/ Anyway, this is my latest iteration: I've made the pages a little wider as I found it gave longer words a little more breathing room. I did try a narrower version (with the same widths as the vertical text one, if I recall correctly), here's that for comparison: I'm probably going to play around some more with the "Create New Page" and "Archived" buttons, but the latest code is as follows: Edit: I have played around some more with the "Create New Page" and "Archived" buttons, my revised version is detailed in this post (below).

I've made a quick style to show the file sizes of recently uploaded files: After being made aware of the existing "data-filesize" attribute on these files by this post , effectively all I've done here is to make it visible. I've noticed some files report sizes of 0 KB, which I believe happens for files less than a KB. I've also seen "null", which appears to happen for files copied to my library from the premium assets - I guess this is because they don't count towards personal upload limits. Assuming you have Stylus (or an equivalent), this style can be installed from: <a href="https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/show-upload-filesizes.user.css" rel="nofollow">https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/show-upload-filesizes.user.css</a>

Very nice!

keithcurtis said: Very nice! Thanks!

I've finished playing with the compact page menu style for now; I hid the default images for "Create New Page" and "Archived" and instead added icons using the "Pictos" font that Roll20 use for various icons: I think this helps to distinguish them from the rest of the page images. This is probably my final version of this (barring possible bug fixes/further suggestions) so I have made it available for install here: <a href="https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/compact-page-toolbar.user.css" rel="nofollow">https://raw.githubusercontent.com/code-shenanigans/userstyles/master/roll20/compact-page-toolbar.user.css</a> Edit: I've also updated the vertical text version to use these icons (and consequently updated the preview image) in the post above . Also, for anyone interested in the "Pictos" icons for their own user styles, I referred to this: <a href="https://app.roll20.net/forum/permalink/1732104/" rel="nofollow">https://app.roll20.net/forum/permalink/1732104/</a>

Since the Recent Uploads style dovetails so nicely into "Tighter Sidebar Lists" I have edited that code block into the other style and made a note in the index. The style retains its own entry and credit, though, for those who would like to use it standalone. Is there any way to add the size display to items that have been filed into "folders"?

keithcurtis said: Since this style dovetails so nicely into "Tighter Sidebar Lists" I have edited that code block into the other style and made a note in the index. The style retains its own entry and credit, though, for those who would like to use it standalone. Good thinking, thanks!

Andrew said: I've finished playing with the compact page menu style for now And it's beautiful. I have added it to the index with a recommendation to consider it before the old "Add Rows to Map Tab" style from the first thread.

keithcurtis said: Andrew said: I've finished playing with the compact page menu style for now And it's beautiful. I have added it to the index with a recommendation to consider it before the old "Add Rows to Map Tab" style from the first thread. Thank you kindly ^_^

"Spoiler Tags" for salmon error messages So I still can't figure out how to suppress errors for @{target} macros. Generally not a huge issue for DMing since you can use @{select} and &amp;{noerror}, but can be pretty annoying in player macros. My extremely basic CSS ability led me to this: .message.error { font-size: 2px; border: 0px; line-height: 0px; transition: border 0.05s, line-height 0.05s, font-size 0.2s; } .message.error:hover { font-size: initial; border: initial; line-height: initial; } .message.error .spacer { display:none; transition: display 0.1s; } .message.error .spacer:hover { display:block; } This will scrunch them up nice and small, but restore the error on mouse-over in case you genuinely don't know what caused it. Hopefully someone else finds this useful! More than happy to take tips on how to make it look better.

Just curious what i am doing wrong as my token button 1 and 2 are much wider than the ones you guys have. Still learning css and all the little things needed to tweak this stuff. #radial-menu { --color-text-primary: #e9e9e9; --color-bg-dark: #908e8e; --color-text-disabled: #150d0d; --color-element-bg: #676767; --color-element-bg2: #313131; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; } #radial-menu .button { background: var(--color-element-bg) !important; border: 0px; } #radial-menu .button-3 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button-4 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button-5 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button.button-2 { border-radius: 0px 0px 25px 25px; } #radial-menu .button.button-1 { border-radius: 25px 25px 0px 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { box-shadow: 0px 0px 5px var(--color-text-disabled); left: 75px; } #radial-menu .button.button-2 { top: -5px; } #radial-menu .button.button-1 { top: 34px; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: -45px; } #radial-menu .button.button-3 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-green), inset 0px 0px 10px var(--color-green), inset 0px 0px 15px var(--color-green) !important; top: 15px; } #radial-menu .button.button-4 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-blue), inset 0px 0px 10px var(--color-blue), inset 0px 0px 15px var(--color-blue) !important; top: 55px; } #radial-menu .button.button-5 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-red), inset 0px 0px 10px var(--color-red), inset 0px 0px 15px var(--color-red) !important; top: -25px; } #radial-menu .button div.inner { background: none; color: var(--color-text-primary); font-family: var(--font-number); font-weight: 800; margin-top: 5px; text-shadow: 0px 0px 5px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark); } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner { margin-top: 2px; } #radial-menu .button div.inner span { font-size: 18px !important; } #radial-menu .markermenu { background: var(--color-element-bg) !important; box-shadow: 0px 0px 5px var(--color-text-disabled); } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .markermenu.open { width: 235px; height: 225px; border-radius: 15px; } #radial-menu .markermenu .markericon.active, #radial-menu .markermenu .markercolor.active { outline: 2px dashed var(--color-yellow); outline-offset: -2px; border: 0px; background-color: var(--color-yellow); border-radius: 5px; } #radial-menu .markermenu .markercolor.dead { color: var(--color-red); top: -2px; }

EDIT:&nbsp; Fixed my own issue with a little digging!! inserted this and played with width and height a bit and got this } #radial-menu .button-2 { width: 30px; height: 30px; border-radius: 15px; } #radial-menu .button-1 { width: 30px; height: 30px; border-radius: 15px; } *Final Result #radial-menu { --color-text-primary: #e9e9e9; --color-bg-dark: #908e8e; --color-text-disabled: #150d0d; --color-element-bg: #676767; --color-element-bg2: #313131; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; } #radial-menu .button-2 { width: 30px; height: 30px; border-radius: 15px; } #radial-menu .button-1 { width: 30px; height: 30px; border-radius: 15px; } #radial-menu .button { background: var(--color-element-bg) !important; border: 0px; } #radial-menu .button-3 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button-4 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button-5 { background: var(--color-element-bg2) !important; border: 0px; } #radial-menu .button.button-2 { border-radius: 0px 0px 25px 25px; } #radial-menu .button.button-1 { border-radius: 25px 25px 0px 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { box-shadow: 0px 0px 5px var(--color-text-disabled); left: 75px; } #radial-menu .button.button-2 { top: -5px; } #radial-menu .button.button-1 { top: 34px; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: -45px; } #radial-menu .button.button-3 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-green), inset 0px 0px 10px var(--color-green), inset 0px 0px 15px var(--color-green) !important; top: 15px; } #radial-menu .button.button-4 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-blue), inset 0px 0px 10px var(--color-blue), inset 0px 0px 15px var(--color-blue) !important; top: 55px; } #radial-menu .button.button-5 { box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-red), inset 0px 0px 10px var(--color-red), inset 0px 0px 15px var(--color-red) !important; top: -25px; } #radial-menu .button div.inner { background: none; color: var(--color-text-primary); font-family: var(--font-number); font-weight: 800; margin-top: 5px; text-shadow: 0px 0px 5px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark), 0px 0px 2px var(--color-bg-dark); } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner { margin-top: 2px; } #radial-menu .button div.inner span { font-size: 18px !important; } #radial-menu .markermenu { background: var(--color-element-bg) !important; box-shadow: 0px 0px 5px var(--color-text-disabled); } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .markermenu.open { width: 235px; height: 225px; border-radius: 15px; } #radial-menu .markermenu .markericon.active, #radial-menu .markermenu .markercolor.active { outline: 2px dashed var(--color-yellow); outline-offset: -2px; border: 0px; background-color: var(--color-yellow); border-radius: 5px; } #radial-menu .markermenu .markercolor.dead { color: var(--color-red); top: -2px; }

Minor update to my API scripts page button mover style . The original style didn't affect the enable scripts button. The update is applied to the original post as well. .script.tab-pane.active, .preview{ display:grid; grid-template-rows:auto; grid-template-columns:auto auto auto; grid-column-gap:1em; } .script.tab-pane.active &gt; *, .preview &gt; *{ grid-column:1 / -1; } .script.tab-pane.active &gt; .pull-right{ grid-column:3/4; grid-row:1/2; place-self:end; position:sticky; top:0; left:0; } .script.tab-pane.active &gt; .btn.active.togglescript, .script.tab-pane.active &gt; .btn.inactive.togglescript{ grid-column:2/3; grid-row:1/2; place-self:end; position:sticky; top:0; left:0; } .script.tab-pane.active &gt; .btn.btn-primary.savescript{ grid-column:1/2; grid-row:1/2; place-self:start; position:sticky; top:0; left:0; } .preview &gt; div:last-of-type{ grid-row:1/2; position:sticky; top:0; left:0; background-color:white; } .restartsandbox{ place-self:start; }

Thanks! Every time I noticed that, I kept meaning to tweak it. Yoinked.

Blind Roll for Free/Plus accounts I was scratching my head for a while with a way to do this that doesn't require all the players to install CSS scripts to blind themselves. Turns out it's actually reasonably simple. This only requires the GM to install a Stylus script. There's nothing to stop players from installing the same thing, so if you're worried about people cheating this isn't for you - it's more for groups trying to avoid meta-gaming by knowing their own stealth roll while they're sneaking about, that kind of thing. Method underneath for (I think?) "passwording" the blind roll. I figured I'd throw this in here for now to see if anyone can suggest some improvements (one thing is immediately obvious - this method disables the mouse-over if you want to double-check the math), and maybe throw it in Stupid Tricks if it's useful enough. So here's a straight-forward macro - it's for 5e stealth in this case, but the method can be used for anything. I've used a hard-coded name and a Query for the bonus, so no changes required if you're not running it from a 5e sheet: /me tries to slip into the shadows... /w gm &amp;{template:default}{{name=Blind Roll}}{{Alice rolls stealth=1d20+?{Stealth bonus?|5}[Bonus], ?{Advantage?| Normal,normal roll&amp;#125;&amp;#125; {{=**[Result = ](#" id="BlindRoll" style="display:none)[[[[[1d20]]d1+?{Stealth bonus?&amp;#125;]]](#" id="BlindRoll" style="display:none)**| Advantage,advantage roll&amp;#125;&amp;#125; {{=**[Result = ](#" id="BlindRoll" style="display:none)[[[[[2d20k1]]d1+?{Stealth bonus?&amp;#125;]]](#" id="BlindRoll" style="display:none)**| Disadvantage,disadvantage&amp;#125;&amp;#125; {{=**[Result = ](#" id="BlindRoll" style="display:none)[[[[[2d20kl1]]d1+?{Stealth bonus?&amp;#125;]]](#" id="BlindRoll" style="display:none)**}}} So this just uses a Stupid Trick to insert an id "BlindRoll" into the link (this gives us a CSS selector to grab later) and to disable display, so by default the links are not seen. I don't think this is possible without using a link - it's the behaviour of the [Button](Link) parsing which enables it. I'd be happy to be shown I'm wrong about that though, as the link button label is a bit limiting. Also, Roll20 inserts "userscripts-" before any id or class you try to force into a link, presumably to stop cheaty hacky behaviour, but I'm not 100% on that. So far we have a macro which should produce this: Those button links aren't visible since we forced them to display:none. So we just need to force them to be visible for the GM, with a disgustingly simple style. After all the time I spent trying to do tricky stuff to make this work, it's so disgustingly simple I threw up twice on myself while typing this: #userscript-BlindRoll { display:inline!important; } Now, the GM (and as mentioned before, any player canny enough to install this) should see the exact same template like this: So... any suggestions? The missing tooltip for the roll bothers me, but I haven't figured out any other way to make it work. I looked through the existing CSS for Roll20, and there's nothing I can find that's hidden by default, that I could use to hide a roll in, and unhide only for the GM. Trying to force a change in class or id, Roll20 always inserts "userscripts-" in front of it, so it won't match any of the existing styles. I can't really think of a way to get the roll result that won't display for the player whispering. $[[0]] calls don't work in button labels, unfortunately. "Password" the blind roll (or any other style) Pretty much as above, but we'll just replace the id with a character sheet attribute. The character sheet needs to have no player permissions set (no one can view or edit), and no token on the token layer anywhere (otherwise players can grab Attributes with a @{target} macro). To use one of the button labels from above as an example: [Result = ](#" id=" BlindRoll " style="display:none) we just replace the id with a reference to an Attribute blindroll on the character sheet pass: [Result = ](#" id=" @{pass|blindroll} " style="display:none) Let's say we've entered that Attribute as passwordbr . Just change your Stylus to: #userscript-passwordbr { display:inline!important; } I don't think a player has any way of uncovering Attributes on a sheet they can't see, provided there's no linked tokens for them to @{target}.

That's diabolically simple. You know, I don't think I noticed the use of styling tags in that stupid trick before. This opens up a whole new level of possibilities of conditional display.

I think anyone using 3D dice will still see the roll, but if you have everyone turn that off, it's a good option for non-Pro users.

This is similar to the Shaped Sheet's controls, which IDs most parts of the roll template. You can toggle the display on or off, but Kryx provided a style sheet for displaying everything.

Rabulias said: I think anyone using 3D dice will still see the roll, but if you have everyone turn that off, it's a good option for non-Pro users. Excellent point! Edited to fix - replacing 2d20kl1 with [[2d20kl1]]d1 does the trick. Accidentally discovered on my way to doing ceil(1d200/10), which is the same probability but looks icky.

Could userstyles be used for reskinning/recoloring the 3D dice?

I did have a crack at that, and couldn't find a solution. I tried changing the colour on the Avatar selector before the roll and it didn't change the dice - I might have done something wrong though. Interesting side effect - if you change your default colour on the Avatar to "transparent" the dice are black with no visible numbers. If there's a way to automate that, it could be useful for GM rolls where you want the player to know the size and number of the dice, but not the result.

Or if your name is Big Jule. Musical theatre joke...

The Pathfinder 2e template recently updated to show action icons to the left of the box. I've been using Mik's style for an alternate template, but the update has hidden the character name in this style. Would anyone know how to adjust the code for the style so the character name is visible again and the action icon is moved from outside the template to right after the action name (or at least somewhere within the template box)?

That's odd Persephone, I'm not seeing the character name disappear on my end. When I turn on the script it looks like the icon is entirely removed. I don't know enough about CSS to move elements like the icon to a specific part of the text, sorry!&nbsp; The new PF2 sheet does have a toggle for those icons. You could try turning them off and see if the names come back? &nbsp;

Oosh said: I did have a crack at that, and couldn't find a solution. I tried changing the colour on the Avatar selector before the roll and it didn't change the dice - I might have done something wrong though. Interesting side effect - if you change your default colour on the Avatar to "transparent" the dice are black with no visible numbers. If there's a way to automate that, it could be useful for GM rolls where you want the player to know the size and number of the dice, but not the result. The dice appear to be drawn on a canvas element, so they don't have traditional elements for styling. However, since this canvas seems to be specifically used for the 3D dice, the canvas itself can be messed with...&nbsp; Example: So following avatar choice (#FF0000 for this example), here's the default: Adding some styling to the canvas (click to view GIF): Another (less animated) example: Starting with #274e13: #tdviewport canvas { &nbsp;&nbsp;&nbsp;&nbsp;filter: brightness(1.5) contrast(1.5) hue-rotate(200deg); } One thing to note is that this will be applied regardless of starting point, so avatar colours differing between players will also result in different colours after the hue-rotate/other filtering. Whether this is useful depends on what the goal is. One of many ways to hide the numbers would be to lower the brightness, but (as with most methods) the outline of the faces is lost too, so that's perhaps not particularly useful: #tdviewport canvas { &nbsp;&nbsp;&nbsp;&nbsp;filter: brightness(0); } See&nbsp; <a href="https://developer.mozilla.org/docs/Web/CSS/filter" rel="nofollow">https://developer.mozilla.org/docs/Web/CSS/filter</a> &nbsp;for more information on using filter.

Mik H. said: That's odd Persephone, I'm not seeing the character name disappear on my end. When I turn on the script it looks like the icon is entirely removed. I don't know enough about CSS to move elements like the icon to a specific part of the text, sorry!&nbsp; The new PF2 sheet does have a toggle for those icons. You could try turning them off and see if the names come back? &nbsp; Even with the setting off, all templates seem to be missing the names. So without the style, and with the new setting on, the template looks like this: But with the style, the name and icon aren't visible: Turning the setting off doesn't change anything except remove the icon, which isn't visible with the style anyway. I commented out lines 4-6 so the icons are visible, but the names are still missing and I can't figure out why...

Andrew said: The dice appear to be drawn on a canvas element, so they don't have traditional elements for styling. However, since this canvas seems to be specifically used for the 3D dice, the canvas itself can be messed with...&nbsp; Example: &lt;--- SNIP ---&gt; Holy crap that is cool. But, if I'm understanding right, this will make all player dice the same colour? Or does the filter apply differently to different base colours?