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 2: The Stylening!

Oh. This is a thread. Somehow I missed it. I'll share some things just so I don't feel left out. Query input fits to popup. .ui-dialog-content.ui-widget-content > p > strong + input {width: 100% !important; width: -moz-available !important; width: -webkit-fill-available !important; width: fill-available !important;} Actually, nobody probably needs the rest of those snippets. I'll post some more things later. I'm revamping PFC with more modern css but I don't remember how far along that project is.
1579121069
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Thanks Mik and Noon (Sounds like a buddy cop movie). If either of you decide to upload these to userstyles.org, post the link and I'll put it in the index post.
1579800608
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Edited the  Hide Roll20 Interface style to account for new zoom slider controls. If you install using the Userstyle link , you will receive automatic notification of changes. Most styles have the install link in the top index post .
1580507622
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Show Time Stamps in Chat Archive This one was pulled from a forum post made by  Noon . I take no credit. However, I have tested it and it does work. Time stamps are not normally displayed in chat archives. This style makes them visible Code: .textchatcontainer .message .tstamp {     display: block !important; } [Install]
1580583763

Edited 1588034796
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Tweaks for D&amp;D 5e by Roll20 (OGL) sheet Edited 2-25-20 to keep up with sheet changes Edited 3-31-20 to fix expanded spell display Edited 4-27-20 with tweaks by Ludovic This style makes numerous quality of life tweaks to the official Roll20 sheet. CAUTION: Since the sheet is under constant development, parts may become superfluous or detrimental over time. So this style is made modular with each section commented so that users can adjust display.&nbsp; There are two main sections. Core A few tweaks have been made to the front page to tighten it up and to reduce the size of the add and edit buttons at the bottom of each list. Spell Sheet Lots of changes here. This section: Enlarges the word Cantrips on Spell Sheet to match spell slot sizes Tightens the list overall Tightens space between spell levels Moves innate field up to spell name line (previously it had its own line—huge waste of space) Fixes display of innate field (It now displays small in all caps to be more similar to the components) Changes Ritual tag to Green, making it easier to spot Changes Concentration tag to Blue, making it easier to spot Displays spell names in a more familiar D&amp;D style (This section can be easily tweaked) Changes Spell background to yellow in edit mode (to make it clear that it is in edit mode) Changes Spell background to parchment in display mode.&nbsp; (Remove background-image line if you want this to just be blue) Boldens spell name in display mode&nbsp; At the end of the style is a section I expect to be removed as soon as the death saves and hit dice sections are revisited. This&nbsp; last section just cleans those up. Before and after on spell sheet: The Code /* CORE PAGE */ /* Makes description of equipment legible and enlarges edit box */ .charsheet .sheet-item .sheet-subitem .sheet-subtextarea { line-height: 13px; font-size: 11px; height: 96px; } /*Tightens Features and Traits?*/ .charsheet .sheet-col3 .sheet-textbox .sheet-display { padding: 0px 0px 5px 10px; margin-bottom: 0px !important; } /* makes edit and add buttons less obtrusive */ .charsheet .repcontrol .repcontrol_add:before, .charsheet .repcontrol .repcontrol_edit:after { background-color: #fff; border: 1px solid #fff; color: #bbb; padding: 0px; } /* SPELL PAGE */ /* Enlarges the word Cantrips on Spell Sheet */ .charsheet .sheet-cantrips span { font-size: 14px; line-height: 14px; } /*tightens list*/ .charsheet .sheet-spell { margin-bottom: 0px; background-color: #fff; border-bottom: 1px solid #ddd; ; } /*Tightens space between spell levels*/ .charsheet .sheet-spell-container { min-height: 30px; } .charsheet .sheet-spell .sheet-display button[type=roll].sheet-spellcard { width : 85%; border-bottom: 0px solid #fff; } .sheet-row .charsheet .sheet-3colrow { display: inline-block !important; vertical-align:bottom !important; } .ui-dialog .charsheet .sheet-row .sheet-details{ display:block !important; } /* Fixes display of innate field*/ .charsheet .sheet-spells .sheet-innate { color: #666; display: inline !important; font-size: 9px; text-transform: uppercase; font-weight: bolder; margin-left: -1px !important; } /* Gets rid of comma*/ .charsheet .sheet-innate:before { content: ", "; color: #fff; } /* Changes Ritual tag to Green */ .charsheet span.sheet-spellritual { background-color: #019515; } /* Changes Concentration tag to Blue */ .charsheet span.sheet-spellconcentration { background-color: #015e95; } /* Fancy spell names*/ .charsheet .sheet-spell .sheet-display span.sheet-spellname { font-size: 16px; font-family: "Times New Roman", Times, serif; text-transform: capitalize; font-variant: small-caps; color: #7e2d40; font-weight: bolder; margin-right: 0px; } /* Changes Spell background to yellow in edit mode */ .charsheet .sheet-spell .sheet-wrapper .sheet-options-flag:checked ~ .sheet-options { display: inherit; background-color: #f9f6ca; padding: 5px; margin: 10px 5px 10px 5px; } /* Changes Spell background to parchment in display mode */ .charsheet .sheet-spell .sheet-details { background-image: url('<a href="https://i.imgur.com/vjL1blE.jpg" rel="nofollow">https://i.imgur.com/vjL1blE.jpg</a>'); /*defaults to blue if image link is broken*/ background-color: #eafbff; padding: 5px; display: grid !important; margin: 10px 5px 10px 5px; } /* Boldens spall name in display mode */ .charsheet .sheet-spell .sheet-details span[name="attr_spellname"] { font-weight: bolder; } /* TEMPORARY SECTION */ /* START Remove these after sheet is fixed on death saves*/ div.sheet-hdice-dsaves-container:nth-child(4) &gt; div:nth-child(2) &gt; button:nth-child(3) { /* margin-top: 6px; */ margin-top: 0px !important; } div.sheet-row-container:nth-child(1) { margin-top: 2px !important; } div.sheet-row-container:nth-child(2) { margin-top: 2px !important; } .charsheet .sheet-hdice-dsaves-container input[type=number] { padding-top: 0px !important; } .sheet-roll-hitdie &gt; select:nth-child(3) { font-size: 1px !important; width: 25px !important; } .charsheet .sheet-subcontainer .sheet-roll-hitdie button[type=roll]{ margin-left: 15px; } /* END Remove these after sheet is fixed on death saves*/
1580585599

Edited 1663683085
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Talk to Yourself Banner Currently when using the "/talktomyself" command, the notification is chunky and in the way of other content. It could also be a touch more obvious. This fixes that problem. Before and After: Code: #textchat-notifier { position: relative; width:100%; top: 0px; text-align: center; background-color: rgb(162, 0, 0); color: rgb(255, 255, 255); padding: 0px 0px; font-size: .7em; line-height: 1.0em; font-weight: bold; text-transform: uppercase; border-radius: 10px 10px 10px 10px; border-top: 0; } .compendium-removed-expansions { display:none; } .textchatcontainer .by { font-weight: bold; position: relative; left: -5px; font-size:11px; color:#888; } #textchat-input { padding-top: 0px; border-top: 0px; } EDITED for changes to Roll20 code 9-22
1580588689
GiGs
Pro
Sheet Author
API Scripter
Thats a great idea. i dont use talktomyself very often, but when i do i often forget its on.
1580592211

Edited 1580592240
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Zoom Slider Tweaks For those who don't like the size of the new zoomslider, I offer two options. The first basically just makes it all a bit more compact and reduces the opacity. The second is an option to turn it off altogether. Reduced Zoomslider: Before: After: Code: .zoomplus, .zoomminus { &nbsp; &nbsp; font-size: 7px; } #zoomclick{ &nbsp; opacity: 0.8; } #zoomclick .btn { &nbsp; &nbsp; width: 2.8px; &nbsp; &nbsp; height: 5px; &nbsp; &nbsp; padding-left: 8px; } #zoomslider a.ui-slider-handle.ui-state-default.ui-corner-all { &nbsp; &nbsp; left: -.5em; &nbsp; &nbsp; height: 10px; &nbsp; &nbsp; width: 16px; } .zoomValue { &nbsp; &nbsp; font-size: 12px; &nbsp; &nbsp; font-family:"arial black"; &nbsp; &nbsp; background-color: #22222247; &nbsp; &nbsp; padding: 0px; } And if you want to get rid of it altogether, use this: #zoomclick{ &nbsp; display: none !important; }
1582073381

Edited 1582074034
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Snippet: Hide Coins This is just a snippet, written for RavenKnight. All it does is hide the coin images on the OGL sheet: .sheet-container:not(.sheet-npc) .sheet-coin .sheet-label { background-image:none !important; }
Hello, I bring a modest stone, a simple line of css to correct a small error in the character sheet "D&amp;D 5E by Roll20", in the code of "Tool Proficiencies". Blocking access to cadena and add. Before After Correctif pour&nbsp;D&amp;D 5E by Roll20 .sheet-tool_proficiencies .sheet-label { position: relative !important; } Nothing extraordinary, but it can save the game.
1582126439
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Looks like it's very helpful in games where the translation text causes a problem. Thanks.
Keith, or anyone else, have you noticed an issue with stylish loading your styles extremely slow (sometimes causing the thick black boxes to appear I believe)? Is there any way around this? Maybe loading the styles you want into one big .js file and manually adding it to stylish?
1582679634
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Display issues have been reported with the advent of today's sheet update ( D&amp;D 5th Edition by Roll20 )&nbsp;. I don't think it is related to Stylus, but it's easy enough to test by toggling off all styles. BTW, I don't know if that was a typo, but if you have a choice between Stylus and Stylish, I would recommend Stylus. Stylus was created in response to&nbsp; reports of privacy violation by Stylish.
Good evening, I published the code on Stylish to make things easier. <a href="https://userstyles.org/styles/181067/roll20-correctif-pour-d-d5e-translated-sheet-fix" rel="nofollow">https://userstyles.org/styles/181067/roll20-correctif-pour-d-d5e-translated-sheet-fix</a> Thanks for the reply
1584151136
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Install link added.
1584319871

Edited 1595438391
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Here's two styles I find useful for interacting with the sheet sandbox, Game Settings page, and API script pages to move the save (and disable/delete) buttons to a more easily accessible position, and keeping them accessible. Sheet Sandbox &amp; Game Settings Button Mover Set to apply to URLS starting with:&nbsp; <a href="https://app.roll20.net/sheetsandbox/settings" rel="nofollow">https://app.roll20.net/sheetsandbox/settings</a> and&nbsp; <a href="https://app.roll20.net/campaigns/campaignsettings" rel="nofollow">https://app.roll20.net/campaigns/campaignsettings</a> #settingsform{ display:grid; grid-template-rows:auto; } #settingsform &gt; hr{ display:none; } #settingsform .btn.btn-primary.primarysubmit{ grid-row-start:1; place-self:start; position:sticky; top:0; left:0; } Before &amp; After: API Scripts button mover Set to apply to URLS starting with:&nbsp; <a href="https://app.roll20.net/campaigns/scripts" rel="nofollow">https://app.roll20.net/campaigns/scripts</a> .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; } Before &amp; After: EDIT: Added information on what URLs they should apply to EDIT: Added stickiness to the enable script button
Those are fantastic, especially the second one! Thanks for sharing!
1584321168
GiGs
Pro
Sheet Author
API Scripter
Yeah, that second one is so good.
Very helpful thread. Thank you
keithcurtis said: Tweaks for D&amp;D 5e by Roll20 (OGL) sheet This style makes numerous quality of life tweaks to the official Roll20 sheet. CAUTION: Since the sheet is under constant development, parts may become superfluous or detrimental over time. So this style is made modular with each section commented so that users can adjust display.&nbsp; Something seems to have changed with the OGL sheet (or something) to affect this one in the past couple of days. Now in the spell section, all the spell names have the last 3 letters cut off and replaced with an ellipsis. Also, the spacing seems to have grown between the spells. I tried reducing the font size of the spell names, and although it did reduce the font size it didn't resolve the problem at all. See my screen capture below.
1585177268
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Thanks for the heads up. I'll have to see what I can do to fix it tonight.
1585195773
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
It's mostly fixed. The expanded spell has some line break issues that I can't seem to resolve without breaking the innate field that displays after the spell name. The former is readable, and I think people tend to look more at the collapsed spell, so that's what I gave priority to. If anyone who really knows CSS wants to look at it, I wouldn't complain.
Thanks; that's much better!
This should be published by roll20 to every new user!&nbsp; I just installed a bunch of these and it's AMAZING!!!&nbsp; I have so much more screen now!&nbsp; You guys are the absolute best.&nbsp; If I were a billionaire I would totally buy you houses.
1585265566
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Quick, everyone buy lottery tickets for Omegaman! It's a foolproof plan!
1585725041
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Fixed the expanded spell display on the D&amp;D 5e by Roll20 (OGL) sheet style.
1586123053
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hide Toolbar Buttons Use this one with caution. The intent is to use this to hide specific toolbar buttons, but the default installation hides ALL buttons. Install and then delete the code blocks for the buttons you wish to keep . If you install and do not edit the code, this will hide every button on the toolbar. There are better ways to do that . The use case for this is for people who do not want or need particular buttons, such as the dice roller, or the help button: Example, to hide the dice roller and help button as shown in the screenshot, you would remove all code blocks but these: #diceroller { display: none !important; } #helpsite { display: none !important; } Full Code: #select { &nbsp; display: none !important; } #editinglayer { &nbsp; display: none !important; } #drawingtools { &nbsp; display: none !important; } #fxtools { &nbsp; display: none !important; } #zoompanel { &nbsp; display: none !important; } #measure { &nbsp; display: none !important; } #fogcontrols { &nbsp; display: none !important; } #startrounds { &nbsp; display: none !important; } #diceroller { &nbsp; display: none !important; } #helpsite { &nbsp; display: none !important; } Installation instructions and link in top post.
1587991301
The Aaron
Roll20 Production Team
API Scripter
Hide the broken Aura Tool-tips that are currently showing up when editing forum posts. @-moz-document url-prefix("<a href="https://app.roll20.net/forum/post" rel="nofollow">https://app.roll20.net/forum/post</a>"), url-prefix("<a href="http://app.roll20.net/forum/post" rel="nofollow">http://app.roll20.net/forum/post</a>") { .ui-tooltip.ui-widget.ui-corner-all.ui-widget-content { display: none !important; } } Hopefully this gets fixed sometime soon.
I recently installed Hide Roll20 Interface and bumped into a problem. When hiding playerzone, it hides the macro bar as well. I can't seem to figure out the fix to this as the IDs for avatars and users are randomly generated upon launching the game. I'd like to keep my macro bar, but I really don't need to see the other players...
1587997013
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Try this: #playerzone .player { display: none !important; }
Note that the player avatars are needed to use the Split the Party feature (<a href="https://wiki.roll20.net/Page_Toolbar#Split_the_Party" rel="nofollow">https://wiki.roll20.net/Page_Toolbar#Split_the_Party</a>). Just remember that you can just temporarily turn off styles in Stylus, move players, then turn the style back on.
keithcurtis said: It's mostly fixed. The expanded spell has some line break issues that I can't seem to resolve without breaking the innate field that displays after the spell name. The former is readable, and I think people tend to look more at the collapsed spell, so that's what I gave priority to. If anyone who really knows CSS wants to look at it, I wouldn't complain. Hi Keith, This slight CSS modification is correcting the weird effect at the end of the spell name and the ellipsis is activated for long spell names only : /* Fixes display of innate field*/ .charsheet .sheet-spells .sheet-innate { &nbsp;&nbsp;&nbsp; color: #666; &nbsp;&nbsp;&nbsp; display: inline !important; &nbsp;&nbsp;&nbsp; font-size: 9px; &nbsp;&nbsp;&nbsp; text-transform: uppercase; &nbsp;&nbsp;&nbsp; font-weight: bolder; &nbsp;&nbsp;&nbsp; margin-left: -1px !important; } .charsheet .sheet-spell .sheet-display button[type=roll].sheet-spellcard { &nbsp;&nbsp;&nbsp; width : 85%; &nbsp;&nbsp;&nbsp; border-bottom: 0px solid #fff; }
1588010160
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Those are both good fixes, thanks. I need to do a little bit more work on this style before I update it, though. I've noticed that it breaks a few things for NPC display. Works great for players, though.
keithcurtis said: Those are both good fixes, thanks. I need to do a little bit more work on this style before I update it, though. I've noticed that it breaks a few things for NPC display. Works great for players, though. A comma at the wrong place ? .sheet-row .charsheet .sheet-3colrow { display: inline-block !important; vertical-align:bottom !important; }
1588034677
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That did it! Thanks for those bits. I have updated the master style.
keithcurtis said: Try this: #playerzone .player { display: none !important; } That worked perfectly, thank you!
1588380494
mrianmerry
Pro
Sheet Author
Hi all, fantastic work contained in this thread, and I've almost immediately started benefitting from some of these (the talk to myself change is divine, Keith!) &nbsp;but also have come over to post an issue I spotted with one of them. The&nbsp; Macro Editing Tweak &nbsp;by&nbsp; Mike deBoston &nbsp;is the style that got me to actually install Stylus, as I have some extensive macro lists and the editing window is a nightmare. But I noticed that it warps the macro quick-bar as well, both with and without the compact macro bar style included. Here's a screenshot explaining it with a thousand words: (toggle-insanity just turns "talk to myself" on and off; I swear it's harmless!) Any ideas what can be done to remedy this? (I'm not even basic-level competent at CSS, or I'd take a crack at editing the tweak myself...)
1588389665
Mike deBoston
Compendium Curator
It doesn't do that on mine. The issue is the large gray box around ability-check? Or the larger translucent box below the token macro bar?
1588394861
mrianmerry
Pro
Sheet Author
Yeah, each of the macros gets the large box around it when the mouse hovers over, and the smaller blue-and-white-outline square to the right of the translucent area appears with the style on. It's not really a problem, as I can ofc just turn the style off while I'm playing
1589696564

Edited 1589740300
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>
Does anyone have a tweak that will change the default width of the Status marker icon menu in-game?&nbsp; Ever since the Custom Icons makeover, I have problems with it going off the bottom edge of the screen for any tokens that are in the lower portion of the screen, and then I have to scroll everything up in order to access them.
1589728111

Edited 1589728218
Anthony said: Does anyone have a tweak that will change the default width of the Status marker icon menu in-game?&nbsp; Ever since the Custom Icons makeover, I have problems with it going off the bottom edge of the screen for any tokens that are in the lower portion of the screen, and then I have to scroll everything up in order to access them. If you mean status chooser in radial menu (set your values): #radial-menu &nbsp; .markermenu.open &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width :&nbsp; 230 px ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height :&nbsp; 225 px ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius :&nbsp; 15 px ; &nbsp;&nbsp;&nbsp;&nbsp;}
1589731592
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I don't think so. It appears to be drawn by Canvas, like the rest of the VTT elements (ex: tokens, maps,&nbsp; and bubbles), and doesn't lie on top like the toolbars and other interface controls. I don't think it can be altered by tweaking a CSS setting, and would probably require something like a specialized browser extension.
1589734791

Edited 1589735127
Radial menu&nbsp; - html+css. You can change it. Look at my variant.
Kirill S. said: If you mean status chooser in radial menu (set your values): #radial-menu &nbsp; .markermenu.open &nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width :&nbsp; 230 px ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height :&nbsp; 225 px ; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius :&nbsp; 15 px ; &nbsp;&nbsp;&nbsp;&nbsp;} That's it!!&nbsp; Thank you!&nbsp; Now....what did you do to get such nice status bubbles and radial menus?
This code should work... You can use Ruda font from google fonts (@import or @font-face or simply install it to your OS)&nbsp; or set your choise in variable --font-number #radial-menu { --color-bg-dark: #1c1d28; --color-text-disabled: #888994; --color-element-bg: #373a52; --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); left: 95px; } #radial-menu .button.button-2 { top: -5px; } #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 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: 24px !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: 230px; 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; }
1589738750
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
That's cool! I stopped checking as soon as I realized I couldn't right-click-&gt;Inspect on it.
1589742369
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
I imagine you defined it elsewhere in your dark style, but I think for that style above to stand alone, you need to add something like: &nbsp; &nbsp; &nbsp; &nbsp; --color-text-primary: #fff; to your color definitions?
1589776674

Edited 1589776995
keithcurtis said: I imagine you defined it elsewhere in your dark style, but I think for that style above to stand alone, you need to add something like: &nbsp; &nbsp; &nbsp; &nbsp; --color-text-primary: #fff; to your color definitions? I think, i missed that var above, sorry :) --color-text-primary : # ecedf6 ;
Kirill S. said: This code should work... You can use Ruda font from google fonts (@import or @font-face or simply install it to your OS)&nbsp; or set your choise in variable --font-number #radial-menu { --color-bg-dark: #1c1d28; --color-text-disabled: #888994; --color-element-bg: #373a52; --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); left: 95px; } #radial-menu .button.button-2 { top: -5px; } #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 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: 24px !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: 230px; 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; } Hi Krill, I have adapted your code to suite my style better but can't figure out how to get the radial bar input boxes to pop up to the side of the radial bars. Any ideas? My code is below. #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 .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: 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; } These are the input boxes I mean: