+1 vote
by (710 points)

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.sad

1 Answer

+1 vote
by (149k points)
selected by
 
Best answer

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;
}

 

by (710 points)
That's great. The code work perfectly. Thanks.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...