Show Off Your Style 2: The Stylening!

Hello, try to ajust top/left values of .popupvalue class #radial-menu .popupvalue { position: absolute; top: -40px; left: -15px; width: 55px; height: 30px; z-index: 1005 } #radial-menu .popupvalue input { width: 100%; font-size: 16px }

That worked great. As another question related. Is it possible to move the radials to attach to the side or bottom of the screen rather than the token?

Colin B. said: That worked great. As another question related. Is it possible to move the radials to attach to the side or bottom of the screen rather than the token? You should change positioning property of whole element #radial-menu. For example top-left corner (don't forget !important to override js styling): #radial-menu { position: fixed; top: 150px !important; left: 150px !important; }

Thats fantastic, thank you. I now have my bars out of the way where they don't overlap other tokens. I can click around and make the various health adjustments without having to nudge one token out of the way to access another.

That's pretty clever. The rotation controls are never hidden either.

Okay, I see you guys moving the bubbles to the side of the screen and I want to do that.  Is this a stylus that I can just install or do I need to know how to do something?  Yes I know, I'm ignorant.  Computers are not really my thing.  I tend to do whatever is clickable which is why i LOVE that list Keith made for stylus one click installs.  Amazing. How can I get this update to token menus and bubble movement?

Install the stylus browser extension, open your game, from the stylus extension icon at the top of your browser, choose "write a style..." (or choose edit if you already have a css style)  Just copy and paste the code from the posts above into the stylus edit window and save.  You can add onto and edit the css as needed.

I have this at the top of my browser. Should I click on the app.roll20.net/thisURL?

What changes were made to have the two dark buttons below the other 3, also do the text fields show up on top. mine show behind on the Red and Green but not Blue. Colin B. said: Thats fantastic, thank you. I now have my bars out of the way where they don't overlap other tokens. I can click around and make the various health adjustments without having to nudge one token out of the way to access another.

Wow.  That's a lot of styles... (this "can be" problematic since some styles may overlap.  the css with highest specificity normally overrides all other styles.  Any css attributes that include "!important" will override everything.  It's usually bad practice to use !important since it breaks the "cascading" part of css.  Specificity is the prefered method for targeting elements.) rant off.... ;-) Yes, you can create a new style by clicking on the app.roll20.net/thisURL

Kilter said: What changes were made to have the two dark buttons below the other 3, also do the text fields show up on top. mine show behind on the Red and Green but not Blue. Colin B. said: Thats fantastic, thank you. I now have my bars out of the way where they don't overlap other tokens. I can click around and make the various health adjustments without having to nudge one token out of the way to access another. I will post my whole code here but someone with more skill than me might want to clean it up before it can be used. the input boxes pop out to the right of the circles as does the token marker box. #radial-menu { --color-text-primary: #b3b3b3; --color-bg-dark: #1c1111; --color-text-disabled: #150d0d; --color-element-bg: #372828; --color-red: #f85212; --color-green: #78ff10; --color-blue: #0c6be7; --color-yellow: #fc0; --font-number: "Ruda", sans-serif; } #radial-menu { position: fixed; top: 80px !important; left: 100px !important; } #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); left: 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { position:fixed; left:55px !important; } #radial-menu .button.button-2 { top: 180px; } #radial-menu .button.button-1 { top: 218px; } #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; } #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 } Edit - this is also set up for my screen resolution so may not work so well with others.

Thank you this is great. Colin B. said: Kilter said: What changes were made to have the two dark buttons below the other 3, also do the text fields show up on top. mine show behind on the Red and Green but not Blue. Colin B. said: Thats fantastic, thank you. I now have my bars out of the way where they don't overlap other tokens. I can click around and make the various health adjustments without having to nudge one token out of the way to access another.

If you do clean it up and keep the same layout, could you send me the code so I can have a cleaner version please lol Kilter said: Thank you this is great. Colin B. said: Kilter said: What changes were made to have the two dark buttons below the other 3, also do the text fields show up on top. mine show behind on the Red and Green but not Blue. Colin B. said: Thats fantastic, thank you. I now have my bars out of the way where they don't overlap other tokens. I can click around and make the various health adjustments without having to nudge one token out of the way to access another.

Here is the code that I came up with, that moves the bubbles to below the toolbox (to keep the play area as squared as possible, and because I was accidentally calling up the toolbox flyout menus). It also moves the edit boxes to the right of the circles for better access. Also, I removed the bit that was enforcing a type size, so that 3 digit HP would display completely. The code: #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; } #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; } #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; }

This is such a good idea, to have them in a standard out of the way place - especially since the interface update that made them take up more space

