Howdy, Stranger!

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

Harlowe- External Stylesheets to style individual passages?

I know this has been discussed extensively... but everything I've seen in the forums on this subject is unclear and inconclusive, so I'm bringing it up again.

Stop me if I'm wrong, but it looks like the choices for having passages that differ from the built-in stylesheet are:
1. Switch to Snowman and use java to acheive a version of what Twine 1 did with passage tags
2. Save a .css doc in the same folder that contains ... (this is where it starts to get fuzzy) the html doc of the story published to file? I'm not sure anyone even confirmed that this works?

I don't want to switch to Snowman because I've already finished enough of my project that I'm not interested in going back and recoding all my macros. But the existing discussions on #2 in the forums are a bit confusing.

This is the html code for referencing an external stylesheet that I've seen:
<link rel="stylesheet" href="FolderName/document.css" type="text/css" />

When I plug that in, nothing happens. I've got a copy of my stylesheet folder both in the folder where the published html doc is and in the program file folder for Twine.

So what am I missing?

Thanks!

Comments

  • notes:
    a. I won't comment on if using link elements outside the head section of a HTML document is a good technique or not, I'll leave that to better informed people.
    b. You can change the folder/directory names and the CSS file name used in the steps below to anything you like, I used project, styles and forest.css for convenience.

    Steps to make the above link element technique work:

    1. Create a project folder/directory somewhere on your hardisk.

    2. Within the project folder/directory create a styles sub-folder/sub-directory.

    3. Within the styles folder/directory create a new file named forest.css.

    4. Edit the forest.css file and place within it the CSS you want to occur in the passage(s) you are about to add a link element to.
    eg. something like the following.
    tw-link {
    	color: green;
    }
    
    5. Add the following statement to the top of the content of the passage(s) you want to style as forest:
    <link rel="stylesheet" href="styles/forest.css" type="text/css" />
    
    6. Use the Publish to File option to create a story HTML file, save this HTML file within the project folder/directory you created in step 1.

    7. Open the story HTML file in the project folder/directory, navigate to the passage you added the link element to and you should see the CSS within the forest.css file take effect in that passage.
Sign In or Register to comment.