Was wondering if it's possible to style the UI.saves script in Sugarcube2

Question

Hello all. 

Sorry for this question because I'm pretty sure the solution is out there somewhere. I just can't seem to find/solve this one on my own no matter how hard I try. Lack of sleep might have something to do with it. 

I was wondering if it's possible to style the link and hover colours for the save script so it looks the same as the rest of my menu:

<<link "Save/Load">><<script>>UI.saves()<</script>><</link>>

I've blundered my way through some old code to change the colour of my other links as you can see below:

<a class="menus" data-passage="OPTIONS">Options</a>
<a class="menus" data-passage="CONTROLS">Controls</a>
<a class="menus" data-passage="ABOUT">Credits</a>

Any help would be appreciated. Thanks!
note: I'm using Twine two and Sugarcube 2.21.0 for my current project.

 

Answer 1

The Built-in Stylesheets section of the SugarCube documentation includes a link to ui-dialog's default CSS.

If you open the SAVES dialog within your story you can use your web-browser's built-in Web Developer Tools to Inspect the HTML content of that dialog. It will look something like the following.

<div id="ui-dialog" role="dialog" aria-labelledby="ui-dialog-title" class="open" style="left: 607px; right: 607px; top: 16px; bottom: 16px;">
  <div id="ui-dialog-titlebar">
    <h1 id="ui-dialog-title">Saves</h1>
    <button id="ui-dialog-close" class="ui-close" aria-label="Close"></button>
  </div>
  <div id="ui-dialog-body" class="saves">
    <table id="saves-list">
      <tbody>
        <tr>
          <td>1</td>
          <td><button id="saves-save-0" class="save ui-close" type="button" aria-label="Save Slot 1" title="Save Slot 1">Save</button></td>
          <td class="empty">•&nbsp;&nbsp;•&nbsp;&nbsp;•</td>
          <td><button id="saves-delete-0" class="delete" disabled="" aria-disabled="">Delete</button></td>
        </tr>
        ...Other Slots...
      </tbody>
    </table>
    <ul class="buttons">
      <li><button id="saves-export" class="ui-close" type="button">Save to Disk…</button></li>
      <li><button id="saves-import" type="button">Load from Disk…</button></li>
      <li><button id="saves-clear" disabled="" aria-disabled="">Delete All</button></li>
    </ul>
    ...hidden element...
  </div>
</div>

...and you will be able to determine which element IDs and CSS classes are used to effect the different parts that make up that dialog's HTML structure. You can use this information to create CSS rules within your project's Story Stylesheet area.

eg. If you wanted to change the background colour of all the 'Save' buttons (CSS class .save) in the saves list (element ID #saves-list) to green...

#saves-list .save {
    background-color: green;
}

 

Comments

Thanks for the quick response greyelf! Sorry that I'm only replying now.
Your reply is very helpful but I don't think I managed to clearly state what I'm trying to do. I know how to style the UI itself. My problem is that I want to simply change the colour for the "Save/Load" text itself. As in I want the text (normal and hovered over) to be a different colour to all the other links in my game. I'm just making a starting menu is all.

I have no trouble changing the colour of the links I've created so far but I simply cannot figure out how to change the appearance of this link no matter what I do. 'Save/Load' always just takes on the appearance of the default links I've set up in my project.

ps. Sorry if I'm missing something obvious in your answer. It's very possible.