Mostly I like the fact that the nameplates and control handles remain clear.

Thank you so much Keith.  Everything you do is clear, concise, easy to follow.  You are a dream for those of us who love the bells and whistles but are totally not programmers.  I got it working perfectly.  Keep them coming.

This one was 99.5% Kirill. I learned some cool stuff on this one. First that those elements were even reachable vis css, and second, how to use css variables. Kirill, you seem to have a much better handle on CSS than I do. If you are interested in a Stylus project I abandoned do to lack of technical know-how, please PM me. If you can make it work, you will be the idol o' millions.

Oh that does not sound intriguing at all...

Kirill S. said: Hey, guys. I work on one more dark style. It is not a tweak, actually it full color and font rework with slight positioning fixes. At this moment it is alpha version (with bunch of bug, i guess). The style works well with standart 5e charsheet. To install directly with Stylus click this: Stylus - Roll20 Dark Cobalt Source code you can find at the github: <a href="https://github.com/shevernitskiy/roll20darkcobalt" rel="nofollow">https://github.com/shevernitskiy/roll20darkcobalt</a> Oh my god, thank you, my eyes thank you.&nbsp;

keithcurtis said: Here is the code that I came up with, that moves the bubbles to below the toolbox (to keep the play area as squared as possible, and because I was accidentally calling up the toolbox flyout menus). It also moves the edit boxes to the right of the circles for better access. Also, I removed the bit that was enforcing a type size, so that 3 digit HP would display completely. The code: #radial-menu { &nbsp; &nbsp; --color-text-primary: #fff; &nbsp; &nbsp; --color-bg-dark: #1c1d28; &nbsp; &nbsp; --color-text-disabled: #888994; &nbsp; &nbsp; --color-element-bg: #eaeaea; &nbsp; &nbsp; --color-red: #f85212; &nbsp; &nbsp; --color-green: #78ff10; &nbsp; &nbsp; --color-blue: #0c6be7; &nbsp; &nbsp; --color-yellow: #fc0; &nbsp; &nbsp; /*--font-number: "Ruda", sans-serif;*/ } #radial-menu .button { &nbsp; &nbsp; background: var(--color-element-bg) !important; &nbsp; &nbsp; border: 0px; } #radial-menu .button.button-1 { &nbsp; &nbsp; border-radius: 0px 0px 25px 25px; } #radial-menu .button.button-2 { &nbsp; &nbsp; border-radius: 25px 25px 0px 0px; } #radial-menu .button.button-1, #radial-menu .button.button-2 { &nbsp; &nbsp; box-shadow: 0px 0px 5px var(--color-text-disabled); &nbsp; &nbsp; top: 150px !important; &nbsp; &nbsp; left: -60px; } #radial-menu .button.button-2 { &nbsp; &nbsp; top: 111px !important; } #radial-menu .button.button-1 { &nbsp; &nbsp; top: 33px; } #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { &nbsp; &nbsp; left: -60px; } #radial-menu .button.button-3 { &nbsp; &nbsp; box-shadow: 0px 0px 5px var(--color-text-disabled), &nbsp; &nbsp; inset 0px 0px 5px var(--color-green), &nbsp; &nbsp; inset 0px 0px 10px var(--color-green), &nbsp; &nbsp; inset 0px 0px 15px var(--color-green) !important; &nbsp; &nbsp; top: 15px; } #radial-menu .button.button-4 { &nbsp; &nbsp; box-shadow: 0px 0px 5px var(--color-text-disabled), &nbsp; &nbsp; inset 0px 0px 5px var(--color-blue), &nbsp; &nbsp; inset 0px 0px 10px var(--color-blue), &nbsp; &nbsp; inset 0px 0px 15px var(--color-blue) !important; &nbsp; &nbsp; top: 60px; } #radial-menu .button.button-5 { &nbsp; &nbsp; box-shadow: 0px 0px 5px var(--color-text-disabled), &nbsp; &nbsp; inset 0px 0px 5px var(--color-red), &nbsp; &nbsp; inset 0px 0px 10px var(--color-red), &nbsp; &nbsp; inset 0px 0px 15px var(--color-red) !important; &nbsp; &nbsp; top: -30px; } #radial-menu .button.button-1 div.inner, #radial-menu .button.button-2 div.inner { &nbsp; &nbsp; margin-top: 2px; } #radial-menu .button div.inner span { &nbsp; &nbsp; font-size: 24px; } #radial-menu .markermenu { &nbsp; &nbsp; background: var(--color-element-bg) !important; &nbsp; &nbsp; box-shadow: 0px 0px 5px var(--color-text-disabled); } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { &nbsp; &nbsp; border: 5px; } #radial-menu .popupvalue { &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; top: 5px; &nbsp; &nbsp; left: 45px; &nbsp; &nbsp; width: 55px; &nbsp; &nbsp; height: 30px; &nbsp; &nbsp; z-index: 1005 } #radial-menu .popupvalue input { &nbsp; &nbsp; width: 100%; &nbsp; &nbsp; font-size: 16px } #radial-menu { &nbsp; &nbsp; position: fixed; &nbsp; &nbsp; top: 380px !important; &nbsp; &nbsp; left: 80px !important; } #radial-menu .markermenu.open { &nbsp; &nbsp; width: 268px; &nbsp; &nbsp; height: 265px; &nbsp; &nbsp; border-radius: 15px; } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { &nbsp; &nbsp; border: 5px; } #radial-menu .markermenu .markericon.active, #radial-menu .markermenu .markercolor.active { &nbsp; &nbsp; outline: 2px dashed var(--color-yellow); &nbsp; &nbsp; outline-offset: -2px; &nbsp; &nbsp; border: 0px; &nbsp; &nbsp; background-color: var(--color-yellow); &nbsp; &nbsp; border-radius: 5px; } #radial-menu .markermenu .markercolor.dead { &nbsp; &nbsp; top: -2px; } Love this layout, however, my screen is too small for it lol

