Access to HTML Template?

Authoring Twine
, ,
1

Twine2, sugarcube2

Moin.

Because I changed the style of ui sidebar, i.e.: in the HTML Output, I have to change the HTML Output everytime from my modified HTML. I simply cannot use the CSS because I deleted some classes (f.e. #ui-bar-stowed). Writing #ui-bar-stowed {display: none} in CSS in Twine is much a fiddle.

My question is: Is there a HTML Template? If so, where? In the Twine engine? Any possibility to access it?

Or: Is there a JavaScript Code to replace the with my own styling?

2

Hmm… there’s the StoryInterface passage?

1 Like
3

Josh Gram has supplied a link to a SugarCube feature that allows you to supply an alternative HTML structure in a specially named Passage. That will be used to display the contents of the Passage being visited, instead of the HTML structure that makes up the standard SugerCube User Interface.

But if you’re actually interested in replacing a Story Format’s HTML Template, which also contains that format’s JavaScript based runtime engine, thus effectively creating your own unique Story Format.

Then the Twine 2 Story Formats specification explains the basic structure of the JavaScript file that represents a Story Format, and the source property of that file that contains the HTML/CSS/JS “template” that is used when generating the Story HTML file (eg. the web-application)

2 Likes
4

Hey, thanks much to you both.

It is indeed that I wanted to change the source file. After much fiddling and trial and error, I have modified the format.js file (i.e. replaced <style id="style-core" type="text/css">and <style id="style-ui-bar" type="text/css"> and the changed parts in <script id="script-sugarcube" type="text/javascript"> with adding JS slashes until VSCode gave me no more errors) and could add to the Twine2 storyformat.

But. It is the same as before. I tried to reimport the html file, same. How come?

If there is no idea, then I will always copy-paste from a modified HTML to the HTML output.

5

You are creating your own custom Story Format, so it’s not a simple case of altering a couple of HTML elements or modifying some parts of the engine source of someone else’s format.js file.

You need to changed the identification information so that your custom format.js is different to the original format.js file you are using as a starting point, and I supplied a link to the specification that covers the structure of the Object that needs to be passed to the window.storyFormat() function call contained within your custom format.js file.

eg. Properties to change in your custom format.js file:

  • The “name” property in your custom format.js file needs to be unique, so not SugarCube.
  • The “author” property should make it clear who participated in its creation, so you and the author of SugarCube, whose work you are extending.
  • The “version” property should be reset, to make it clear that it’s not a release of SugarCube.

Once you have given your custom format.js file an unique identity, and assuming the contents of the “source” property is valid, then the Twine 2.x application should be able to add your custom Story Format.

1 Like
6

Thanks, Greyelf.
It is that I can add the story format. But the changes are not there, not shown.

7

What exactly do you mean by “not shown”?

  • Your custom Story Format is shown in the list of installed Story Formats, but the project isn’t using it when the Play or Test or Publish to File options are selected.
    If so, then open the project and use the Story > Details options to access the Story Format’s dropdown, and see which format is select.
  • Your project seems to use the custom Story Format when the Play or Test or Publish to File options are selected, but the generated Story HTML file doesn’t contain the altered HTML and/or JavaScript.
  • The generated Story HTML file contains the altered HTML and/or JavaScript, but the visual outcome you’re expecting when the Story HTML file is opened in a web-browser doesn’t happen.
  • something else…

So far you’ve vaguely stated you changed some of SugarCube’s core CSS and engine JavaScript, but have given no real details about what you’ve actually changed. So we have no idea what the outcome of those changes are meant to be.

note: Normally Authors use code in their project’s Story > Stylesheet and Story > JavaScript areas to override or enhance SugarCube’s defaults.

You’ve instead decided to modify the template itself, in un-explained ways, and have expected us to help you get those changes to work. Which we can’t do if we don’t know what those changes were.

1 Like
8

If so, then open the project and use the Story > Details options to access the Story Format ’s dropdown, and see which format is select.

Yeees! That was the last check to be done! Wow! Nice. Thanks so much for your incredible patience! Yes, it works perfectly now.

Sorry, if I was vague. I had also no better explanation. Next time I show screenshots?

You’ve instead decided to modify the template itself, in un-explained ways, and have expected us to help you get those changes to work. Which we can’t do if we don’t know what those changes were.

Yeah, that is because I tinkered directly on the browser and wanted/had to delete one class (the *stowed class) and other media screen sizes. I tried yesterday on the User Stylesheet, but it didn’t came out as I wished; in fact, I believe that the *stowed, especially the media screen defintions were interfering.
And also, I wanted to learn by “going deeper in the codes”.

9

I’m confused why you need to delete the “stowed” CSS class, as that class is only conditionally assigned to one element.

And if the reason was to remove the end-user’s ability to stow the left side-bar, then simply using CSS to “hide” the relevant button achieves that outcome.

#ui-bar-toggle {
    display: none;
}

I’m also confused why you wanted to remove the media screen size based queries, as their purpose is to adjust the standard User Interface in a Responsive way so it better suits those with smaller screens.

But if you really want to suppress their behaviours then you just need to craft CSS Rules that have the same media conditions and child selectors. And you can find examples of each of the media rules in the Built-in Stylesheets section of SugarCube’s CSS documentation. Specifically in the linked: core-display.css; core-passage.css; ui-dialog.css; and ui-bar.css files.