Sugarcube's UI.alert()

thierry_st_malo · May 2017

Hi, all!

Following a post by Emily Short in her blog, I am moving from Inform 7 to Twine. After a number of problems with Harlowe (my mistakes, not Harlowe's) I have switched to Sugarcube and everything is much, much better for me.
I use the UI.alert() function to display a messagebox and that works fine; but the messagebox window's title is a huuuge "ALERT!". How can I change that window's appearance (title, font, color)?

Thanks in advance.

P.S : I am very interested in Sharpe's TwineRPG-SCE-004. I can run it in my browser, but my Twine 2.1.3 won't import it :-(

Chapel · May 2017

Since UI.alert() is working for you and you're on Twine 2.1.3, we can safely assume you're using SugarCube 2.18.0, but it's usually best to mention the version of the story format, too.

You can use the dialog API for a bit more control then you get via UI.alert().

For example:

<<link 'Click me!'>>
  <<script>>
    Dialog.setup('Hello!');
    Dialog.wiki(Story.get('greetings').processText());
    Dialog.open();
  <</script>>
<</link>>

Creates a link that, when clicked, opens a dialog box with the title 'Hello!' (probably will be rendered as 'HELLO!' because of SugarCube's default styling). The content inside that dialog box will be the content parsed from the passage 'greetings'.

To change other parts of the dialog box (you mention font and color), you'll want to use CSS.

The relevant styles and html structure can be found here and here.

To change the color of the background, you'd use #ui-dialog-body. That's also where you might want to change the font, depending on your needs. For example:

#ui-dialog-body {
  color: purple;
  background-color: white;
 }

Would cause the box to appear white with purple text.

You may also want to edit #ui-dialog-titlebar and #ui-dialog-title.

If you want to use CSS classes to control the dialog's styles instead of styling the whole system, you can add classes like so:

Dialog.setup('Hello!', 'hello');

Then set up your styles in the CSS using the class:

#ui-dialog-body.hello {
  /* style rules */
}

If you need some support with CSS, w3schools is excellent for beginners, and MDN is even better, but requires a bit more working knowledge.

convictedweirdo · May 2017

Firstly, welcome! Twine is an awesome platform once you get right into it. As for Sharpe's RPG demo, I think you'll have better luck importing it into Twine 1.4.3. That's how I managed to get it purring. Note however, much of that was written for sugarcube 1 and many new macros for sugarcube 2 have made some of the code obsolete.

As for the main question, I'll leave that to someone more adept as I've had no experience with that particular function.

#teamSugarCube

thierry_st_malo · May 2017

Thanks to you both; evrything's fine, now :-)

Howdy, Stranger!

Categories

Sugarcube's UI.alert()

Comments