Styling Token Action buttons
I did mean to throw this in here a while back, but I forgatted. There was an earlier post about coloring token action buttons by order on screen, but this one will style them according to the actual macro they represent, so they'll look the same no matter which token you have selected.
Here's a plain old token action bar, with universals mixed in with some Ability macros for the selected token:
You can start out pretty simple, just apply a different color to Ability macros so they're easy to tell apart from Collections macros, and make them stand out a little better:
#secondary-toolbar .mode.tokenactions li button {
margin-right:5px;
border: 2px solid;
}
#secondary-toolbar .mode.tokenactions li button[data-type="ability"]{
background: orange;
Then we can get a bit more creative with an individual button. For that we need to grab the [data-macroid] property of the macro. This can be found in the HTML inspector under Secondary Toolbar, or in the Collections tab by right-clicking a macro and inspecting it. That needs to be pasted in to the CSS selector:
#secondary-toolbar .mode.tokenactions li button[data-macroid="-Lz7ZupXmab9veL6W_TG|-Lz7oZFllhfxI1XBh7KZ"] {
background:#704570;
color:white;
font-weight:bold;
font-size:18px;
text-shadow:none;
border: 3px solid;
border-radius:10px;
}
I couldn't find a way to change the order of the Collections macro buttons - although it is a list item, all the buttons are contained in the same list item. However, you can rename them with numbers at the start to get them in the right order, then rename them by using this, just changing the content: ""; line to your preferred label:
#secondary-toolbar .mode.tokenactions li button[data-macroid="-Lz7ZupXmab9veL6W_TG|-M--C3LjkYn5tx8nTwN9"] {
font-size:0px;
}
#secondary-toolbar .mode.tokenactions li button[data-macroid="-Lz7ZupXmab9veL6W_TG|-M--C3LjkYn5tx8nTwN9"]::after {
content: "Z comes first!";
font-size:14px;
vertical-align:middle;
}
We've now got a big old Initiative button, and a Collections macro apparently starting with 'Z' coming first in the list:
We can tidy up the order a bit - as Keith pointed out, turning off Alphabetical Sorting of Token Actions in the settings tab will shift all the Ability macros to the start of the sort order.
Then I guess you could get carried away if you wanted to, and make some crazy big buttons with an angry bear face!
#secondary-toolbar .mode.tokenactions li button[data-macroid*="-Lz7ZupXmab9veL6W_TG|-LzCO8q7tiF22Yobe-l4"] {
color: white;
background: #fff0 url('https://s3.amazonaws.com/files.d20.io/images/28445014/Z344L_EyhfFKEzQ_wHhM1g/original.png') center;
background-size: 150px 110px;
border:none;
height:100px
}
Anyways, it's a little clunky, and hardly worth the bother for a player. But if you've got quite a few GM universal token actions, it's an option to make them a little more readable.