How do I get CSS to work in Twine?

Question

I have tried several different styles of code but no matter what I do, my twine look never changes. Images don't show up, fonts don't change, and background colors don't apply. I went to the CSS all color codes webpage and have tried using the names and designated code for each color and they do not show up.

Here is the code to change the entire background that I am working with in Sugarcube.

body {

  background-color: white;

  color: darkgrey;

  font-family: Futura, Impact, Helvetica, sans-saerif;

  font-size: 80%;

}

As far as I know this code SHOULD work, but it doesn't. I've watched videos where other's used this code and it worked, but for some reason it won't change on mine. I need serious help. I'm desperately trying to learn how to make great games on Twinery, but this alone is frustrating me fast.

Help?

Answer 1

You don't mention where you're placing this style or if it is supposed to apply all the time or only at specific moments.  Those are kind of important to know.

Regardless.  Styles should primarily go in your Story Stylesheet (story map menu > Edit Story Stylesheet).  If you're not placing it there, then that would probably be the reason why it's not working.

Also.  I don't know if it's a transcription error, however, you misspelled serif in sans-serif.

Comments

Also, you might want to check out the "Bleached" stylesheet in the SugarCube downloads section if you want to see all of the items you might want to modify the CSS styles of.

---

Hey,

Its going in the style sheet and I wanted the "Start" passage to be steel blue and then I was going to assign a overall background theme to the rest of the passages from there. Either that or I want to have a background image on the first passage and then another background image for the rest of the passages.

So far adding images in my files doesn't work, using any background color CSS doesn't work in the style sheet. I'm at a loss.

I am however, trying all these codes in the style sheet of my game. Except for the image which is supposed to go in the passage its intended for as I understand. For example, I have a passage labeled BONFIRE and I have an image, bonfire.jpg in the file "Game Images" under my story name file, with an html of the updated version of my game.

It just seems no matter what I do, I can't get the codes to work. : (

This updated code:

body {
  background-color: darkgrey;
  color: lightgrey;
  font-family: Futura, Impact, Helvetica, sans-serif;
  font-size: 80%;
}

The 'body" word still shows up red and nothing happens. There is nothing else in the style sheet, so I'm unsure why it won't work.

---

The reddish-orange color is simply how type selectors are styled in Twine 2's stylesheet editor.  It doesn't imply that anything is wrong with the style.

If by "nothing happens" you mean that after adding the style rule to the Story Stylesheet you went to back to the story map and tried Play or Test, then check the project's story format (story map menu > Change Story Format) to ensure that it's actually using SugarCube v2.

---

So far adding images in my files doesn't work

If you're testing inside Twine then the image will need an absolute path (one where you tell it exactly where the file is in your directory structure, such as "C:/Games/MyGame/images/pic.jpg").  However, if you publish to an HTML file and open that published file up, you can use a relative path (a path relative to the location of the HTML file, such as "images/pic.jpg" if the HTML file is in "C:/Games/MyGame").

When developing my code I put the following at the beginning of my JavaScript passage:

if (window.hasOwnProperty("storyFormat")) {
	setup.Path = "C:/Games/MyGame/images/";  // Running inside Twine application
} else { 
	setup.Path = "/images/";  // Running in a browser
}

Then I can do either of the following in my Twine passages:

Twine image code:
[img[setup.Path+'picture.jpg']]

HTML image code:
<img @src="setup.Path+'picture.jpg'">

NOTE: If you want to use the "@" HTML attribute directive I'd recommend updating to the latest version of SugarCube since there was a bugfix for this in v2.23.5.

Unfortunately this trick won't work in the Stylesheet section so you'll either have to A) change the CSS at runtime (jQuery makes this pretty easy) or B) manually change the stylesheet depending on where you're going to be looking at your Twine story.  Here's how you could do it using the first method:

<<run $("body").css("background-image", "url('" + setup.Path + "pic.jpg')")>>

That sets the CSS property on the "body" so that it will load the background image that you want there.

See the jQuery css() documentation for details.

Hope that helps!