[Stylish] 4-Column Initiative with 1 column for editing!

I've updated my stylish CSS changes to make the Turn Order 4 columns, but when you go to manipulate it, it reverts to a single column. #initiativewindow .characterlist     {     -moz-column-count: 4;     -moz-column-gap: 20px;     -webkit-column-count: 4;     -webkit-column-gap: 20px;     column-count: 4;     column-gap: 20px; } #initiativewindow .characterlist:hover     {     -moz-column-count: 1;     -webkit-column-count: 1;     column-count: 1; } #initiativewindow .characterlist .token .name{ font-size: 1em !important; } #initiativewindow .characterlist .token .initiative{ font-size: 1em !important; background-color: #ccc;     font-weight: bold;     border-radius: .5em; } with a URL on the domain: app.roll20.net Cheers!

Screen cap?

Normally: On hover:

Looks like the header and the footer use a lot of real estate. How do you use this?

The stylish extension. Could probably cut those down a bit as well...

If it were possible to move buttons  next to Turn Order... that would be cool.

The Aaron said: The stylish extension. Could probably cut those down a bit as well... Poorly worded question. My bad. I realized it was for Stylish. I meant, how do you intend to use the horizontal layout in the game? How does it solve problems for you or serve you better than the vertical layout?

Ah!  I use it more as a player, but wanted it to work as a GM, which is why the hover.  in combats where there are more critters than can be listed without a scroll bar, it's nice to be able to see all of them.  I've also dropped the font size and spacing a bit, so it's more compact.

How about something like this? Quick and dirty, and still doesn't address the header/footer, but you get the idea: #initiativewindow { padding: 1px 1px; overflow-x: auto } #initiativewindow ul li { padding: 1px; } #initiativewindow ul li { min-height: 15px } #initiativewindow ul li img { max-width: 20px; max-height: 18px; } #initiativewindow ul li span.initiative { font-size: 18px; padding: 1px; min-height: 12px } #initiativewindow ul li span.name { font-size: 14px; padding-top: 1px } #initiativewindow input { font-size: 12px; height: 12px; } .ui-dialog-titlebar { padding: 1px 5px; font-size: 8px; } .ui-dialog .ui-dialog-title { margin-top: 1px; margin-bottom: 1px; padding: 1px } .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; }

keithcurtis said: How about something like this? Quick and dirty, and still doesn't address the header/footer, but you get the idea: Yes, please. Keep going. I like the reduced padding. Can we make the font size smaller; shrink or remove the words "Turn Order" and just have a small space for the X; and reduce the size of the footer area too?

/* Comment out this part to have single columns... */ #initiativewindow .characterlist     {     -moz-column-count: 4;     -moz-column-gap: 20px;     -webkit-column-count: 4;     -webkit-column-gap: 20px;     column-count: 4;     column-gap: 20px; } #initiativewindow .characterlist:hover     {     -moz-column-count: 1;     -webkit-column-count: 1;     column-count: 1; } /* ...down to here. */ #initiativewindow .characterlist .token .name{ font-size: 1em !important; } #initiativewindow .characterlist .token .initiative{ font-size: 1em !important; background-color: #ccc;     font-weight: bold;     border-radius: .5em; } #initiativewindow {     padding: 1px 1px;     overflow-x: auto;     position:relative; } #initiativewindow ul li {     padding: 1px;     white-space: nowrap; } #initiativewindow ul li {     min-height: 15px } #initiativewindow ul li img {     max-width: 20px;     max-height: 15px; } #initiativewindow ul li .controls { font-size: 15px;     padding: 1px;     } #initiativewindow ul li span.initiative {     font-size: 18px;     padding: 2px;     min-height: 12px;     z-index: 1000;     position:relative; } #initiativewindow ul li span.name {     font-size: 14px;     padding-top: 2px;                                             } #initiativewindow input {     font-size: 15px;     height: 15px; } .ui-dialog-titlebar {     padding: 2px !important; } .ui-dialog-titlebar .ui-dialog-title {     margin: 0 !important;     font-size: 10px;     line-height: 10px; } .ui-dialog-buttonpane {     margin: 0 20px 0 0 !important;     padding: 1px !important; } .ui-button {     font-size: 10px !important;     line-height: 10px !important;     padding: 1px 3px !important; } .ui-button.bigbuttonwithicons .ui-button-text {     font-size: 10px !important; } Here is what it looks like with those first two styles commented out so that it has a single column:

Note, this will also affect the size of headers and buttons on other dialogs, like dealing cards, designing decks, making rollable tables, etc..

Added/Updated:  Aaron's Roll20 Enhancement pack I'm starting to feel a little like a stalker... "All Hail The Aaron" lol

Hehehehehe! =D

Gold said: Yes, please. Keep going. I like the reduced padding. Can we make the font size smaller; shrink or remove the words "Turn Order" and just have a small space for the X; and reduce the size of the footer area too? Edited the post. It's a little more compact but I didn't want to break other elements, since the header and footer styles are used elsewhere... and I didn't want to horn in more on Aaron's thread. :)

Horn in all you like!  We're all in it for the same thing. =D