If you guys want to make universal position for radial menu, probably it is better to use dynamic units instead of pixels (px). Try to do something with vw and vh - it is viewport based units. More info here: <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" rel="nofollow">https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units</a>

Colin B. said: Love this layout, however, my screen is too small for it lol No way! That's such a shame. I don't know if it'll work for you, but I routinely use roll20 zoomed out to 80% - the extra screen availability is a god-send for larger maps, and in this instance it might prove helpful for you!

Kirill S. said: If you guys want to make universal position for radial menu, probably it is better to use dynamic units instead of pixels (px). Try to do something with vw and vh - it is viewport based units. More info here: <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" rel="nofollow">https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units</a> I suppose that would enable preventing the gap shown here when using this style as a player?

Ian said: Colin B. said: Love this layout, however, my screen is too small for it lol No way! That's such a shame. I don't know if it'll work for you, but I routinely use roll20 zoomed out to 80% - the extra screen availability is a god-send for larger maps, and in this instance it might prove helpful for you! I have just adapted the code to display the radial menu next to the side menu

Ian said: Kirill S. said: If you guys want to make universal position for radial menu, probably it is better to use dynamic units instead of pixels (px). Try to do something with vw and vh - it is viewport based units. More info here: <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" rel="nofollow">https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units</a> I suppose that would enable preventing the gap shown here when using this style as a player? The gap is just because you are player, not gm. You have less options in this floating menu. Relative units (like vh vw) provide positioning depending on the screen (in %), but not on the pixels in the frame (with your resolution).&nbsp;&nbsp;

Is there any way to position them relative to the bottom of the floating menu, so that it looks correct in both player and DM views?

It is possible with js. With pure css this is impossible. But you can move floating menu a little bit down and place radial menu above it. In this case both views (gm and player) will be ok, because floating menu expanding down.

Do Stylus extensions allow use of js to alter page elements?&nbsp;

Not to my knowledge. I believe this would require a user script (extension).

Ian said: Do Stylus extensions allow use of js to alter page elements?&nbsp; You can use user scripts extension for this. For example - TamperMonkey. It is injecting user js code, same thing as Stylus but for js, not css.

Love this style this is sooo good forgames in the night... But I have one problem, my folders in the journal are white with yellow writings...do you know how I can fix that? Greetz&nbsp; Kirill S. said: Hey, guys. I work on one more dark style. It is not a tweak, actually it full color and font rework with slight positioning fixes. At this moment it is alpha version (with bunch of bug, i guess). The style works well with standart 5e charsheet. To install directly with Stylus click this: Stylus - Roll20 Dark Cobalt Source code you can find at the github: <a href="https://github.com/shevernitskiy/roll20darkcobalt" rel="nofollow">https://github.com/shevernitskiy/roll20darkcobalt</a>

It's possible you have conflict between styles. I'm guessing that you are using Kirill's dark mode and my Compact Compendium style? One or the other of them might need tweaking to bring them into agreement. I would suggest (If this surmise is correct), changing the Compendium style, since it's a lot less complex than the Dark Mode. You can turn styles on and off in the drop down list for the extension to test where the conflict lies.

Frobbit said: Love this style this is sooo good forgames in the night... But I have one problem, my folders in the journal are white with yellow writings...do you know how I can fix that? Greetz&nbsp; As Keith said, it might be interference from the other style tweak. But if its not, plesase PM me, or add an Issue on github with detailed instruction, how I can reproduce it by myself.

