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

Sylus Userstyles not working correctly

1735348943

Edited 1735351190
Hey there all. New DM just trying to refine my experience a bit. I discovered this thread and was stoked to see so many improvements to things that were bothering me. Unfortunately, none of the user styles I've used work as intended. They work, but not they way they are supposed to. Example, I turn on tiny turn on order and the text gets smaller, but the spacing remains the same. This is with the style active. and Here is with it off. so its smaller, but not what was pictured on the forums. More compact Macro bar makes the macros larger instead of smaller.  I thought it might be a Jumpgate issue, but the same thing happens with those.  Any ideas folks? Thanks!
1735351024
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
Hi Darrin! Try posting your images again, but by uploading, not copying and pasting. Some display classes changed with Jumpgate, but without examples, it's hard to tell which ones are giving you issues.
Hey Keith, thanks for taking a look. 
What browser are you using? It’s possible there could be differences between Chrome and Firefox. 
Chrome. Ill setup Firefox and see if they work. Thanks
This is it on Firefox. Firefox does seem to load Roll20 faster, but I think it doesn't fix the style issue. Chrome on the left, FF on the right. It looks cleaner, so i'll keep it, but should it be more compact? Thanks for the assist here. 
Yeah one of the unfortunate side effects of using something like Stylus to overwrite CSS on Roll20 is that when Roll20 updates their CSS, it might break the Stylus code.  In this case, it looks like Roll20 has made a change to the div class for the initiative window and added additional class identifiers, which is giving the Roll20 CSS a higher priority than the Stylus style I had before.  Changing each #initiativewindow to #initiativewindow.has-tokens appears to fix this, but I haven't gone through and done a deep dive of all of the code from that post. /* Turn Tracker */ #initiativewindow.has-tokens {     padding: 0px 0px;     overflow-x: auto } #initiativewindow.has-tokens ul li {     padding: 0px 1px 0px 0px;     min-height: 15px; } #initiativewindow.has-tokens ul li img {     max-width: 20px;     max-height: 18px;     padding: 0px 3px 0px 0px; } #initiativewindow.has-tokens ul li span.initiative {     font-size: 16px;     padding: 0px;     min-height: 12px } #initiativewindow.has-tokens ul li span.name {     font-size: 12px;     padding-top: 1px } #initiativewindow.has-tokens ul li:first-of-type img {     max-width: 32px;     max-height: 30px;     padding: 0px 3px 0px 0px; } #initiativewindow.has-tokens ul li:first-of-type span.name {     font-weight: bold;     font-size: 14px;     color: darkgreen; } #initiativewindow.has-tokens ul li:first-of-type span.initiative {     font-size: 20px;     color: darkgreen;     padding: 5px 0px 0px 0px } #initiativewindow.has-tokens input {     font-size: 14px;     height: 10px;     max-width: 15px;     top: 0px;     text-align: right; } .ui-dialog-titlebar {     padding: 1px 5px;     font-size: 8px; } .ui-dialog .ui-dialog-title {     margin-top: 0px;     margin-bottom: 0px;     padding: 0px } .ui-dialog .ui-dialog-titlebar-close {     top: 50%;     width: 19px;     margin: -10px 0 0 0;     padding: 1px;     height: 6px;     font-size: 7px;     line-height: 7.5px; } .ui-dialog .ui-dialog-titlebar-close span {     display: block;     margin: 1px;     text-indent: 9999px } .ui-dialog .ui-dialog-buttonpane {     border-width: 1px 0 0 0;     margin: .05em 0 0 0;     background-color: #f5f5f5;     padding: 1px 10px 1px; } .ui-dialog .ui-dialog-buttonpane button {     margin: .05em .04em .05em 0; } /* Hide Empty Turn Tracker Message*/ ul.characterlist > li {     display: none; }
1735455972
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
FWIW, here is the tracker CSS code I currently use on Jumpgate: #initiativewindow {     padding: 1px 1px;     overflow-x: auto } #initiativewindow ul li {     padding: 0px; } #initiativewindow ul li {     min-height: 15px } #initiativewindow ul li img {     max-width: 20px;     max-height: 18px; } #initiativewindow ul li span.initiative {     font-size: 16px;     padding: 0px;     min-height: 12px } #initiativewindow ul li span.name {     font-size: 14px;     font-weight:bold;     padding-top: 0px;     padding-left: 4px; } #initiativewindow input {     font-size: 12px;     height: 12px; } .initiativedialog .ui-dialog-titlebar {     padding: 1px 5px;     font-size: 12px;     background-color:black; } .initiativedialog .ui-dialog-title {     margin-top: 1px;     margin-bottom: 1px;     padding: 0px;     color:white; } .initiativedialog .ui-dialog-titlebar-close {     top: 50%;     width: 19px;     margin: -30px 0 0 0;     padding: 1px;     height: 6px;     font-size: 7px;     line-height: 7.5px;         color:white;     background-color:white; } .initiativedialog .ui-dialog-titlebar-close span {     display: block;     margin: 1px;     text-indent: 9999px } .initiativedialog .ui-dialog-buttonpane {     border-width: 1px 0 0 0;     margin: .05em 0 0 0;     background-color: var(--dark-background, #f5f5f5);     padding: 1px 12px 0px 1px; } .initiativedialog .ui-dialog-buttonpane button {     margin: .05em .04em .05em 0; } .initiativedialog .ui-dialog-titlebar-close{ top:150%;     height: 18px; } .initiativedialog .bigbuttonwithicons{     width:15px; } #initiativewindow ul li .controls{     height:16px; } #initiativewindow.has-tokens ul li{     padding:2px 0px 2px 2px;         min-height:18px !important; } And a screenshot (currently in Dark Mode):
Bingo! Hey thanks for the rescue! That CSS change broke a lot of those styles, what a bummer. Of the handful I tried to get working, all changed something, but it was never as designed. Thanks a bunch!
Even with Jarren's fix the top row was still large. The style here, keithcurtis, worked perfectly. thanks again guys. keithcurtis said: FWIW, here is the tracker CSS code I currently use on Jumpgate: #initiativewindow {     padding: 1px 1px;     overflow-x: auto } #initiativewindow ul li {     padding: 0px; } #initiativewindow ul li {     min-height: 15px } #initiativewindow ul li img {     max-width: 20px;     max-height: 18px; } #initiativewindow ul li span.initiative {     font-size: 16px;     padding: 0px;     min-height: 12px } #initiativewindow ul li span.name {     font-size: 14px;     font-weight:bold;     padding-top: 0px;     padding-left: 4px; } #initiativewindow input {     font-size: 12px;     height: 12px; } .initiativedialog .ui-dialog-titlebar {     padding: 1px 5px;     font-size: 12px;     background-color:black; } .initiativedialog .ui-dialog-title {     margin-top: 1px;     margin-bottom: 1px;     padding: 0px;     color:white; } .initiativedialog .ui-dialog-titlebar-close {     top: 50%;     width: 19px;     margin: -30px 0 0 0;     padding: 1px;     height: 6px;     font-size: 7px;     line-height: 7.5px;         color:white;     background-color:white; } .initiativedialog .ui-dialog-titlebar-close span {     display: block;     margin: 1px;     text-indent: 9999px } .initiativedialog .ui-dialog-buttonpane {     border-width: 1px 0 0 0;     margin: .05em 0 0 0;     background-color: var(--dark-background, #f5f5f5);     padding: 1px 12px 0px 1px; } .initiativedialog .ui-dialog-buttonpane button {     margin: .05em .04em .05em 0; } .initiativedialog .ui-dialog-titlebar-close{ top:150%;     height: 18px; } .initiativedialog .bigbuttonwithicons{     width:15px; } #initiativewindow ul li .controls{     height:16px; } #initiativewindow.has-tokens ul li{     padding:2px 0px 2px 2px;         min-height:18px !important; } And a screenshot (currently in Dark Mode):
1735521121
keithcurtis
Forum Champion
Marketplace Creator
API Scripter
It's probably time for an updated (Jumpgate) Stylus thread...