Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe - changing background color for one chapter

So I found a thread that explains how to change the background color temporarily in SugarCube, but I really, really want to use Harlowe (it just looks better).
I don't care, if I can change the background color for the passage via stylesheet in combo with a tag, if I have to put a code in every single passage or something totally different.

Currently I am using
body {
background-color: #000000;
}
inside the stylesheet, but that of course only changes the color for the WHOLE game. But I want to have three passages with a red background.
Can someone tell me, how?

Thanks in advance!

Comments

  • It's not much help for right now, but passage-specific CSS changer macros are in the works for a future version of Harlowe.

    But for now, I recall someone was trying this, though I've never tried it myself.
  • It works during testing, but once I punlish it, it disappears (but I have to confess, I don't exactly understand how to make a directory folder for the finished game anyway, so that might be my fault :/)
  • MoonByte wrote:

    So I found a thread that explains how to change the background color temporarily in SugarCube, but I really, really want to use Harlowe (it just looks better).


    It's not terribly difficult to change SugarCube into looking like Harlowe. You just need to put Harlowe's stylesheet body elements into your CSS. And you can add the background-color: transparent; or display: hidden; properties to various sidebar elements if you do not like the body/sidebar division.


    MoonByte wrote:

    It works during testing, but once I punlish it, it disappears (but I have to confess, I don't exactly understand how to make a directory folder for the finished game anyway, so that might be my fault :/)


    You just create a new folder to put the published file in, then replicate your testing folder structure inside that folder. E.g. if you had a subfolder called css in your testing directory, you'd simply copy over that folder into your new published folder.
  • MoonByte wrote:

    It works during testing, but once I punlish it, it disappears (but I have to confess, I don't exactly understand how to make a directory folder for the finished game anyway, so that might be my fault :/)


    Just make sure the folder of CSS files is in the same place as the published HTML file and you'll be good to go!
  • Claretta wrote:

    It works during testing, but once I punlish it, it disappears (but I have to confess, I don't exactly understand how to make a directory folder for the finished game anyway, so that might be my fault :/)


    You just create a new folder to put the published file in, then replicate your testing folder structure inside that folder. E.g. if you had a subfolder called css in your testing directory, you'd simply copy over that folder into your new published folder.

    Did that, doesn't work, the game stays with a white background.
    I even saved the file into the folder where the index.html is, it also can't seem to find the .css there.

    So I guess, I try to figure out where the stylesheet data from Harlowe is and put that into SugarCube
  • MoonByte wrote:
    I even saved the file into the folder where the index.html is, it also can't seem to find the .css there.


    If you're using the same method that the post I linked to is, you need to put the folder where the index.html file is, not the .css files.

    If you're sticking the .css files in the same place as the index.html file - which should also work - then you need to use the following line in your passages instead:
    <link rel="stylesheet" href="style1.css" type="text/css" />
  • MoonByte wrote:

    So I guess, I try to figure out where the stylesheet data from Harlowe is and put that into SugarCube


    Pretty sure it's here: https://bitbucket.org/_L_/harlowe/src/e2886e7beeca70e85f7a15fd38c76996551b9098/scss/main.scss?at=default

    Harlowe isn't really that hard to replicate as CSS. All it is is Georgia font at 100% with a solid white background for everything and any borders between the UI and body areas removed.
  • Thanks!
    I will probably solve it one way or the other (be it with SugarCube or by figuring out the whole folder-fun).
    Should both not work, will I get back, but I just guess, one of the two will help, so thank you both very much! :)
  • Please note you can't just plug Harlowe's CSS into SugarCube. You'd have to identify the elements on the SugarCube page you want to change (mostly body, the UI, and the UI border), and then change them as appropriate. This will take some playing with the CSS.

    You'd also end up missing the back arrow. But you would gain fancy UI area options.

    The main point is if it's just looks you're going for, looks are simple to replicate and possible without any hacks. Functionality is harder.
  • The topic of selectively changing Harlowe's background colour has come up before a couple of times.

    This post in that thread explains how to duplicate Twine 1 passage tag styling feature in Harlowe.
Sign In or Register to comment.