Howdy, Stranger!

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

Basic Harlowe Passage Tag Based Styling

edited September 2015 in Workshop
A common question that regularly gets asked about Harlowe is "How do I use Passage Tags to style Individual Passages", the following is one possible solution to this question.

note: The following assumes that you are using the version of Harlowe that comes with Twine 2.0.8, it should work on later versions of Harlowe as long as features like the special header tag and (passage:)'s tags still exist.

Although Harlowe allows an Author to access a Passage's Tags via (passage:)'s tags it currently does nothing with them, except in the case of the special startup / header / footer tags (and the hidden debug-startup / debug-header / debug-footer tags).

The following code takes any Passage Tags you assign to a Passage and adds them as CSS class attributes of the html element of the story, this then allows an Author to use CSS selectors based on those tags/classes to style individual passages.
The following should be added at the start of your story's header tagged passage. If you don't already have one then first create a new Passage (it's name is not important but I name mine Header for convenience) and then add the special header tag to the new passage.
{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}

You can now use CSS like the following to style individual passages.
note: the following assumes I have given one passage in a story a desert tag and another passage a forest tag.
html {
	background-color: #FFFFFF;
}

html.desert {
	background-color: Beige;
}

html.forest {
	background-color: LightGreen;
}

I have attached a copy of an story archive which contains examples of the above code in action. You can use Twine 2's Import From File option to import it.
html
html
Harlowe Tag Based Styling Archive.html
2K

Comments

  • I lost my believes and accepted you as my new God. Thanks so much for this!
  • I'll just join the Cult of Greyelf with @ruzzle here.
    Thank you, you are the best.
  • As much as I like the praise, I only converted an existing technique to work in Harlowe.
  • would it be possible to adapt this to the sugarcube format?
  • jovofurr wrote: »
    would it be possible to adapt this to the sugarcube format?
    This feature is already built into SugarCube and is mentioned in the Tagged Stylesheet Warning.
    SugarCube automatially adds a passage's tags to two HTML elements:

    1. the #passage div element which allows you to style the area that contains the content of the current Passage.

    2. the body element which allows you to style the whole page. The SugarCube equivalent of the CSS I posted in the thread's first post would be:
    body.desert {
    	background-color: Beige;
    }
    
    body.forest {
    	background-color: LightGreen;
    }
    
  • This doesn't work for me. I want the passages I tag with 'city' to have an orange background, and all the others to have a blue one. The first passage (which doesn't have a 'city' tag) is blue, and the ones with a 'city' tag are orange, but all the passages after that are also orange, even though they have no tags. Is this just some kind of bug and I have to use this method again, but to make the other passages blue using another tag?
  • No offence by the way, I was just asking for some help. :smile:
  • Deadshot wrote: »
    Is this just some kind of bug
    I just retested the code in the first post within a new story and it worked as expected, passages with style tags that have related CSS change the background colour and passages without style tags have the default background colour.

    Could you post an example of the contents within your header tagged passage and your Story Stylesheet area.
  • Don't worry - I've worked it out now.
  • In my case when using this the Heading markup (##) is broken. Any way to workaround that?
  • jivimberg wrote: »
    In my case when using this the Heading markup (##) is broken. Any way to workaround that?

    <h1> Tags still work
  • greyelf wrote: »
    Deadshot wrote: »
    Is this just some kind of bug
    I just retested the code in the first post within a new story and it worked as expected, passages with style tags that have related CSS change the background colour and passages without style tags have the default background colour.

    Could you post an example of the contents within your header tagged passage and your Story Stylesheet area.

    Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh, I just worked out whatya mean! :open_mouth: That really shouldn'ta taken so long, and I've made tons of games doing this wrong. Thank you! I now join the Cult of Greyelf with @ruzzle and @Melyanna, no matter how little effort it took you to adapt this or whatever - you're epic!!! :smiley: Can you pleeeeaase write a twine book? :smile:
  • Thanks a lot for these instructions!
  • edited October 2016
    What are the hidden debug-startup and other tags about?
  • edited October 2016
    greyelf wrote:
    I have attached a copy of an story archive which contains examples of the above code in action. You can use Twine 2's Import From File option to import it.

    Where's the copy?
  • Harlowe 2.x Amendment

    There are two changes to Harlowe 2.x that effect the solution outlined in this thread.

    1. Tags assigned to a Passage are now automatically added to the tw-story element's tags attribute when the relevant passage is navigated to, the same tags are automatically removed when the passage is navigated away from.

    This means that you probably won't need the code that was being placed in the header tagged passage, it depends on exactly what you are trying to style.

    The Harlowe 2 equivalent of the tag-based CSS in my original comment would look something like:
    tw-story[tags~="desert"] {
    	background-color: Beige;
    }
    
    tw-story[tags~="forest"] {
    	background-color: LightGreen;
    }
    


    2. The core CSS of 2.x is different than that of 1.x, and not just the changing of the fore-ground and back-ground colours, some attribute defaults have been moved from one element to another. This can cause CSS designed for 1.x not working the same or at all for 2.x

    eg.
    1.x assigns the default background colour on the html element and 2.x assigns it to the tw-story element, which is a decendent of the html element. This is why the CSS in the original comment does not seem to workfor 2.x, the background colour is changed on the html and then changed again by the tw-story element's default CSS.
  • I was recently asked how to conditionally hide the content of either header or footer tagged passages, the following examples show how to use the passage tag based styling methods described within this thread to achieve this.

    Both of the following examples make the following assumes:
    A. you're using a no-header tag to hide the header tagged passage(s)
    B. you're using a no-footer tag to hide the footer tagged passage(s)
    C. If using Harlowe 1.x, you have implemented the special Header header tagged passage in the original post.


    The CSS examples to be placed within your story's Story Stylesheet area.

    Harlowe 1.x:
    tw-include[type="header"][title="Header"] {
    	display: none;
    }
    html.no-header tw-include[type="header"] {
    	display: none;
    }
    html.no-footer tw-include[type="footer"] {
    	display: none;
    }
    
    WARNING: The first CSS selector in the above Harlowe 1.x example is being used always hide the special Header header tagged passage being used to implement tag based styling. If you change that passage's name from Header to something else then you also need to change title name within the first CSS selector.


    Harlowe 2.x:
    tw-story[tags~="no-header"] tw-include[type="header"] {
    	display: none;
    }
    tw-story[tags~="no-footer"] tw-include[type="footer"] {
    	display: none;
    }
    
Sign In or Register to comment.