Styling how things look on the page is usually done by using CSS (Cascading Style Sheets) code on HTML elements on the page. You can set up CSS “rules” for how things display in your game’s “Stylesheet” section (found on the bottom menu when editing your story in its main “node” window).
For a simple example, if you want to keep all images from overflowing their containers, then in most cases the following should work:
img {
max-width: 100%;
}
That tells the browser to display <img> elements (the thing most images are displayed in) no wider than 100% of the size of their container. The “img” part is the “CSS selector”, which selects what part or parts are affected, and the stuff inside of the curly brackets says how they get affected.
The “cascading” part of CSS means that, if you then set the max-width of image elements again after that, the appearance settings would “cascade” down through the CSS to the last setting of that selector with the highest precedence, thus it would use the second value, instead of the first. In other words, in this code:
img {
max-width: 100%;
max-width: 300px;
}
the max-width: 100%; line would be ignored, because the max-width: 300px; (px = pixels) line overrides it, because it comes last. Thus, with the above CSS, the largest width an image could have is 300 pixels. (I should note that it’s best to only set the width -or- the height of an image, because if you set both then you may cause the image to be squashed or stretched if you don’t maintain the same aspect ratio.)
Don’t get overwhelmed by this, since there’s a fairly easy trick to learn CSS, and it’s built right into your computer’s web browser.
If you want to change how something is styled, simply open the page showing that element in your browser. Then, right-click on it and choose “Inspect Element”. That should bring up the “Developer Tools” windows, which will normally have the “HTML view” on the left, the “CSS view” on the right, and the “Console window” at the bottom.
Once you’re in the “Developer Tools” window, you can click on an element in the “HTML view” and then play around with the CSS affecting that element in the “CSS view”. If you click within the element.style { ... } part, and then either hit CTRL+SPACE or start typing the name of a property to change, it will show you a list of properties you can change. Hitting ENTER on one of the properties will then let you enter a value, and it should show you some example values you can choose from, though normally they won’t include numbers (like 100% or 300px). Some properties require multiple values to be set or only work under certain conditions. You can look them up in the CSS Reference to see how they all work.
Often, by simply playing around with the properties and their values, you can make things look the way you want. Once you’ve done that, if you only want to affect that one single element, look to see if it has an “id” attribute set in the “HTML” view. If it does, then you can copy your changes to the Stylesheet section, and use “#” followed by the ID to set that element’s style.
For example, if you’re using the SugarCube story format in Twine and you have a <<textbox>> in your passage like this:
<<textbox "$variableName" "Default text">>
then when you inspect that element in the browser it will use this HTML:
<input id="textbox-variablename" name="textbox-variablename" type="text" tabindex="0" class="macro-textbox">
You can see there that the ID of that element is textbox-variablename. So, if you wanted to make that one particular textbox wider, you might put something like this in your stylesheet:
#textbox-variablename {
min-width: 400px;
}
Also, if you looked at the CSS that was already on that textbox in the “CSS view” you’d see:
input[type=text] {
min-width: 18em;
}
So if you wanted to change the minimum width of all textboxes, then you’d want to override that in your Stylesheet like this:
input[type=text] {
min-width: 400px;
}
That will affect all <input> elements with the type attribute set to "text" (i.e. all textboxes).
Also, if you go back and look at the textbox’s HTML, you’ll see it has the macro-textbox class, which is added by SugarCube to SugarCube textboxes. Thus, If you wanted to change all SugarCube textboxes, you’d do this instead:
.macro-textbox {
min-width: 400px;
}
Putting the “.” in the front indicates that you’re referring to a class, in the same way that putting a “#” indicates that you’re referring to an ID. The difference between classes and IDs is that any ID should be unique on the page, while you can have as many elements on a page with the same class as you want.
So, what if you want to affect a particular element, but it doesn’t have an ID? In that case you’ll need to get clever. If that element is the only one of its type contained within an element with an ID, then you can create a CSS selector to find it that way. Alternately, you can add such a container yourself. For example, if you want to make one particular button look different, then you could put something like this in your passage:
<span id="test-button"><<button "Test">>
<<run alert("Tested!")>>
<</button>></span>
which, if you inspected it, would give you this HTML:
<span id="test-button"><button class="link-internal macro-button" type="button" tabindex="0">Test</button></span>
You could then style that particular button like this:
#test-button button {
background-color: #982e2e;
border-color: #c18282;
}
The #test-button button selector refers to the <button> element within the element that has the ID of test-button, so the code inside that will only affect that particular button, turning it red.
The more you play around with CSS, the better you’ll understand it. And with the “Developer Tools” window, you’ll be able to look at any web page and you’ll usually be able to see how they do whatever it is that you want to do, and then you can copy and tweak that code to make it work in your own game. (Note that some pages also use JavaScript for some fancier display tricks, so in those cases you’d have to dig into the JavaScript as well.)
Have fun! 