0 votes
by (160 points)

I'm trying to dynamically style my passages (to allow the player to choose different display modes for accessibility), but the following (in a header passage) isn't working:

(enchant: ?sidebar, (background: $BGcolour))

($BGcolour is a string containing a colour hex code, because I also want to be able to save its contents and the save function doesn't like the colour data type)

I specifically want to be able to style the sidebar independently of the passage and story - any advice?


1 Answer

+1 vote
by (158k points)

Harlowe doesn't formally define it's custom HTML elements (like tw-story, tw-passage, tw-sidebar, etc...) which means it it up to the web-browser to decide what default values are allocated to the CSS properties of those elements. In the case of the tw-sidebar custom HTML element the CSS background-color property of the is assigned a default value of rgba(0, 0, 0, 0) (Transparent Black), or at least it is in Chrome, which results in the background-color assigned to the tw-story element (Black) to bleed through.

If you Inspect the HTML elements generated by your example code, you will a structure like the following..
note: I assigned the $BGcolour variable a value of "#663399".

<tw-enchantment style="background-color: rgb(102, 51, 153); display: block;">
		<tw-icon tabindex="0" class="undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
		<tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>

.. and in theory the background-color of the tw-enchantment element should bleed through to the tw-sidebar but it doesn't.

To fix the "background colour not bleeding through" problem simply adding the following CSS to your project's Story Stylesheet area.

tw-sidebar {
	background-color: inherit;


Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.