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
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.
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.
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.
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.
Comments
Thank you, you are the best.
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; }Could you post an example of the contents within your header tagged passage and your Story Stylesheet area.
<h1> Tags still work
Ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh, I just worked out whatya mean!
Where's the copy?
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.
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; }