I don’t want to do anything complicated, just change the color of the background and the text throughout the game. (The default Black background and white text is simply darn ugly IMO.)
So far, I’ve tried:
body { background-color: #A9F5F2;}
resulted in the text being prepended verbatim to the game text.
(css: “background-color: #A9F5F2;” )
got me a complaint about needing to store the result in a variable, or something.
Those resulted in
and
(background: “#A9F5F2;”)[blue background] got the words “blue background” prepended to the game text.
I’ve tried toggling on the developer tools, and under body { background-color: } I’ve set the color to #A9 blah blah. It even shows a little blue square where it didn’t show one before, but still the game plays as black background and white text.
(1) To clarify, and for future readers, any additional CSS rules should always go into the Story Stylesheet. (Using the Twine 2 editor, this is accessed through the Story Menu -> Edit Story Stylesheet and then adding new CSS rules.)
(2) The use of the (css:) macro applies to hooks. To apply it to a larger part of the story area, a named hook such a ?Passage can be used to add new CSS rules during a passage.
(3) Changing the rules for the body element may seem like the best approach, but it misses something: Harlowe overrules style rules on its own internal HTML element. That is, the new style rule would “cascade” down from body to the internal elements, but because there are specific rules for other elements, these get overwritten.
It may help to consider the structure of Harlowe HTML:
To affect the “passage” area, new rules can be added to the tw-passage element in Harlowe. For the “story” area, rules for tw-story can be added. (One of the ways to “hide” the sidebar in Harlowe, for example is to use tw-sidebar {display: none}.)
For effects that affect hooks or other things, (css:) is the best method. For more longer-term styles that may be used in multiple places, adding rules for tw-story or tw-passage are the better method.
Hey, thanks @videlais, I’ll look at it tomorrow and see if I can make sense of it. But it seems to be really complicated to change this. I mean, I’ve written a few passages, tried a test playthrough and thought "Yuk. I really don’t want to look at this ugly-ass style while I’m writing the rest of the story"and tried to change it --> grief.
Is Harlowe usually like this? I mean, shackling the player into “Our way or the highway?” Changing colours on a website is, and should be, trivial.
I’m not going to comment on how Harlowe presents itself.
It’s easily to change it. As I pointed out, you were targeting body when you needed to use tw-story instead. Anything you put on body was cascading down to tw-story where it was being overwritten by its own specific CSS rules. In CSS, the specific always overpowers the general.
tw-story { background-color: #A9F5F2;}
I also mentioned the (css:) macro because you can change CSS rules programmatically using Harlowe as well.
The thing is, it is trivial to change it, you just have to know how. And all programming languages are “our way or the highway” systems. That’s just the nature of writing code, you have to follow the language’s rules.
Speaking as someone who’s literally learned a dozen distinct programming languages, you just have to familiarize yourself with any language you work in, and you can’t expect it to conform to your preferences. That’s just not how computer languages work.
I know it can be frustrating at first, but as with most things, it gets much easier with practice.
Until you get to the magic word !important, but once you’re using that you should usually stop, step back, and ask yourself if there’s a better way to do what you’re trying to accomplish.
