Changing the background colour mid-story in Harlowe

bphennessy

Is there any way to do this? The story I'm writing has a green background but I'd like to be able to change the colour to black at certain points.

Sage

@Sharpe has the answer for you.
It's here:
http://twinery.org/forum/discussion/1528/css-is-your-friend-the-basics-of-changing-twine-s-default-appearance-for-newbs

PS, you CAN do it. It DOES work.



Don't give up

bphennessy

Thanks! But sorry, I should have been a bit more clear. I know how to use CSS. What I'm looking for is the ability to change the CSS on the fly at specific points in the story. Like when the player gets to a certain passage, the background colour changes from green to black. This was possible in Twine 1 with tagged stylesheets but I don't know how to do it in Twine 2.

feliwebwork

Hi @bphennessy,

At the moment, for Harlowe, you have to use a "hack" code to get the background to change by triggering javaScript that changes the element class you want to change.

The code is as follows:

<div style="display:none;"><img src="!@#$"; onerror="$('element').removeClass().addClass('newclass')" /></div>

Replace the word

element

above with the HTML element you want to change the class of (e.g. putting

body

there would change the class of the body element in your HTML.

And replace the word

newclass

with the class you want that element to be changed to.

So for example:

<div style="display:none;"><img src="!@#$"; onerror="$('body').removeClass().addClass('intro')" /></div>

This will produce a "body.intro" element and class for that particular passage.

Then in your CSS, you can style it as you like, e.g.:

body.intro {
	
	background-image:url("imageFolder/myImage.jpg");
	background-size: cover;
	background-attachment: fixed;	
	z-index: -1;
	
}

When Harlowe 1.1 comes out officially, it will support the <script> element, and so you would call the change of class like this:

<script>$('element').removeClass().addClass('newclass')</script>

Please check out the following threads:

http://twinery.org/forum/discussion/2844/total-newb-backgrounds

http://twinery.org/forum/discussion/comment/8832/#Comment_8832

bphennessy

Perfect! That was it. Thanks so much.

mykael

...and this is simpler than just changing the tag on the passage?

feliwebwork

mykael wrote: »

...and this is simpler than just changing the tag on the passage?

Hi @mykael,

As I understand it, Harlowe does not have the ability to change the class of a passage depending on the tag, in the way that SugarCube does, which is why we have to call a JavaScript function. But if you do know of a simpler way of changing the background of a passage in Harlowe, please do share it.

greyelf

I believe @feliwebwork is correct, that currently Harlowe does not process passage tags and ignore them completely.

mykael

Just comparing it to sugarcane. So far Harlow seems to be a major step backwards in terms of usability...

greyelf

I believe it is slightly unfair to directly compare the two story formats, one has been in development for a lot longer (and therefor is more mature) than the other. I also believe that their target Author types are slightly different.

feliwebwork

I haven't delved into SugarCube yet, even though I know (from what I have read on this forum) that it is far more developed as a format than Harlowe and includes a lot of features I would love Harlowe to have (namely an easy way to use audio, images, and the ability to have a separate passage that doesn't re-render when other passages do, styling via tags, etc.).

Having said that, I just love the (macro:)[hook] format. I find it extremely simple and flows well when working on something. Being a noob at virtually everything, the simpler it is, the better.

Hopefully, with time, Harlowe will have all these other features and then it will only be a matter of who prefers using the <<if>>statement<<endif>> vs. (if:)[statement]