How to change the buttons color in Sugarcube 2 save menu?

Question

I’m sure this is easy to do, but for the life of me, I cannot find out how to change the blue/gray buttons to another color.

Answer 1

If you use your web-browser's built-in Developer Tools to Inspect the HTML used to display the Save and Delete buttons on the Saves Dialog you will see it looks something like the following.

<tr>
  <td>1</td>
  <td>
    <button id="saves-save-0" class="save ui-close" type="button" tabindex="0" aria-label="Save Slot 1" title="Save Slot 1">Save</button>
  </td>
  <td class="empty">
    <em>— slot empty —</em>
  </td>
  <td>
    <button id="saves-delete-0" class="delete" disabled="">Delete</button>
  </td>
</tr>

 If you select each of the two button elements in the Elements tab (or whatever your web-browser calls it) you will see that their associated colour related CSS looks something like the following.

button {
  color: #eee;
  background-color: #35a;
  border: 1px solid #57c;
}

button:disabled {
    background-color: #444;
    border: 1px solid #666;
}

Adding similar CSS to your story's stylesheet tagged Passage will allow you to modify the colours.

NOTE: The button element CSS selectors also effects buttons not in the Save Dialog, if you want to only target those buttons then alter the selectors like so:

#saves-list button {
  color: #eee;
  background-color: #35a;
  border: 1px solid #57c;
}

#saves-list button:disabled {
    background-color: #444;
    border: 1px solid #666;
}

 

Comments

That's great. The code work perfectly. Thanks.