I put a light gray background on the Compendium headers, probably with an !important tag on them.

keithcurtis said: It's possible you have conflict between styles. I'm guessing that you are using Kirill's dark mode and my Compact Compendium style? One or the other of them might need tweaking to bring them into agreement. I would suggest (If this surmise is correct), changing the Compendium style, since it's a lot less complex than the Dark Mode. You can turn styles on and off in the drop down list for the extension to test where the conflict lies. Yes you are right...I will give it a try without the Compact Compendion Style and will report what I see.

You can just remove background property of folder header elements in Compact Compendium Style. It could work.

Hi,&nbsp; so I tested the the Dark Cobalt without Compact Compendium. So after disabling the Compact Compendium everything works fine. Very nice style.... I love it :-)

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: 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. 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. Let me know if anyone can improve this. I won't paste an install link yet, just in case it can be refined. Here's the code: #page-toolbar .pages .availablepage span { &nbsp; &nbsp; top: 55px; &nbsp; &nbsp; width: 70%; &nbsp; &nbsp; text-align: left; &nbsp; &nbsp; writing-mode: vertical-rl; &nbsp; &nbsp; overflow: hidden; } #page-toolbar .playerbookmark { &nbsp; &nbsp; position: absolute; &nbsp; &nbsp; top: 245px; &nbsp; &nbsp; left: 5px; &nbsp; &nbsp; border: none; &nbsp; &nbsp; z-index: 100; } #page-toolbar .playerspecificbookmark img { &nbsp; &nbsp; margin-top: 300px; &nbsp; &nbsp; margin-left: -80px; &nbsp; &nbsp; max-width: 30px; &nbsp; &nbsp; max-height: 30px; } #page-toolbar { &nbsp; &nbsp; height: 350px; } #page-toolbar .pages .availablepage { &nbsp; &nbsp; height: 350px; &nbsp; &nbsp; width: 50px; &nbsp; &nbsp; margin-right: 0px; &nbsp; &nbsp; margin-left: 0px; &nbsp; &nbsp; padding-right: 0px; &nbsp; &nbsp; padding-left: 0px; } #page-toolbar .pages .availablepage:nth-child(2n) { &nbsp; &nbsp; background-color: #939191; } #page-toolbar .container { &nbsp; &nbsp; height: 100%; } #page-toolbar .pages .availablepage .settings { &nbsp; &nbsp; top: 218px; &nbsp; &nbsp; left: 5px; &nbsp; &nbsp; font-size: 14px; &nbsp; &nbsp; display: none; &nbsp; &nbsp; color: white; &nbsp; &nbsp; background-color: #54C3E8; &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; border-radius: 3px; } #page-toolbar .pages .availablepage .duplicate { &nbsp; &nbsp; top: 218px; &nbsp; &nbsp; right: 5px; &nbsp; &nbsp; font-size: 14px; &nbsp; &nbsp; display: none; &nbsp; &nbsp; padding: 5px; &nbsp; &nbsp; background-color: #54C3E8; } #page-toolbar .availablepage .chooseablepage .ui-droppable { &nbsp; &nbsp; margin-top: 300px; &nbsp; &nbsp; margin-left: 0px; &nbsp; &nbsp; max-width: 30px; &nbsp; &nbsp; max-height: 30px; } #page-toolbar .pages .availablepage img.pagethumb { &nbsp; &nbsp; margin-top: 0px; &nbsp; &nbsp; max-width: 40px; &nbsp; &nbsp; max-height: 40px; }

Oooh! Was this your "abandoned project," Keith?

Yes. I could never get the flag to work on the vertical menu. Kirill kindly verified that it was a dead end.

Keith, you could try use&nbsp; transform: rotate(-90deg); istead of writing-mode: vertical-rl; It will rotate span in the other way

