Using twine variables in CSS section

Authoring Twine
,
1

Twine Version: 2.7.1
SugarCube 2.36.1

Hello everyone,

i hope that this wasnt asked before - i couldnt find anything.

It is about the old problem about using the picture in the play&test function of Twine. For this i have this javascript:

if (document.location.href.toLowerCase().includes("/temp/") || document.location.href.toLowerCase().includes("/private/") || hasOwnProperty.call(window, "storyFormat")) {
// Change this to the path where the HTML file is
// located if you want to run this from inside Twine.
setup.Path = "file://.../Twine/"; // Running inside Twine application
} else {
setup.Path = ""; // Running in a browser
}

Everything fine. Then i declare a variable in StoryInit:

<<set $image = setup.Path + "img/book1.jpg">>

Also fine.
Now i want to use this Variable in the CSS Section of Twine:

#image-book1 {
	position: absolute;
	background-image: $image;
	width: 1000px;
	height: 710px;
}

Doesnt work.

I tried different variations, like: url($image), src(), with “” and without etc.
Nothing works…
Is this even possible to use a twine variable in the CSS Section?

Thanks in advance.

2

Unfortunately, no. The Story Stylesheet is loaded first during startup, so there’s no way to leverage a story variable within.

You can use CSS custom properties (a.k.a., CSS variables) that you can set in your Story JavaScript though.

For example, in your Story Stylesheet:

#image-book1 {
	position: absolute;
	background-image: var(--book1-image);
	width: 1000px;
	height: 710px;
}

And in your Story JavaScript:

/* After setting `setup.Path` of course. */
$(':root').css('--book1-image', `url("${setup.Path}img/book1.jpg")`);

Alternatively, if you wanted to do it in your StoryInit special passage instead:

<<run $(':root').css('--book1-image', `url("${setup.Path}img/book1.jpg")`)>>
2 Likes
3

Thank you so much. This helps me really!

But one question more. Could you explain me this part:

$(':root').css(..)
4

The above can be broken down into three individual parts:

1: The $() jQuery search function.

The function returns an Array containing a reference to any HTML elements found in the web-page’s Document Object Model (DOM) that match the CSS Selector passed to it.
eg. If the web-page contained a series of HTML <p> paragraph elements like the following…

<p>First paragraph in the Passage</p>
<p>Second paragraph in the Passage</p>
<p>Third paragraph in the Passage</p>

…the following query would return an Array containing references to each of those three <p> elements.

$('p')

2: The ':root' CSS pseudo-class.

This CSS Selector is an alias for the <html> element of the web-page’s DOM. And it is being used instead of that element’s html element-type because :root is more specific than html.

3: The jQuery css() function.

This function can be used to both:

  • access the values assigned to the CSS Properties of the elements returned by the $() query.
  • assign values to the specified CSS Properties of those same elements.

In the use-case supplied by TME, a value is being assigned to the --book-image property (variable) of the DOM’s <html> (:root) element. This allows that property value to be available to both that element and any of its decedents, which is all the elements contained in the web-page.

2 Likes
5

Thank you very much, for the detailed explaination.

1 Like