keithcurtis said: Here is the code that I came up with, that moves the bubbles to below the toolbox (to keep the play area as squared as possible, and because I was accidentally calling up the toolbox flyout menus). It also moves the edit boxes to the right of the circles for better access. Also, I removed the bit that was enforcing a type size, so that 3 digit HP would display completely. [...] Thanks Keith! I've re-jigged the code from this, admittedly mostly to personal preference. The biggest change is probably re-ordering the buttons vertically to match the bars in the edit window: Code: /* * Based on: <a href="https://app.roll20.net/forum/permalink/8734330/" rel="nofollow">https://app.roll20.net/forum/permalink/8734330/</a> * Changes include: * + Positioning the #radial-menu as the top-left and repositioning everything else from that (less negative left values/chance to appear outside the viewport) * + Forced the #radial-menu to display continually, preventing it from flickering when its position would normally be being recalculated * + Ordering the buttons vertically to match the bars * + Returning to the original colours for the circle buttons and the token marker selection menu * + Converting --color-yellow to rgb values, allowing it to be used with rgba() for a muted active marker background */ #radial-menu { --color-text-disabled: #888994; --color-element-bg: white; --color-yellow: 255,204,0; display: block !important; left: 15px !important; position: fixed; top: 330px !important; } #radial-menu .button { box-shadow: 0 0 5px var(--color-text-disabled); } #radial-menu .button.button-1, #radial-menu .button.button-2, #radial-menu .button.button-3, #radial-menu .button.button-4, #radial-menu .button.button-5 { left: 0; } #radial-menu .button.button-1, #radial-menu .button.button-2 { background: var(--color-element-bg) !important; } #radial-menu .button.button-1 { border-radius: 0 0 25px 25px; padding-top: 4px; top: 180px !important; } #radial-menu .button.button-2 { border-radius: 25px 25px 0 0; top: 141px !important; } #radial-menu .button.button-3 { top: 0; } #radial-menu .button.button-4 { top: 45px; } #radial-menu .button.button-5 { top: 90px; } #radial-menu .markermenu.open { border-radius: 25px; height: 270px; width: 270px; } #radial-menu .markermenu .markercolor, #radial-menu .markermenu .markericon { border: 5px; } #radial-menu .markermenu .markercolor.active, #radial-menu .markermenu .markericon.active { background-color: rgba(var(--color-yellow),0.4); border: 0; border-radius: 5px; outline: 2px dashed rgb(var(--color-yellow)); outline-offset: -2px; } #radial-menu .markermenu .markercolor.dead { top: -2px; } #radial-menu .popupvalue { height: 30px; left: 45px; position: absolute; top: 5px; width: 55px; z-index: 1005; } #radial-menu .popupvalue input { font-size: 16px; width: 100%; }

Reordering the bubbles is a great idea.

Thanks! (I found I was putting numbers in the wrong circles otherwise... *facepalm* )

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; }

Andrew said: Thanks! (I found I was putting numbers in the wrong circles otherwise... *facepalm* ) Then try this! I'm not going to put this in my base style above, because it uses emojis. Emojis are different on every platform and may require a bit of tweaking to look just right on your system. Also, you may use your bars/circles for different things. Mine is in the order of shield-heart-shoe on the VTT, but is ordered in the code below as shoe-heart-shield. Here's the base code to play around with, you can see that the emojis I have chosen do not play well with roll20.net forum software.: #radial-menu .button.button-1:after { &nbsp; &nbsp; position: relative; &nbsp; &nbsp; content: ""; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; top: -132px; &nbsp; &nbsp; left: -19px; &nbsp; &nbsp; border-radius: 25px 25px 25px 25px; &nbsp; &nbsp; padding: 3px; &nbsp; &nbsp; background-color: #000; } #radial-menu .button.button-2:after { &nbsp; &nbsp; position: relative; &nbsp; &nbsp; content: "❤️"; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; top: -138px; &nbsp; &nbsp; left: -19px; &nbsp; &nbsp; border-radius: 25px 25px 25px 25px; &nbsp; &nbsp; padding: 3px; &nbsp; &nbsp; background-color: #000; } #radial-menu .button.button-3:after { &nbsp; &nbsp; position: relative; &nbsp; &nbsp; content: "️"; &nbsp; &nbsp; font-size: 16px; &nbsp; &nbsp; top: -90px; &nbsp; &nbsp; left: -19px; &nbsp; &nbsp; border-radius: 25px 25px 25px 25px; &nbsp; &nbsp; padding: 3px; &nbsp; &nbsp; background-color: #000; } To find just the right emoji, I would suggest using emojipedia.org It will also show you what the character will look like on other platforms, in case you share with your group.

It seems to hp section want some z-index value changes (after background of ❤️):) You could experiment with shadows instead of filled background. It will add some "floating-above" effect. For example, try to change background-color to: text-shadow: 0px 0px 3px #000, 0px 0px 5px #000;

Yeah, I considered experimenting with Z order, but I was excited and wanted to share. I did some experimentation with text shadow, but didn't get results, not understanding the syntax. Again, wanted to post. :D

I think I prefer the circles. The text shadow gives them a fuzzy look, and if I can maintain a consistent contrast against all map backgrounds, I think that will aid visual memory. Unfortunately, z-index didn't seem to do anything, even with ridiculous values. Am I missing something with that?